Hi everyone.
Recently I found out that GitHub Pages URLs are case-sensitive. That means if you tell someone to go to yourwebsite.net/mypage, and they instead visit yourwebsite.com/MyPage, it won't work. Note that domains and subdomains are not affected. For example, YourWebsite.net would work just fine.
Thanks to ChatGPT, I now have a solution. Here are the steps to resolve this. For this to work, all your pages/folders must all be lower-case.
In the root of your GitHub Pages project, create a file called "404.html." If you've done this already, skip to step 2.
The 404 file is shown as a webpage when a 404 error occurs, i.e. a page can't be found.
A typical 404 page might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404 - Page Not Found</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #e74c3c;
font-size: 72px;
}
p {
font-size: 18px;
color: #333;
}
a {
text-decoration: none;
color: #3498db;
font-weight: bold;
margin-top: 20px;
display: inline-block;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<p>Oops! The page you're looking for doesn't exist.</p>
<a href="/">Go back home</a>
</div>
</body>
</html>
Add this to the bottom of the 404 page, just before the </html> tag.
<script>
const path = window.location.pathname.toLowerCase();
if (window.location.pathname !== path) {
window.location.replace(path); // Redirects to lowercase version
}
</script>
So what does this script actually do? First of all, it gets the current path (such as /MyPage), and converts it to lowercase. Next, it checks to see if the path is already lowercase. If it isn't, it replaces it with the converted path, therefore redirecting the user to the lower-case version.
Great question. Because when a user enters a wrong-case version, it'll "barf all over itself", as Allison Sheridan would say, and redirect you to the 404 page. But where the magic really happens is, it doesn't actually change the URL. So that way, we can still query the path to see if it's mixed-case.
Rest assured, I'm working on a way for people to comment on this post. :)