Deploying SSG to Gitlab Pages

[soykje]

Hello everyone 👋

No troll here... But I like Gitlab, and Gitlab Pages 🙂 So naturally my personal website was hosted with this solution, and I had no reason to change, even when I decided to rewrite the code using Next.js 🎉

Besides the assetPrefix configuration (such as assetPrefix: isProd ? '/' : '' for user page), I was having an issue with some 503... which I was able to solve using the trailingSlash option. As I may not be the only one using Gitlab Pages with Next.js SSG, it may be helpful to explain the reasons of this trailingSlash fix...

After inspecting my output directory, with and without the trailingSlash option, I realized that something could be in cause... Without the option, I get a folder structure as follows:

blog/
|- post1.html
|- post2.html
|- ...
blog.html

With trailingSlash enabled, I get:

blog/
|- post1/
|  |- index.html
|- post2/
|  |- index.html
|- ...
|- index.html

Gitlab Pages resolves urls in a certain way, and this is why my first option didn't work in this case... I finally got it!

tldr; If you're deploying your project on Gitlab Pages, you may have to enable trailingSlash, to remove ambiguous urls.

The last problem I'm actually facing, is with custom 404 page: with trailing slashes it is exported as 404/index.html, which doesn't matches Gitlab Pages requirements... For now I only found a workaround solution, by moving and renaming my output file as 404.html 😞

Don't know if there could be a better way to do so... Nevertheless it still doesn't work, as Gitlab Pages redirects to authentification page when I try to call my 404 🤯

[bennettwebdesign]

Hey @soykje could you share your .gitlab-ci.yml file? I am trying to get a site deployed on pages and can't seem to figure it out. Thanks!

[soykje]

Hey @bennettwebdesign! I wrote an article about that, so feel free to read it: https://soykje.medium.com/jamstack-gitlab-pages-b9c695e1274?sk=462c094f0cb9a4e2ccb00f14f0bb92c9. Please don't hesitate to tell me if you need more explanations and/or help 👍