Links on Custom 404 Page Broken When Accessed From Subdirectory [SOLVED]

(See the update at the bottom of the post for the solution I came up with.)

Hello!

I have just created a website hosted on GitHub Pages. I created a 404.html file with the appropriate YAML front-matter at the top of the page (see below). The 404.html file is located in the root directory of my website. If I type in a wrong URL, such as mysite.com/foo.html, the 404 page comes up perfectly and all links work. However, if I type in a wrong URL with a subdirectory, such as mysite.com/sub/foo.html, the 404 page doesn’t have the CSS formatting and the links on the 404 page are not working. For instance, if I click on a link to the home page of the site, the link looks like this: mysite.com/sub/index.html. So, when I get a 404 page from a link containing a subdirectory, all links in the 404 page are relative to that directory. Surely I’m overlooking something very simple here.

Here is the YAML front-matter I have in the 404.html file. It is at the very top of the file, as stated in the instructions.

YAML Front-Matter:

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

If you need to see the website in question, the link is www.revisedcommonversion.com and if you want to look at the full HTML of the 404.html page, you can view it here: https://github.com/revisedcommonversion/revisedcommonversion.github.io/blob/master/404.html.

I recently moved my website from Google Sites to GitHub Pages and the directory structure changed. A link to a page on the old site looks like this: http://www.revisedcommonversion.com/daily-reading/harmony-of-the-gospels. The link to the same page on the new site looks like this: https://www.revisedcommonversion.com/pages/reading/harmony-of-the-gospels.html. So, you can see why this issue is problematic. If you click on the old site link above, you can see an example of an incorrect 404 page. Clicking any of the links on that page will not take you to the correct page.

If I may get any assistance on this issue, I would greatly appreciate it.

UPDATE August 21, 2018 17:00SCT:

I have changed all of the links on my 404.html page to absolute links and that has provided a workaround. All links work, and the CSS shows up properly. Is this the best practice for this issue? It seems to work now. If not, please comment and let me know the best practice. Otherwise, I’ll just mark this as solved in a few days.

1 Like