風結ぶ言葉たち

::: warning
All domains, projects, and interfaces mentioned in this article have been discontinued after the publication of this article and are for demonstration purposes only.
:::

Final Result Presentation#

Preparations#

Please register your account on GitHub, Clerk, and Vercel. This will not be demonstrated here.

Configure Domain#

The first step in building a personal blog is to have your own domain. If you don't have one yet, you can go to Dynadot to purchase one. You can use my promo code 8E9O6bh6c9B8y6l to get a $5 discount.

Here, we will use the purchase of nskr.blog on Dynadot as an example.

Since Cloudflare provides many services for optimizing site access and ensuring site security, we choose to host the site on Cloudflare.

First, you need to add your purchased domain to Cloudflare and have it scan the existing DNS records.

Then, copy the DNS servers provided by Cloudflare, go back to the Dynadot control panel, select the domain name servers in the DNS settings, and enter the copied content.

Configure Server#

After completing the relevant settings for the domain, we need to configure the server. Here, I choose Google Cloud. After binding a credit card, you can get $300 in credits, which is valid for three months.

Configure and purchase according to your own needs. I chose the Ubuntu system image based on personal preference. Note that you need to enable the "Allow HTTP traffic" and "Allow HTTPS traffic" options.

After the server is built, we can obtain the public IP address of this server. We need to copy this IP address and configure the domain resolution in the Cloudflare control panel to point api.nskr.blog to our server. (In fact, there is no need to refer to the operations in the video here, and resolve @.nskr.blog to the Vercel server later)

After completing the above operations, we can connect to our server via SSH.

For ease of management, we can install either 1Panel or Baota panel. You can choose one of the following commands:

# Install 1Panel
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh

# Install Baota panel
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

Both of these panels will automatically install Docker and Docker-compose. You can check them separately using the following commands:

docker -v

docker compose version

If the server does not output the installed version number correctly, you can execute the following command:

curl -fsSL https://get.docker.com | bash -s docker

After completing the above steps, please go to the server control panel to open the relevant ports. The ports required by the panel can be queried in the SSH interface, and the ports required by the blog are 2323 and 2333:

Deploy Backend of the Blog#

First, you need to pull the configuration file:

# Create directory
cd && mkdir -p mx-space/core && cd $_

# Pull the docker-compose.yml file
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

Then, create a .env file in the mx-space/core directory and fill in the following content (please modify it according to your needs):

You can learn to use vim on your own. Here, I only mention the operations related to deployment:

Use vim .env to create and open the .env file, then press i to switch to insert mode. After entering the variables, press the ESC key to enter command mode, and enter :wq to save and exit.

JWT_SECRET=nishikoriyuinishikoriyui
ALLOWED_ORIGINS= nskr.blog
ENCRYPT_ENABLE=false
ENCRYPT_KEY=

• JWT_SECRET should be at least 16 characters long and no more than 32 characters long. It is used to encrypt JWT.
• ALLOWED_ORIGINS is the allowed domain name. If there are multiple, separate them with commas.
• ENCRYPT_ENABLE indicates whether encryption is enabled. Fill in true or false.
• ENCRYPT_KEY is the encryption key. If encryption is not enabled, it does not need to be filled in. The key length should be 64 bits and only contain lowercase letters and numbers. You can generate it using the openssl rand -hex 32 command.

After completing the above operations, you can use the following command to pull the image and run the backend core container:

docker compose up -d

After deploying the backend, we need to configure reverse proxy. If you use a single domain name, you can refer to the official documentation. Here, I choose to use 1Panel for dual domain name configuration. The configuration method is similar for Baota panel, so it will not be demonstrated here.

First, you need to install the OpenResty program in 1Panel for website deployment.

Then, in the "Website" selection card, build a static website api.nskr.blog.

After the website is built, you need to apply for an SSL certificate. This will not be demonstrated here.

After the setup is complete, select "Configuration" and paste the following content into the website configuration file:

    ## Reverse proxy starts
    ## WebSocket
    location /socket.io {
      proxy_pass http://127.0.0.1:2333/socket.io; 
      proxy_set_header Host $host; 
      proxy_set_header X-Real-IP $remote_addr; 
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
      proxy_set_header REMOTE-HOST $remote_addr; 
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade"; 
      proxy_buffering off;
      proxy_http_version 1.1; 
      add_header Cache-Control no-cache; 
    }
    ## Others
    location / {
      proxy_pass http://127.0.0.1:2333; 
      proxy_set_header Host $host; 
      proxy_set_header X-Real-IP $remote_addr; 
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
      proxy_set_header REMOTE-HOST $remote_addr; 
      add_header X-Cache $upstream_cache_status; 
    }
    ## Reverse proxy ends

After this configuration,

The API address is https://api.nskr.blog/api/v2

The Gateway is https://api.nskr.blog/

The backend panel of the blog is https://api.nskr.blog/proxy/qaqdmin

Deploy Frontend of the Blog#

Here, we will use Vercel's Serverless service to deploy the frontend. This can effectively reduce the load on our server and reduce expenses on the server.

First, we need to clone the official repository of Shiro on GitHub.

Then, we need to open Clerk and create a new application to obtain the public and private keys.

After that, we need to access the backend panel of the blog and configure the cloud function.

In the editing panel, fill in:

• Name: shiro
• Reference: theme
• Data Type: JSON

Then, copy the content of this link and fill it in (here, I directly reference the configuration file of this site, please modify it according to your needs):

After completing the above steps, go to Vercel and create a new project. On the configuration page, click "Environment Variables" and fill in the following content:

NEXT_PUBLIC_API_URL=https://api.nskr.blog/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://api.nskr.blog
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_•••••••••••••••••••••••••••••••••••••••••••
CLERK_SECRET_KEY=sk_test_•••••••••••••••••••••••••••••••••••••••••••

• NEXT_PUBLIC_API_URL is the API address.
• NEXT_PUBLIC_GATEWAY_URL is the Gateway address.
• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is the public key obtained from Clerk.
• CLERK_SECRET_KEY=sk_test_•••••••••••••••