09 Apr 2023

Moving the Website From GitHub Pages to Cloudflare Pages

Mohamed Muhannad

It’s been quite a while since I’ve done anything on the website. I guess it’s about time to make that change then.

Previously, this domain was used as a resume website and I had my blog available on GitHub Pages (muhannad0.github.io). To start off, I’ve decided to use my primary domain (muhannad.io) as my $HOME on the Internet. Updating and managing both websites seemed a bit tedious, so I decided to streamline things and stick to using this to publish technical content.

Why switch hosting providers?

Like any old techie, I wanted to try out the Cloudflare Pages service. They had support for deploying Hugo based websites and seemed real easy. It took care of the build and deploy just by adding the GitHub repo to it. Not to mention that it’s free for personal projects too.

Honestly, GitHub Pages would have continued to work fine along with a custom domain setup. But I already had the domain setup on Cloudflare and needed to move it without losing SEO and page ranking I had on the old URL.

Maintaining SEO & Page Ranking while changing the website’s primary domain

A lot of articles are out there explaining why this is important and how to do it. But the basic gist of it is that you need to have HTTP 301 redirects setup from the old domain to the new one in order for Google to not drop your ranking.

In the case of GitHub pages, this would require us to make GitHub Pages to respond with HTTP 301 redirects. We can leverage custom domains feature to handle that.

Migration Steps

This guide is specific to setting things up using Cloudflare DNS provider, but the same steps can be followed for your specific project other DNS providers as well.

Deploy website to Cloudflare Pages

I won’t be explaining how to deploy websites on Cloudflare Pages as their guide pretty much covers all the steps.

Deploy a Hugo Site

At this stage, do not set a custom domain for the project just yet.

Enable custom domains on GitHub Pages

In the repository settings, where GitHub Pages is configured. We go to Settings -> Pages -> Custom domain.

Here, I add the new domain muhannad.io, which is what I want to use. It will go into a DNS checking status before activating the website on the new domain.

According to the documentation, you have to create 2 records for this to be completed.

NOTE: Turn off Cloudflare proxying for these records.

Create a CNAME record, for root domain (@) pointing to muhannad0.github.io.
Create a CNAME record, for www pointing to muhannad0.github.io.

Give it a couple of minutes and you should see the check succeed.

At this stage the website is now available on both muhannad.io and muhannad0.github.io would redirect to the new custom domain.

You can also confirm that the HTTP 301 redirects are also in place for the old domain using curl.

$ curl -I https://muhannad0.github.io/
HTTP/2 301
server: GitHub.com
content-type: text/html
permissions-policy: interest-cohort=()
location: https://muhannad.io/
x-github-request-id: B946:31E7:220944:29C850:64327919
accept-ranges: bytes
...

Update the domain records to use Cloudflare Pages

By default, Cloudflare deploys it’s projects on <project-name>.pages.dev domain. We have to configure Custom domains project to use the website deployed on Pages.

Their documentation explains how we can set it up.

Cloudflare Pages: Custom domain

As we already have a CNAME record pointing to the GitHub Pages domain, it will prompt to replace it which you can confirm and proceed ahead.

Give a few minutes and now the website will be served from Cloudflare Pages. 🎉

NOTE: You could also clean up the www records, so that there’s nothing more pointing to the old GitHub Pages version.

Helpful Links

Final Thoughts

It was really easy getting the Hugo website up and running on Cloudflare Pages. A little bit of DNS trickery was required to get GitHub Pages to handle the 301 redirect. This helped us maintain the Google page ranking.

I’m not sure how long you need to keep the redirect up, but most articles online seem to mention that it takes a month or two for Google to completely update the search results. Afterwards, you could remove your GitHub pages project.

I hope this short guide has been helpful. If you’ve got any feedback, feel free to send a message on Twitter.