Building Personal Website with Jekyll (3)

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 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, that user is redirected to another website, called, where I host all the contents you see on this website. If you ever used TinyURL or, 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 over the past couple years when I was studying at UW, as well as when I was setting up this site. and, along with, are three separate repositories on Github. 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>
<meta charset="utf-8">
<meta name="description" content="Your Description">
<meta name="keywords" content="Keyword1, Keyword2, Keyword3, Keyword4">
<title>Homepage of You</title>
  <script type="text/javascript"> 
    var language = navigator.browserLanguage?navigator.browserLanguage:navigator.language;
  if (language.indexOf('en') > -1) document.location.href = ''; 
  else if (language.indexOf('zh') > -1) document.location.href = ''; 
    document.location.href = ''; 
<a href="">If your browser does not refresh, you can click this link.</a>

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 = ''

to wherever you wish. Super convenient!

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

I will use and 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 @
A @
A @
A @
CNAME your_subdomain

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 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 and

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

Put the index.html that contains

<p>Hello World</p>

into the

Now, try visiting and you will be directed to

View Next post

Building Personal Website with Jekyll (3)
Older post

Building Personal Website with Jekyll (2)

Newer post

Building Personal Website with Jekyll (4)

Building Personal Website with Jekyll (3)