Creating and hosting my own small website is on my to-do list for a long time. Surely, there are countless tutorials
about building-up your own website from scratch, some of them can be a bit of time-consuming, some of them are just purely over-simplified, or some of them just
do not work... I knew using Github Pages to host personal website and I did found it was extremely efficient, simple, and straightforward.
I will say if you are NOT a serious website designer/architect, and if are someone like me who just would like to have a personal website
for fun without investing too much time and money on it, this guide might be helpful to you. There are also many other Github Pages
tutorials available on Google, I write this guide is also for my own track, so I will appriciate if you have any suggestions
and feedbacks, and please you are welcome to contact me (see About in the navigation bar for the methods to be in touch with me).
As this guide is based on Github Pages, you should first have a Github account. Skip this step if you have one.
If you have your Github account, you can then refer to the offical guide of the Github Pages on how to
construct your first Hello World website (click here for the brief tutorial).
It is possible (you might spend money for your site on elsewhere which I am not sure...) for you to have a totally free personal website
if you do NOT want to have a custom domain; your default site domian should be username.github.io. If you do
not like it and would like to have your own custom domain, it means you need to buy your own custom domain. You can skip the next step if you do NOT want to do so.
Skip this step if you do NOT want to buy your own custom domain. There are many places to buy domains,
the one I bought was from GoDaddy. Again, you need to have an account before any shopping... Once you do
so, you can search your desired domain name to see if it is still available. I will generally suggest to use your name as your domain name for your own site, just easier
for people to memorize. The following picture is just an example of using helloworld1234 for the domain name registration search. Usually
uncommon custom domains are very cheap, in this case 7 RMB is about 1.1 USD for one year registration cost. So, why not?
Fig. 1 GoDaddy Custom Domain Registration
Once you have your custom domain registered, you need to do some configurations in order to activate it. These settings will be done in two places to make your
custom domain function on your website, starting with the configrautions on GoDaddy: go to your personal account and find out "DNS Management" of the custom domian
you just purchased, then you need to add three "Records", which are highlighted in red color (the rest records are generated by the system and should not be touched).
The first two IP addresses, namely 192.30.252.153 and 192.30.252.154, are Github Pages addresses, your site IP
address should be one of them, which can be check by using dig command in your Linux OS. You can just simply
add both of these to the records (record type is A) to avoid confusions. Then you also need to add type CNAME
record whose value is the default domain name of your Github Pages, namely username.github.io. By doing so it tells to point this custom
domain to your Github Pages website. These settings are summarized in Fig. 2.
Fig. 2 GoDaddy DNS Management
Next, you should do the same CNAME record settings on your Github Pages repository. Go to its setting and find out the place to
input your custom domain to employ the one you just purchased (see Fig. 3). Done! Now after a while (the changes are not shown immediately) your Github Pages
should be published on your own custom domain.
Fig. 3 Github Pages CNAME Settings
If you are curious about the source code of this site, you are welcome to check it on my Github, the link is on the footer. For the further consitructions and improvements
of your own site, if you are someone who is very new or intermediate on website development, you can
check W3Schools for helps, which provides excellent resources, examples, tutorials, and templates on
html, CSS, Javascript, and many other website-related stuff. I personally
recommend W3.CSS, which is a moderm CSS library that makes website development more efficient.
Hope you enjoy creating your own site!