Publish a Gatsby project on github pages

• Create the project on local machine.
• Install github pages npm package as a dev dependency in the project.

npm i gh-pages --save-dev

• Modify package.json in the project root directory to include a deploy script command under scripts tag.

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

• Modify gatsby-config.js to include “pathPrefix” in the exports.

module.exports = {
	pathPrefix : "/<repository-name>",
	.....
}

• Run the deploy script.

npm run deploy

• Commit the code and push to remote .

git add *
git commit -am "first publish"
git push origin main

At this point, a new branch gh-pages will be created in the remote repo.

• Go to the repo on github, then Settings→Pages (left sidebar). It will open up the config settings for github pages. Now, for the Source, select Deploy from branch from the dropdown. Branch → gh-pages from the dropdown and select root 📂 , then hit save.

After all these steps are done, the static site will be hosted on github pages, the deployment can be checked on https://github-username.github.io/repository-name

If you like TeXt, don’t forget to give me a star.