invaderWeb Dev Bit by Bit

Gatsby and GitHub Pages, how to deploy your static site to your custom domain

Published on September 14, 2019

Gatsby is a free and open source framework based on React, it is the perfect tool to build a blog or portfolio. You can find below the steps to deploy your site to the root subdomain: username.github.io, and then configured to use a custom domain.

Installing the gh-pages package

npm install gh-pages --save-dev is the easiest way to push a Gatsby website to GitHub pages.

Add a new script to your package.json - this will build your site running gatsby build and publish it to GitHub - makes it easier to build and deploy your site.

"scripts": {
  "deploy": "npm run clean && gatsby build && gh-pages -d public -b gh-pages"
}

Configuring the GitHub Pages source branch

  • Navigate to your project folder
  • Create an orphan branch: git checkout --orphan gh-pages
  • Run the deploy script: npm run deploy
  • Navigate to your site's repository on GitHub.com
  • Click on Settings
  • In the GitHub Pages section, use the Source drop-down to select gh-pages branch
  • Click Save

Deploying to the root subdomain and using a custom domain

Don’t forget to add your CNAME file to the static directory.

The CNAME file should contain your domain name.

celinechole.com

This domain name also needs to be in your settings on the GitHub repository.

github-custom-domain

Resources:

How Gatsby Works with GitHub Pages