Migrate Github Pages and Jekyll URL Redirects

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

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.

Challenges

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.

Backlinks

The articles I have written have been referenced on a couple of articles—like in this and this. Asking authors to change the backlinks to my website is simply time-consuming.

Limitations

From this:

GitHub Pages doesn’t support .htaccess, no. Pages does support visiting pages without the .html extension and it will load correctly, but it won’t automatically redirect from the .html version 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.

For reference

• 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.

Meta Refresh

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

• content is the number of seconds before the page refreshes
• url is the redirect URL, eg. your new website

Jekyll Plugin

If you are using Jekyll, you can also use jekyll-redirect-from plugin.

Install the plugin:

plugins:
  - jekyll-redirect-from

Update header
For example, in your post file

title: Old post
redirect_to: http://example.com/new-page

And when first you access the website, it would look like this

Try me.

User Journey

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.