DEV Community

Deploying a Next.js app to GitHub Pages

James Wallis on August 07, 2020

This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework ...

Read full post

Travis Geis • Jan 8 '22 • Edited

Thanks for the guide! I also had trouble with CSS, but it was because by default Github Pages ignores the _next directory because it assumes names prefixed with underscore are Jekyll files. You can add a .nojekyll file to the root of your Next public directory (so it ends up in the GH Pages root) to disable Jekyll processing.

I use gh-pages locally to deploy to Github, and to get that to deploy the .nojekyll dotfile, you also have to add the --dotfiles option to it. So in my package.json, my deploy script ends up being "deploy": "gh-pages --dotfiles --dist out".

Cheers!

James Wallis • Feb 11 '22

Good to know! Thanks Travis.

Nicole Zonnenberg • Jan 26 '21

Hi James!

I was able to follow your walk through pretty cleanly. However, it seems to have published my readme to my github pages instead of my nextjs app. Do you have any insight?

James Wallis • Jan 26 '21 • Edited

Hi Nicole! I just had a look at your repository and it looks like you're using the main branch whereas your .travis.yml is saying to only deploy the Next.js application on master branch. Could you try changing this line: github.com/Sun-Mountain/Sun-Mounta... to be main instead of master.

Then I think you'll need to change the GitHub pages source to be the gh-pages branch (which also hasn't been created yet due to the issue above).

Let me know if that helps and I'll update the tutorial.

Thanks!

Nicole Zonnenberg • Jan 26 '21

Hi James!

Thank you for your prompt reply! And thank you for pointing out the main, it's a new change so I'm still getting used to it. 🤦‍♀️

And it worked! Thank you so much! <3

James Wallis • Jan 26 '21

Good to hear, your website looks great!

Nicole Zonnenberg • Jan 26 '21

Thank you! And one more quick question. For updating the website, would you recommend branching off of master/main and then merging main into gh-pages? Or branching of gh-pages and merging into gh-pages and then main?

James Wallis • Jan 26 '21 • Edited

So you should branch off master/main and then merge back into master/main.
Once you've merged your changes, Travis will build and export your Next.js application and then push the new HTML (out directory) onto your gh-pages branch - it uses a force push to completely overwrite the branch.

You shouldn't ever need to touch the gh-pages branch.