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:
username.github.iowhere you replace
usernamewith your GitHub name). I renamed it to
username.github.io2to make space for the new one :)
publicto make it easier accessible) called
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 :)
touch _config.yml touch index.html touch .htaccess
.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.
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.
git add _config.yml git add index.html git add .htaccess
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!