theRDnotes

2020 February 12th

Part2: Setup

Prerequisite

  • Install git
  • Install nodeJs

Kick off

Let's initialise the blog with below commands

mkdir the-rd-notes
cd the-rd-notes

Add git and npm

git init
npm init -y

Add .gitignore file with following contents

# Project dependencies
.cache
node_modules

# Build directory
public

# Other
.DS_Store
yarn-error.log

Lets get gatsby

Install plugins as follows

npm install gatsby react react-dom

Create pages directory

Lets add pages folder and index.js file to it

mkdir -p src/pages
touch src/pages/index.js

Add following to index.js

import React from 'react';

export default () => {
  return <h1>My awesome blog!</h1>;
};

package.json

Add gatsby dev script to the package.json file.
Your package.json should look like below.

{
  "name": "the-rd-notes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gatsby develop -p 8888 -o"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/raevilman/the-rd-notes.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/raevilman/the-rd-notes/issues"
  },
  "homepage": "https://github.com/raevilman/the-rd-notes#readme",
  "dependencies": {
    "gatsby": "^2.19.12",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Launch 🚀

Run below command from project directory in the terminal and your website should run in the default browser at localhost:8888

npm run dev

That's all folks!

In the next part, we will add some markdown content to our blog!