How to publish your gatsby site to GitHub for free

This article will help you to publish your gatsby site to github pages .So we can take a look at what each of these technologies are in brief

Gatsby

Gatsby is a react based ,GraphQL powered static site generator . It simply means it combines the power of react ,GraphQL ,web pack and other front end tools to offer a great developer Experience

Github Pages

GitHub Pages are public webpages hosted and easily published through GitHub.Any static site can be published using gh-pages.You can know more about them here

The prerequsite that you need for doing this is you are git and nodejs (which you should already have installed as you are using it for gatsby) installed on your system.You should also have a github account and a repository to store your code and host it. you can read more about creating a github repository here

The first step should be to install github CLI ,it can be easily done using an npm command npm install gh-pages --save-dev

The second step should be to add the following to gatsby-config.js file,here reponame is the name of your github repo

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

The third step is to add the the following to your package.json file

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

Now you are ready to deploy your app to github .You can do that with npm run deploy

The deploy script we wrote creates a build of our app and then publish it to github. If we navigate to the github repository we have created and refresh the page ,we can see two branches ,the master branch and gh-pages branch .The master branch will have all the code we wrote during development and the gh-pages branch contains our production build . This build is now published via github pages. You can go to the settings and scroll down till you see the github pages title where you can find the url to your site