The Beginners Guide to Setting Up a Gatsby Blog

Today we will be creating a blog with Gatsby and deploying it on Netlify. For the purposes of this blog, we will be using a Gatsby starter site called Gatsby Starter Peach (view demo here) rather than building it from scratch.

Dark Theme

Light Theme

Gatsby Starter Peach template has the following features —

1. SEO
2. Category Tags
3. Individual Tag pages
4. Dark/Light modes

If you want to create a blog that looks like this in under an hour, keep reading!

Prerequisites

1. npm / yarn
2. git / Github
3. React (not needed if you want to use the template as it is)

Let’s get started

Create a new repository on GitHub and clone it locally.

git clone  https://github.com/your-username/your-blog
cd your-blog

Install the gatsby CLI

npm install -g gatsby-cli

Create a new site using the starter site into a new app directory

gatsby new app https://github.com/ihsavru/gatsby-starter-peach

Move the contents of the app directory to the root directory.

mv app/* .
rm -rf app

Development

Run the development server.

gatsby develop

You can make any changes you want and it will be reflected on http://localhost:8000/

Open site-meta-data.json and edit the fields accordingly. You might have to restart your development server to see these changes being reflected. (You can skip these changes and edit later using Netlify CMS after deploying)

Next open static/admin/config.yml and change ihsavru/gatsby-starter-peach to your repo.

Don’t forget to create a .gitignore file.

Add the following to it —

node_modules
public
.cache
.DS_Store

After you are done, commit your changes and push it to GitHub.

git add .
git commit -m "your commit message here"
git push

Deployment

1. Create an account on Netlify
2. After logging in, go to Sites
3. Now click on “New Site from git”
4. Complete the following steps — Connect to GitHub, select your repository, and deploy the site!
5. Set build command to gatsby build and publish directory to public

A random URL will be generated where your site will be deployed.

Once the build status is completed, you can visit your site at the same URL which will look something like this — https://confident-ritchie-123a6d.netlify.app

Connect with Netlify CMS

1. Go to GitHub > Settings > Developer Settings or go to this URL.
2. Click on “New OAuth App”
3. Enter the details accordingly
4. Set the Authorization callback URL to https://api.netlify.com/auth/done and register the application

1. After that click on “Generate a new client secret” and copy it
2. Go to apps.netlify.org and go to your site
3. Go to Site Settings > Access Control
4. Under OAuth section, click on “Install Provider”
5. Select GitHub and copy and paste your client secret as well as your client ID and click on install

Create Posts

1. Go to your deployed Netlify site and go to the Admin page — https://your-site.netlify.app/admin
2. Log in using GitHub.
3. Now you can edit your blogs as well as your site metadata from here itself!
4. You can delete the sample blogs that come with the template and add your own.

Start creating!

Thanks for reading! If you come across any bugs, please raise an issue here.