How to implement a redirect from your old GitHub page to your new website
Before hosting my website with netlify (which makes hosting so smooth!), I deployed my website manually using GitHub pages for quite some time. GitHub Pages is a great way to host a (more or less) static website. But if you are like me and want to update your website every now and then, it can become challenging, and that’s why I’m more than happy that I switched. However, to ensure that people who only have my old website (probably because I forgot to change it somewhere) are directed automatically to my new up-to-date website, I wanted to implement a redirect. To do this, I followed this great step-by-step guide and added a bit of of a tweak to adjust it to my taste. If you are looking for an (only slightly) different solution, I recommend reading the original post – it took me quite some time to find a way to implement the redirect, and I’m more than grateful for Steve’s fantastic and straightforward blog post on it!
And here’s how I did it in 10 simple steps:
- In case you are like me and have not deleted your old GitHub repository with your website, rename your old GitHub repository where you hosted your website (it should be something such as
username.github.iowhere you replace
usernamewith your GitHub name). I renamed it to
username.github.io2to make space for the new one :)
- Open a new GitHub repository (make it
publicto make it easier accessible) called
- Open the terminal and clone your GitHub repository
git clone https://github.com/username/username.github.io.git
The terminal will most likely warn you that “[y]ou appear to have cloned an empty repository.” That’s correct – because there’s nothing in your repository yet :)
- We’ll change that now. Navigate to your repository first:
- Create three empty files:
touch _config.yml touch index.html touch .htaccess
- This is our first deviation from Steve’s guide. The
.htaccessfile allows us to directly go for the
index.htmlfile when calling our GitHub page. To do this, open the
.htaccessfile and add the following line:
.htaccess is likely to be hidden. To show the
.htaccess file in your Finder press
. (dot) on a Mac.
- Now open the
index.htmlfile. I used Sublime Text to open it but other editors should also work perfectly well. Add the following and replace
yournewpage.comwith your redirect:
<!DOCTYPE html> <meta charset="utf-8"> <title>Redirecting to https://yournewpage.com/</title> <meta http-equiv="refresh" content="0; URL=https://yournewpage.com/"> <link rel="canonical" href="https://yournewpage.com/">
These steps follow very much what Steve describes in his step-by-step guide.
_config.yml. Here we define the outer appearance of our page even though we don’t need it.
- Now, we deviate again from the original post. To be able to commit and push your changes, you first have to add them.
git add _config.yml git add index.html git add .htaccess
- Now we can commit and push them:
git commit -a -m "Updating and uploading files." git push origin master
Well, and that’s it. It might take a few minutes, but your redirect is now up-and-running!