Search by Algolia

How Gatsby Works with GitHub Pages

The easiest way to push a gatsby app to GitHub Pages is using a package called gh-pages.

npm install gh-pages --save-dev

GitHub repository page

Add a deploy script to package.json

    {
        "scripts": {
            "deploy": "gatsby build --prefix-paths && gh-pages -d public",
        }
    }

We are using prefix paths because our website is inside a folder http://username.github.io/reponame/ so we need to add pathPrefix to gatsby-config.js

module.exports = {
    pathPrefix: "/reponame"
}

When you run npm run deploy all contents of the public folder will be moved to your repository’s gh-pages branch. Make sure that your repository’s settings has the gh-pages branch set as the source.

GitHub Organization or User page

First thing is to create a repository which should be named username.github.io.

In this case we dont need to specify pathPrefix, but our website needs to be pushed to master branch.

    {
        scripts: {
            ...
            "deploy": "gatsby build && gh-pages -d public -b master",
        }
    }

After running npm run deploy you should see your website at http://username.github.io

Custom domains

If you use a custom domain, don’t add a pathPrefix as it will break navigation on your site. Path prefixing is only necessary when the site is not at the root of the domain like with repository sites. Also don’t forget to add your CNAME file to the static directory.


Was this helpful? edit this page on GitHub