Lessons from Github Pages

Exporting from NextJS to generate HTML

In my first blog entry, we talked about my journey into the blog world using Strapi and NextJS. Today, I'll be talking about how I actually did it: using Strapi as my CMS from a content management standpoint, and using NextJS as my front-end rendering.

First of all, I learnt that Github pages does not like the existence of an _next folder. When NextJS exports, a folder that is _next is created which houses your data and assets. As of right now, I am manually making those changes but future plans will include the usage of Gulp.

Secondly, I'm looking into how to change references to my images. NextJS seems to preserve my localhost references with images. Playing around with environmental variables has not allowed me to fix these issues. For now, this is being updated manually with a plan to use Gulp as a solution for now.

Finally, I was getting a 404 for certain pages. The root cause seems to be a build failure. Someone on stack overflow suggested the usage of making an empty commit. For those who are not familiar, this is what I used in the end:

git commit --allow-empty -m "Trigger rebuild"

Overall, Github pages was a positive experience and perhaps there are different ways to tackle the issues I encountered, but I hope these notes can help you succeed and spend less time on getting your page up and running on Github Pages!

If you want to see my repo, you can find the link here!

Updated on: 10/31/2021