If you’re looking to launch your own blog and self host then it’s worth looking at building a Gatsby site and deploying to Github. Github Pages provides a perfect free hosting platform for any static website and Gatsby’s gh-pages plugin makes the integration simple. In this post I’ll cover how to setup a Gatsby blog using the Novela Theme, and deploy it to Github Pages.
Installing Gatsby
Gatsby requires npm and Node.js so if you don’t have those already head on over to nodejs.org and go through the install for your system.
Install the gatsby command utilities
1npm install -g gatsby-cli
The Gatsby Command Line will let you deploy and run your gatsby site locally for testing.
Initialize Gatsby Starter Site from Novela
1gatsby new your-blog-name https://github.com/narative/gatsby-starter-novela
Replace “your-blog-name” with whatever you want your project to be called.
gatsby new
pulls a project from an existing source you can use any theme you’d like, but I certainly recommend the Novela theme for a well designed blog. Check out their live demo here: novela.narative.co.
Deploy to Github Pages
Deploying to Github pages is made easy by the Gatsby gh-pages package. Github also provides static hosting on any public repo.
Configure Github repo for Pages
Github Pages requires a new repo to be created and named username.github.io where username is your github username. This will allow github to point to your static pages with a subdomain using your username.
You can configure a custom domain at any time, but if you use a single custom domain across multiple repos, you’ll want the root site, to be in this username.github.io repo.
Once you have your new username specific repo, go to the repo Settings and scroll down to find Github pages. Select a branch and click Save to publish your pages site. It will be live quickly, within a minute or two.

Install gh-pages
Go back to your shell and install gh-pages in your project directory:
1npm install gh-pages --save-dev
Add deploy script to package.json
Edit package.json and add the deploy line to your scripts object.
1{2 "scripts": {3 "deploy": "gatsby build --prefix-paths && gh-pages -d public"4 }5}
Add Github repo prefix path to gatsby-config.js
This step is only necessary if you publish to a repo that is not your root(username.github.io) repository
1Copygatsby-config.js: copy code to clipboard2module.exports = {3 pathPrefix: "/reponame",4}
Test and Publish
To test your site:
1gatsby develop
To publish to GitHub Pages:
1npm run deploy