Building Personal Website with Jekyll (3)

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.

hongjunwu.com and 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 index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Your Description">
<meta name="keywords" content="Keyword1, Keyword2, Keyword3, Keyword4">
<title>Homepage of You</title>
</head>
<body>
  <script type="text/javascript"> 
    var language = navigator.browserLanguage?navigator.browserLanguage:navigator.language;
  if (language.indexOf('en') > -1) document.location.href = 'english.yourdomain.com'; 
  else if (language.indexOf('zh') > -1) document.location.href = 'chinese.yourdomain.com'; 
  else 
    document.location.href = 'other_languages.yourdomain.com'; 
  </script>
<p>Redirecting!</p>
<a href="your_sub_domain_for_redirect.yourdomain.com">If your browser does not refresh, you can click this link.</a>
</body>
</html>

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

language.indexOf('zh') > -1)

to the language code you want. Also, change the URL you want to direct to in

document.location.href = 'your_sub_domain_in_language.yourdomain.com'

to wherever you wish. Super convenient!

How to publish website hosted with Github Pages to your custom domain

I will use yourdomain.com and 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:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	your_github_user_name.github.io
CNAME	your_subdomain	your_github_user_name.github.io

Some explanations:

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

The 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 yourdomain.com and your_sub_domain.yourdomain.com.

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 yourdomain.com repository.

Put the index.html that contains