Finally, I created my own personal website and blog from scratch! I found it worthwhile to commit myself to recurring (technical) blog writing and embrace the habit of being persistent during the trajectory. Besides, contents of many posts serve as long-term memory for future references.

A great book on technical writing: The Elements of Style (classic version, 4th Edition)

Trade-offs and decisions during the website creation can be highly personalized. For me, the construction boils down to several aspects.

  • Server host: GitHub Pages could be a good option for static websites which does most back-end configurations for you under the hood. However, one is not able to set up its own backend databases.
  • Domain name: One could register a custom domain name via DNS providers such as GoDaddy. CNAME at the git repo must store the custom domain name. A and CNAME record at the DNS provider should point to one of the GitHub’s server IPs and corresponding domain name respectively. dig command could be leveraged to confirm that the linking is taking effect (after variant DNS caching delay) as shown below. Note could also work but will not enable HTTPS for the custom domain.
$ dig +noall +answer 3553	IN	A 3553	IN	A 3553	IN	A 3553	IN	A
$ dig +noall +answer	567	IN	A
  • SNAPSHOT version: As a beginner, mature front-end frameworks such as Bootstrap are helpful to set up a scratch theme. I personally prefer using a modular & simplistic (no meaningless icons, blocks, scrolls) jekyll theme since it will allow me to write in markdown (also compatible with html) and customize the website efficiently. Besides, I found the jekyll’s support for Liquid templating language to be extremely handy and save repetitive labour work (to debug locally, one needs to install ruby and modules via its packet manager RubyGems, one could also leverage rbenv to create the project-specific ruby environment. Make sure that export PATH="$HOME/.rbenv/bin:$PATH" is included in the .bash_profile).
  • Front-end customization: I found it useful to reverse engineer the favorable web components during web surfing via inspecting the source code fetched by the browser client.

Tips The book Design for Hackers: Reverse Engineering Beauty is informative for ameteur web designers on topics of typography, geometric proportions, hierarchy of information, color theory, and most importantly, the mindset of reverse engineering the artifacts you see every day.

  • Optimization: Due to geographical reasons, access from China might suffer from severe delay. Registration at a local CDN provider could mitigate the issue. One could also perform SEO to the website, e.g., simply via Jekyll SEO tag plugin.
  • Security: One could easily enable HTTPS with Settings at GitHub repo and make sure the DNS record points to one of the HTTPS-active GitHub server IPs. One could also authenticate the website ownership via the asymmetric key mechanism provided by Keybase.