DEV Community

Cover image for Deploying a Next.js app to GitHub Pages

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 ...
Collapse
 
ottobonn profile image
Travis Geis • 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!

Collapse
 
jameswallis profile image
James Wallis

Good to know! Thanks Travis.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

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?

Collapse
 
jameswallis profile image
James Wallis • 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!

Collapse
 
nikacodes profile image
Nicole Zonnenberg

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

Thread Thread
 
jameswallis profile image
James Wallis

Good to hear, your website looks great!

Thread Thread
 
nikacodes profile image
Nicole Zonnenberg

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?

Thread Thread
 
jameswallis profile image
James Wallis • 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.

Collapse
 
jasonzhouu profile image
周宇盛 Yusheng Zhou

The image in the right side doesn't show appropriately.
james-wallis.github.io/wallisconsu...

Collapse
 
jameswallis profile image
James Wallis

Thanks for pointing it out! I'll take a look soon - it is likely something to do with my Netlify CMS configuration.

Collapse
 
muhammedmoussa profile image
Moussa

thank you man, I followed your post, and it all good!

Collapse
 
jameswallis profile image
James Wallis

Cheers Moussa! Thanks for the feedback