How to redirect across repository websites with Github Pages
In this post, I’ll walk you through how to set up redirects across GitHub Pages websites with a straightforward approach. While GitHub Pages doesn’t have built-in server-side redirect functionality, there are a few effective workarounds we can leverage to achieve this.
Why Redirecting Across Repositories?
I have a main portfolio website with links to landing pages for my apps. The landing pages are located in the same repo as the application code. The repository names for these apps use CamelCase formatting (e.g., MyCoolApp), but users often type or search for the lowercase version (mycoolapp). To avoid broken links and ensure smooth navigation, I wanted to set up redirects from the lowercase URLs to the correct CamelCase repository pages.
Available Redirect Methods for GitHub Pages
GitHub Pages doesn’t offer server-side redirects like a traditional web server, but we can achieve the same effect with client-side techniques. Here are the most effective options:
- HTML Meta Refresh: Use HTML Meta Refresh for one-time, straightforward redirects.
- JavaScript Redirect: A JavaScript Redirect would work, though I didn’t try this option myself (Copilot did show me how I would have to do that, though).
- Jekyll
jekyll-redirect-fromPlugin (Link): The plugin-approach can be effective, but I couldn’t get it to work in my setup, so I opted for a the meta refresh approach.
HTML Meta Refresh Redirect Setup
A quick and easy way to redirect is by using an HTML meta tag. To use this, create an redirected.html file in the layouts folder of our repository and add the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="{{ page.redirect_to }}"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />
</head>
<body>
<h1>Redirecting...</h1>
<a href="{{ page.redirect_to }}">Click here if you are not redirected.<a>
<script>location='{{ page.redirect_to }}'</script>
</body>
</html>
The meta tag tells the browser to refresh the page and navigate to the new URL after 0 seconds.
Note: The location script forces the browser to redirect to the new page (if JavaScript is enabled).
Implementing the Redirects
To implement the redirects, all I needed to was to create pages with the desired name, for example mycoolapp.md in the root folder of the website. After that, I just needed to add this simple front matter as their content:
1
2
3
4
5
---
layout: redirected
permalink: /mycoolapp/
redirect_to: /MyCoolApp/
---
You can try the result of the redirect by clicking the following link: https://msiccdev.net/twistreader/ - it will redirect you to the correct, CamelCase formatted url.
Conclusion
Redirecting across repositories on GitHub Pages might not be as seamless as on a traditional server, but with the technique above, we can ensure our visitors and search engines find our content without disruption.
By actively handling our redirects, we’ll maintain a professional web presence and keep our visitors engaged.
Until the next post, happy coding, everyone!
Got questions or tips about GitHub Pages redirects? Share your thoughts in the comments or on social media!
The code presented in this post was written with the assistance of GitHub Copilot. Additionally, the content of this blog post was generated based on my prompts using OpenAI’s ChatGPT. While I have reviewed and refined the code and content, the use of AI tools may have influenced the final output. The title image of this post is also created with AI (DALL-E 3 through ChatGPT). This blog post is part of my private experiment of using AI tools in different areas.