Host your own free blog with Gatsby, Novela Theme, and Github Pages

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

Copy 
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

Copy 
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:

Copy 
1npm install gh-pages --save-dev

Add deploy script to package.json

Edit package.json and add the deploy line to your scripts object.

Copy 
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

Copy 
1Copygatsby-config.js: copy code to clipboard
2module.exports = {
3  pathPrefix: "/reponame",
4}

Test and Publish

To test your site:

Copy 
1gatsby develop

To publish to GitHub Pages:

Copy 
1npm run deploy