Deploying a Gatsby blog in GitHub pages

April 13, 2020 — 2 Min Read

For some time I was thinking of creating my own blog. The main goal was to record any cool stuff I would do during work or any issues I would overcome. Finally the time has come!

In this post I’ll go through the steps I took to get a Gatsby starter blog up and running and deployed to GitHub pages.

Why Gatsby

Gatsby blogs are usually static sites and the content for the posts use markdown. Easy to set up and run and a personal interest in React.

Why GitHub pages

It’s easy to deploy and it’s free.

Let’s start

1 - Install the Gatsby CLI

npm install -g gatsby-cli

2 - Choose a starter blog

Go to the Gatsby website and pick a starter.

https://www.gatsbyjs.org/starters/?v=2

In my case I used this one:

https://www.gatsbyjs.org/starters/ammarjabakji/gatsby-markdown-blog-starter/

3 - Create a GitHub repository

Create a repository named yourusername.github.io.

4 - Create your starter blog into the repository

gatsby new gatsby-markdown-blog-starter https://github.com/ammarjabakji/gatsby-markdown-blog-starter

A couple of notes here:

• I created a separate branch to host the blog code where I do all dev and then run the deploy command.
• The deploy command pushes the files to the master branch.
• The master branch is the one that hosts the static files generated by the Gatsby build (Default GitHub pages configuration).

Folder structure for a quick start:

• content folder - where the blog posts are
• data/SiteConfig.js - site name, links, etc.

Deploy the website:

npm run build:gh

This command will clean the output folders, run a Gatsby production build and use the gh-pages npm package to deploy to GitHub.

And that’s it, navigate to your GitHub URL you should see the blog up and running!

---