GitHub Pages Custom 404 Page with Redirect Link


Custom 404 page for GitHub Pages. In the 404 page, a redirect link is created based on the current URL path.

Demo

Source Code:

404.html | repository | view raw
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
  <title>404 Not Found</title>
  <style>
    .container {
      text-align: center;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>404 Not Found</h1>
  <div><a id="link" href="/">Try this link</a></div>
  <div>or</div>
  <div><a href="/">Back to Home</a></div>
</div>

<script>
  var prefix = "https://github.com/siongui/userpages/blob/master/content";
  var redirect_url = prefix + window.location.pathname;
  var linkElm = document.getElementById("link");
  linkElm.href = redirect_url;
</script>
</body>
</html>

References:

[1]Creating a custom 404 page for your GitHub Pages site
[2]github pages https custom domain - Google search
[3]

javascript url path - Google search

Get URL and URL Parts in JavaScript | CSS-Tricks