CODEWITHSUNDEEP
next.jsgithub-pagesgithub-actions
unspeakable29
unspeakable29

Reputation: 775

How to have custom 404 page for Next.js + GitHub Pages if config is `trailingSlash: true`

I have a static website built with Next.js and currently deployed in GitHub Pages. I already have a custom 404 page created in Next.js with a config trailingSlash: true which puts it under this directory /404/index.html. In GitHub Pages' documentation here and saw that I can use 404.md which can read permalink, I assume this means the path to my custom 404 page. So I created one in the root folder of my deployment branch.

---
permalink: /404/index.html
---

But it didn't seem to work. I was wondering if there's something I've assumed or done wrong. Do also note that my GitHub Pages is already under a custom domain. Please suggest if there's another way but still keep the trailingSlash: true config because I don't want to show .html on the route of my other static pages. Thank you in advanced.

Upvotes: 0

Views: 439

Answers (1)

unspeakable29
unspeakable29

Reputation: 775

In the end, instead of using 404.md, I just added a step in my ci/cd GitHub Actions workflow to move the generated 404 page and rename it to 404.html which GitHub Pages will understand as my custom 404 page.

jobs:
  build:
    ...
    steps:
    ...
      - name: Generate static files
        run: yarn export

      - name: Move 404 page to root directory
        run: mv ./out/404/index.html ./out/404.html

Upvotes: 1

Related Questions