In this post, I will talk about setting up an advanced site structure using Github Pages with your custom domain.
What if I want to host my website in my own domain?
Assuming you already purchased your domain, like
hongjunwu.com I use for mine, I will briefly talk about how to set that up.
Also, here is a helpful guide for your reference: Managing a custom domain for your GitHub Pages site
How I setup my website structure
I prefer setting up a subdomain to host my site, and use the main domain to redirect viewers to my subdomains. To put that into human language, here’s how my website works:
How to setup a redirect page
When someone visits
hongjunwu.com, that user is redirected to another website, called
i.hongjunwu.com, where I host all the contents you see on this website.
If you ever used TinyURL or aka.ms, it’s the same idea. Therefore, you have the freedom to direct the user to any sub-domains.
For example, I used to direct users to
uw.hongjunwu.com over the past couple years when I was studying at UW, as well as when I was setting up this site.
i.hongjunwu.com, along with
uw.hongjunwu.com, are three separate repositories on Github.
hongjunwu.com only hosts one single
index.html, and all it does is redirect users to the page I want.
Here’s what’s contained in this short
Note that there are easier way to do this, but there’s an extra benefit to future-proof in case you want to create separate sites in different languages in the future.
As a multi-language speaker, I can imagine me going back to China in the future, and obviously, it is better if people who know Chinese can view a version of the website in Chinese.
By utilizing this script, the redirect page can detect the language of the browser that the viewer is using, and serve different websites based on that.
Essentially, go and check the language code of your desired lange (Simplified Chinese is
zh), and change the code in
to the language code you want. Also, change the URL you want to direct to in
to wherever you wish. Super convenient!
How to publish website hosted with Github Pages to your custom domain
I will use
your_subdomain.yourdomain.com as example.
I purchased my domain from GoDaddy, but for other providers, the procedure is the same.
You will need to navigate to the
DNS Manager (Or equivalent page from your provider that allows you to manage DNS) part of your domain, and add the following to the records:
A name and the IP address points your domain to the four Github Pages server, so when someone visits your domain, your domain knows where to direct them to.
CNAME points to your default
github.io page, which is a way for Github Pages to work properly as a fallback.
Once the above is completed, go back to Github, and create two new repositories with the name
In the respective repositories, go to Settings - Pages - Custom Comain- Type in the respective domains - Save.
Wait for some time, then you will get the repositories setup and running.
Then, make an
index.html by modifying the above redirect code, and place that file in the
index.html that contains
Now, try visiting
yourdomain.com and you will be directed to