Navigate back to the homepage

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

John
December 2nd, 2020 · 1 min read

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.

GH Pages

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 clipboard
2module.exports = {
3 pathPrefix: "/reponame",
4}

Test and Publish

To test your site:

1gatsby develop

To publish to GitHub Pages:

1npm run deploy

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Publark

Publishing with Contentful, Gatsby Novela, and Medium

Slugging through contentful integration

December 2nd, 2020 · 2 min read

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

How to launch your own gorgeous blog for free with Gatsby, Novela Theme, and Github Pages!

December 2nd, 2020 · 1 min read
© 2019 Publark
Link to $https://github.com/johnfischer14Link to $https://www.instagram.com/johndavidfischer/Link to $https://www.linkedin.com/in/john-f-59742356/Link to $https://open.spotify.com/user/1294781914?si=bm4ZKALeTR2Sr8nbq0bdJA