GitHub Pages is a super convenient hosting service for static sites, e.g. a personal portfolio or blog or a project’s documentation and even modern web apps are in many cases not much more than a static HTML file and (a lot of) Javascript. But static sites come with the downside of… well… being static. That means you can’t have dynamic routes, like your-project.github.io/posts/<post-slug> where <post-slug> is a dynamic parameter. All possible routes need to be known in advance and point to a static file. Maybe those files are generated by some build process and whenever you add a new blog post, you just re-deploy the page. Using CI/CD pipelines like GitHub Actions/Workflows, that process might even boil down to pushing a new markdown file to your repository and that is sufficiently convenient for a lot of scenarios. But sometimes it’s not and you just need dynamic paths, especially when user generated content is involved or a project becomes more complex.

How do dynamic routes even work?

If you are well familiar with the concept and you just want to know how to trick GitHub Pages into supporting dynamic routes, you can skip this part and continue with The Solution.

A route/path is traditionally pointing to a (static) file on the server that is represented by a domain.

your-server.com/some/path/index.html

If you try to access a file that does not exist on that server, it will respond with an error, which usually means it will serve you a default 404.html that comes with the server. You’ve probably seen something like this:

#nuxt #github #github-pages #dynamic-routes #nextjs