Six months ago, I decided to self-publish some of my articles. These articles were hosted on Github Pages, using a Jekyll template. Before that, I published my articles on websites like Medium and dev.to.
Here is how you can manage to redirect the old URLs of your Github Pages website to a new one.
Github Pages is a go-to site hosting of developers. With its free and reasonable bandwidth limit, you can't really ask for more. I have been using Github Pages to host my portfolio website for almost two years.
Last week, I decided to self-host Ghost. It is a free and open-source blogging platform. I went all-in—blog, portfolio, books–on a single domain, joshuamdeguzman.com. If I can, I use social media handles that match my domain. Man, it's hard to find a combination if your name is too common.
I am not an SEO expert, but I do have an understanding of how it works. I discovered some issues that I have to address. One of which is the redirection of the old URLs of my website.
GitHub Pages doesn’t support
.htaccess, no. Pages does support visiting pages without the
.htmlextension and it will load correctly, but it won’t automatically redirect from the
.htmlversion to the URL without it.
Having edit access to the
.htaccess file to a website is one way to redirect an old page to a new one.
- 301 Move Permanently - SEO friendly, pass fully equity (ranking power) to the new website
- 302/307 Found or Move Temporarily - SEO friendly, temporary
Example: Entire Website
Redirect 301 http://www.example.com
Example: Single Page
Redirect 301 /old-page/ http://www.example.com/new-page/
Github Pages doesn't allow you to do these.
301 Redirect executes on a server level while Meta refresh is a type of redirect that is executes on a page level. This is why Meta Refresh requires an extra step to load the page. It loads the origin page first, then loads the redirect page.
Between the two, 301 Redirect is the clear winner. It's both SEO and user friendly.
Unfortunately, to handle redirects on Github Pages, you can only do Meta Refresh—at the time of writing.
Meta Refresh Snippet
Meta Refresh is easy to implement. This line of code instructs your old web page to refresh and redirect to your new web page.
<http-equiv="refresh" content="0; url=https://example.com/new-page">
Some things to look at
contentis the number of seconds before the page refreshes
urlis the redirect URL, eg. your new website
If you are using Jekyll, you can also use jekyll-redirect-from plugin.
Install the plugin:
plugins: - jekyll-redirect-from
For example, in your
title: Old post redirect_to: http://example.com/new-page
And when first you access the website, it would look like this
This is not the best user experience, but definitely not the worst.
Having a not-so-bad UX with a complete user journey is better than a broken flow.
There is a saying—and a warning, everything on the internet is permanent.
I agree at some point. But also, I'd like to think that everything on the internet is not easily accessible.
As bloggers, developers, or business owners, you should consider the footprint of your content. And make sure that the next set of readers or customers of your website will be able to access what they need.