How to build a personal website on Github

# # the premise

1. You already have your own domain name, which can be set up on Aliyun, which is very cheap. 2. No, it’s as simple as that


The overall train of thought

There are two steps we can take to build a personal website on Github,

  1. Github. IO (username is your Github username)
  2. Bind your domain name (such as zhangsan.com) to username. Github. IO

Complete these two steps and you can access your github website through Zhangsan.com


Start by building a website on Github

To use Github, you need to have a Github account first. By default, you now have a Github account and the username is username. To create a repository, set the repository name to username.github. IO.

This is the github page address that github assigns to each user. To use this address, create a repository named username. Github. When the warehouse is built, it should look like this.

Click on one of the README blue letters to go to the edit page, set the file name to index.html, and write whatever you want

Click Save, and when we go back to the warehouse we find that there’s an extra index.html file in there, and that’s your home page file. Github’s homepage is now set up, just type username. Github. IO into the address bar to access your homepage. Just save it as index.html).


Associate username. Github. IO with your domain name

You can also use username. Github. IO as your home page. Github. IO can be accessed directly from your own domain name. There are also two steps to associating your domain name with your github home page,

  1. On Github, bind the domain name to username. Github. IO

  2. On the domain end, point DNS to username.github. IO

    First, we operate github. Step 1: Enter the newly built warehouse and click Setting to enter the setting interface

    ** Step 2: ** Go to the Github Pages bar after entering the Settings screen

    ** Step 3: ** Set custom Domain to your own domain name such as zhangsan.com and click Save

    The Theme Chooser bar in the image above allows you to select a template for your site.

    When we finished, we went back to the warehouse and found an extra file called CNAME,

    The content of the file is the domain name zhangsan.com that we just bound. In fact, we can also create a new file named CNAME (note that there is no suffix) in the warehouse without going through the above three steps, and just write our domain name in it. The effect is the same.

    After the work of github is completed, only when accessing username. Github. IO, it will redirect to Zhangsan.com, but currently our zhangsan.com still has no content. Therefore, we need to resolve Zhangsan.com to user.github. IO through DNS at the domain name end, that is, we need to put zhangsan.com in the space on Github.

    Take Aliyun as an example: ** Step 1: ** Enter the domain name resolution setting interface

    Step 2: Add parsing

    Since we resolve the domain name to another domain name, we choose CNAME (alias resolution) in the record type field, and @ (empty, if there is an error message, delete the other resolution records with @ in this column) in the host record field because we use the secondary domain name Zhangsan.com. If we want to use the tertiary domain www.zhangsan.com, fill in WWW, and so on. In the record value field, fill in the domain name we want to resolve. In this case, write username. Github. Click Save and wait a few minutes for DNS to take effect.

    At this point, the bidirectional binding between our domain name and github home page is complete, just need to visit Zhangsan.com in the browser to see our personal home page placed on Github.

    In addition, zhangsan.com and www.zhangsan.com will be resolved to username. Github. IO. Due to github’s own redirection function, if username is bound to zhangsan.com, the resolution from www.zhangsan.com will also be redirected to Zhangsan.com.

    So when we type these two urls into the browser address bar, we’re going to enter zhangsan.com. Of course, we can also bind www.zhangsan.com in Github, so as Baidu regardless of input WWW will enter www.baidu.com, is not very cool!


There are several benefits to having a personal website on Github:

  1. Free of charge, ha ha ha, it is our poor welfare
  2. Because the server is abroad, need not put on record, lazy person must ah
  3. The code is easy to maintain, as anyone who has used Github knows

The disadvantage is that the space is small, can only support relatively simple services, but as a personal station is enough.