Essential Checklist for Building Your Personal Blog

Abstract

#

Setting up a personal blog is an exciting yet tedious task. Facing numerous frameworks to choose from, it’s easy to feel lost while searching for the most suitable tech stack for yourself. This article provides a straightforward and quick selection of technologies that can help you build your personal blog in minutes.

The architecture includes:

• Domain: Namecheap.
• Server: Digital Ocean.
• Forwarder: Nginx.
• Static Site Generater: Hugo.
• Theme: Blowfish modified by h4ck4t.

Let’s embark on this journey!

Registering A Domain Name and Renting A Server

#

Setting up a personal blog involves registering a domain name and renting server space (although services like github.io can also be used, this article does not adopt them).

• Registering a Domain Name: When you register a domain name, you gain ownership for a designated period. You will also obtain access to a management system to control your domain settings.
• Renting a Server: Renting server space provides you with a server’s public IP address and root access privileges. This option requires less upfront investment and includes maintenance and scalability options, making it ideal for personal and small business blogs.

You will need to add the appropriate DNS records to your domain to direct traffic to your rented server.

Saving SSH Public Key to the Server

#

Different server platforms use different connection methods, but a commonly used method is SSH (Secure Shell). You can choose the method that best suits your preferences and needs.

Using sshkey:

• Generate a key pair locally using ssh-keygen. (Typically, the files are stored in the ~/.ssh directory, with the private and public keys named ~/.ssh/id_rsa and ~/.ssh/id_rsa.pub, respectively.)
• Open the ~/.ssh/authorized_keys file on the server. (If this file does not exist, create it.)
• Copy the contents of ~/.ssh/id_rsa.pub into the file mentioned above and save it.
• You can now connect to and control the server using the command ssh <user>@<host>!

Enabling Domain Name Access to Server Ports 80 and 443

#

Accessing ports 80 (HTTP) and 443 (HTTPS) on your server from the public internet is a crucial step in setting up a blog. The expected user-side logic for this process is as follows:

1. The user types the domain name into their browser and presses Enter.
2. The browser sends the corresponding HTTP request.
3. A DNS server resolves the domain name into its associated IP address.
4. Once resolved, the HTTP request is forwarded to the appropriate port on the server’s IP address (HTTP: 80, HTTPS: 443).
5. A program on the server listening to ports 80 or 443 processes the request and returns the requested information.

To achieve this, you will need to take the following steps.

Specific Configurations for Domain Management Websites

#

1. Add an A record for @ pointing to <Host IP Address>.
2. Add an A record for www pointing to <Host IP Address>.
3. Allow some time for the records to propagate across the public internet. (You can use DNS Checker to view the propagation results.)

Services for Listening on Ports

#

We’ll use Nginx for configuration in this case.

1. Install Nginx on the server by running: sudo apt-get install nginx.
2. Start the Nginx service with: sudo systemctl start nginx.

Now, your website is accessible via the HTTP protocol!

Next, we need to apply for an SSL certificate for our website, to enable access via the HTTPS protocol.

Configuring HTTPS

#

We’ll use the Let’s Encrypt service to set up our SSL certificate.

1. Visit the website [https://certbot.eff.org/instructions] and find the appropriate configuration. (For this example, I’ve chosen nginx on Ubuntu 20, but you should select the option that matches your server’s configuration.)
2. Install snapd by running: sudo apt-get install snapd.
3. Install Certbot with: sudo snap install --classic certbot.
4. Create a symbolic link for Certbot with: sudo ln -s /snap/bin/certbot /usr/bin/certbot.
5. Obtain the certificate and automatically configure Nginx for HTTPS by executing: sudo certbot --nginx. (This command will automatically create necessary configuration files and symbolic links in /etc/nginx/sites-available and /etc/nginx/sites-enabled.)

Now, your website is accessible via HTTPS using your domain name!

Generating a Static Website

#

This article utilizes Hugo to generate a static website. Different static site generators have varying methods of implementation. For specific configurations, refer to the official Hugo documentation.

Synchronization

#

After generating the static website, you only need to synchronize the site content to the server.

The method of synchronization can vary depending on the framework chosen and personal preferences. Specifically, this article discusses syncing the static website to the /var/www/html directory and configuring Nginx to route to this directory.

The corresponding Nginx configuration is as follows:

server {
        listen 80;
        server_name h4ck4t.com www.h4ck4t.com;
        return 301 https://h4ck4t.com;
}

server {
        listen 443 ssl;
        server_name h4ck4t.com www.h4ck4t.com;

        ssl_certificate /etc/letsencrypt/live/h4ck4t.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/h4ck4t.com/privkey.pem;

        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;

        access_log /var/log/nginx/h4ck4t.com.access.log;
        error_log /var/log/nginx/h4ck4t.com.error.log;

        root /var/www/html;
        index index.html;
}

Completion

#

With that, our static blog system setup is complete! You are now ready to share your content with the world.