How to Build a Website

During a recent website development project, I gained a deeper understanding of various processes. I'd like to take this opportunity to document my experience and share it with you. While the steps I'll introduce have a certain order, they're by no means the only approach. Everyone has different preferences, so consider this article as a reference.

Table of Contents

Purchasing a Domain

The first step in setting up a website is usually purchasing a domain. Although some platforms (like GitHub) provide free subdomains (e.g., username.github.io), if you want a domain that better reflects your personal style, it's recommended to purchase your own top-level domain (e.g., example.com).

Let me briefly introduce how domain management works. The internet's domain name system is overseen by ICANN - Internet Corporation for Assigned Names and Numbers. The actual registration is handled by Domain Name Registrars. Since pricing strategies vary between registrars and discounts are often available, it's a good idea to compare different options, taking into account the reputation, service quality, and pricing before making a purchase. Additionally, domains can usually be transferred to other registrars (though there may be fees involved), allowing you to switch if you're unsatisfied with your current registrar. For those interested in how domains work behind the scenes, there's plenty of related literature to explore.

Hosting with GitHub Pages

GitHub Pages is currently an ideal choice for hosting static websites. The service is not only free but also backed by GitHub's reputation, making it a reliable long-term solution. Setting up GitHub Pages is straightforward, and the official website provides detailed instructions. Here's a brief overview.

First, you'll need a GitHub account. Each GitHub account can host one site with the format username.github.io. Let's create a new repository named username.github.io.

Next, in your terminal, run:

$ git clone https://github.com/username/username.github.io

If you need to configure git, you can do so with the following commands: 

$ git config user.name "username"
$ git config user.email "example@example.com"

This setup ensures that the git configuration in this directory is independent of your global settings. You can check your configuration with: 

$ git config --list

The configured details will appear in the git log. This is a bit of background knowledge for those new to git, and I'll incorporate more tips like this throughout the article. However, for a deeper understanding, I recommend studying git thoroughly.

Now, let's get back to the main topic. Enter the directory you just cloned and copy your static website files into it: 

$ cd username.github.io

Then push the local files to the repository:

$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master

Now, if you enter username.github.io in your browser, your website should be live.

Updating Website Content

Whenever you make changes to your content, you can update your site with the following commands: 

$ git add -A
$ git commit -m "commit message"
$ git push

Adding a CNAME

Once your site is accessible via username.github.io, you can set up a custom domain. To use a custom domain, you'll need to add a CNAME file to your repository, containing your domain name (e.g., example.com): 

$ echo "example.com" > CNAME

Adding a 404 Page

Adding a custom 404 page is simple. Just create a file named 404.html.

Using Cloudflare for Website Protection

To enhance the security and performance of my website, I chose the well-known service Cloudflare. It offers a range of network security and performance optimization features, including DDoS protection, HTTPS support, and DNS management.

Using Cloudflare's DNS

First, sign up for a Cloudflare account. Follow the prompts to add your domain; the process is quite simple, mostly just clicking "Next." After adding your domain, you'll need to change your domain registrar's DNS settings to use the nameservers provided by Cloudflare to activate their service. This step requires accessing the management panel of your domain registrar. The changes may take some time to propagate (usually within 24 hours).

Once set, you can click "Recheck Nameservers" in the Cloudflare dashboard to confirm everything is configured correctly.

After Cloudflare takes over, you'll need to update the DNS settings, specifically the A record for your root domain, to point to the IP addresses provided by GitHub. These IP addresses can be found in GitHub's documentation, ensuring that you use the latest IPs. As of writing this article, GitHub's IPs are: 

192.30.252.153
192.30.252.154

Additionally, you can configure subdomain CNAME records by following GitHub's instructions.

Setting Up HTTPS

To ensure a secure browsing experience, we'll force HTTPS on the website. Go to the "Crypto" section in Cloudflare and enable HSTS. I recommend configuring it as follows: 

Status: On
Max-Age: 1 month
Include subdomains: Off
Preload: On
No-sniff: On

You can also enable the "Automatic HTTPS Rewrites" option, which automatically rewrites HTTP requests to HTTPS.

Conclusion

The trend of maintaining personal websites has gradually faded, replaced by various social media platforms. Initially, I felt some regret, but I've come to realize this shift isn't necessarily a bad thing—there's a unique charm in being niche. Personal websites will continue to exist as small windows for individuals to communicate with the world, offering a pure space for free expression. While we can't change the overall trend, we can share this unadulterated beauty with others. I hope this article provides some inspiration and I welcome any corrections. If anyone successfully sets up a website after reading this, please feel free to share your experience with me. Wishing you all the best!