Gatsby From Scratch

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

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

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.

"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

Now I can browse to http://localhost:8000/ and see my Gatsby site running!