DEV Community

Deploy Gatsby sites to GitHub Pages

Dinesh Pandiyan on January 23, 2019

Gatsby is all the rage now, thanks to the amazing team behind the fancy and easy-to-use framework. I'm not going to go into the details of why you ...
Collapse
 
afxjzs profile image
doug

Thanks for this article. Really helpful. ...one issue i'm having is that in order to have the URL of my github pages site be [username].github.io instead of [username].github.io/repo-name i need to push to my master branch, but when I run the deploy script, it adds all the compiled/built code to master. How do you keep the master branch at github.com/flexdinesh/portfolio clean while still using github pages?

Collapse
 
jtmchorse profile image
JT McHorse

Hi Diniesh, this post was exceedingly helpful. It took me all of half an hour to get gatsby running locally and setup to deploy by following your guide and using the quick start example from gatsby.

One thing that might be helpful to show is how to run npm scripts, despite using Gulp every day I wasn't sure how to run an npm script and had to go find it on StackOverflow.

npm run-script deploy:github

Collapse
 
nitishk72 profile image
Nitish Kumar Singh

What is the setting of your netlify.

As I have seen you have to branch dev and master. Netlify have ability yo pull a branch and build it and then deploy.

My question is that

which branch you are using on Netlify and with what settings ?

Collapse
 
flexdinesh profile image
Dinesh Pandiyan

The source code is in this repo. Netlify deploys automatically everytime I push to master.

Collapse
 
nitishk72 profile image
Nitish Kumar Singh

How GitHub pages works ?
I mean from which branch.

Thread Thread
 
flexdinesh profile image
Dinesh Pandiyan

I have a script deploy:github that deploys the code to github pages. I do it manually every time I make a change.

Collapse
 
lennymartinezd profile image
Lenny Martinez • Edited

Is there a particular reason why you use a script to push things?
Does the typical git flow of add>commit>push not have an effect on a GatsbyJS app? I'm coming from Jekyll to Gatsby and trying to understand how to setup a repo for this all to work (should I be using netlify to host things?)

Collapse
 
flexdinesh profile image
Dinesh Pandiyan

Re: script

You don't have to use an npm script to do things. You can do it with git commands. npm script is an automation to make things faster.

Re: netlify

GitHub Pages is completely free but has limitations if the traffic bandwidth becomes really really high.
Netlify has a free tier but has limitation on the build minutes in the free tier.

You can choose either of these or a different static hosting service to deploy your site. It's upto you.

Collapse
 
learnwithparam profile image
Paramanantham Harrison

Doesn’t it require authentication for the repo or it will handle repo only if the repo is under same user name?
How it works without the need for authentication?

Collapse
 
flexdinesh profile image
Dinesh Pandiyan

When you run the command, it will ask for authentication in the command line.

I'll edit the post and add it as a note.

Collapse
 
learnwithparam profile image
Paramanantham Harrison

Got it

Collapse
 
vermaananya profile image
Ananya Verma • Edited

Thanks for the article. Although my website is running properly, but I'm facing one issue while deployment. My gatsby project file structures and the files are getting changed while deploying (when npm run-script deploy:github ) command is run. Although the files remain intact before running the deploy-command.

Let me know where I'm doing it wrong.

Collapse
 
niyasrahman profile image
niyasrahman

I use gatsby+TravisCI+firebase for my deployment.

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

If our gatsby project uses some private api-key / passwords, how would we deploy an app and secure these private keys? Using the .env file is not secure, since these stored on the client-server. Such a problem would require, I imagine, a server-side solution thus deploying might be a bit more complicated?

Collapse
 
hanna2895 profile image
Hannah Werman

Thanks for writing such an informative article! I added the code into my project and it runs the build, but then it just gets stuck (no prompt for authentication, success, or error message). How do I tell if it's working, or figure out what's going wrong?

Collapse
 
eloi profile image
Eloi Simard-Quesnel

I typed "gatsby github pages" on google and this came up instantly. Thank you, it was exactly what I needed!

Collapse
 
anamritraj profile image
Anand Amrit Raj

Not to promote my article or anything. I just want to add to what Dinesh is conveying here.

You can also integrate TravisCI to automatically deploy it to gh-pages. All you have to do is push changes to master.

dev.to/anamritraj/how-to-create-a-...

Collapse
 
yogeshktm profile image
yogeshwaran

Hey dinesh. i have setup deployed in netlify. I need to add my custom domain for the netlify site. Changed DNS settings and namespace. It didn't work yet. any idea ?

Collapse
 
hebasaadosman profile image
hebasaadosman

thanks for your useful article ,
i publish my site but it redirect to default gatsby site
how i make it redirect to index.html