Time to start building.

First thing to do is make some technology choices. I'm pretty sure I want a static site generator for my blog. JavaScript is my current favorite programming language. React is my current favorite UI library. This leaves me with Next.js or Gatsby. I went with Gatsby because I already built some stuff with it. Next.js is probably great too, maybe next time.

I'm not going to use a starter because I want to learn how to set everything up myself. Enough intro, I'm pulling up a terminal and start developping.

mkdir gatsby-from-scratch cd gatsby-from-scratch git init touch .gitignore echo "12" >> .nvmrc nvm use

.gitignore

node_modules .cache public

I started by creating a fresh folder for my project.

In this folder I initiated a Git repo to be able to commit my work. I created a .gitignore file to exclude some folders from being commited.

I created an .nvmrc file so nvm can make sure I'm on node 12. The nvm use command switches this terminal session to my preferred node version.

npm init -y npm install --save react react-dom gatsby echo "module.exports = {};" >> gatsby-config.js mkdir src mkdir src/pages touch src/pages/index.js

src/pages/index.js

import React from "react" ; export default ( ) => < div > Hello world! </ div > ;

Next up I created an npm package and installed React and Gatsby. I added an empty Gatsby configuration to gatsby-config.js .

Then I created index.js file with the famous "Hello world!" words.

npm install --save-dev prettier echo "{}" >> .prettierrc

Gatsby ships with Eslint built in. But I also like me some Prettier on the side.

package.json

"scripts" : { "build" : "gatsby build" , "develop" : "gatsby develop" , "format" : "prettier --write \"**/*.{js,jsx,json,md}\"" , "start" : "npm run develop" , "serve" : "gatsby serve" , "clean" : "gatsby clean" }

All I need now is some scripts in package.json to be able to do all the things.

npm run format npm start