風結ぶ言葉たち

::: 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 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 discount code 8E9O6bh6c9B8y6l to get a $5 discount.

Here, we will use nskr.blog purchased from Dynadot as an example.

Since Cloudflare provides many services for optimizing website 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 and go back to the Dynadot control panel. Choose the domain name server in the DNS settings and enter the copied content.

Configure Server#

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

Configure and purchase according to your own needs. I chose the Ubuntu system image according to my personal preferences. 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 of this server. We need to copy this IP and configure the domain resolution in the Cloudflare control panel to point api.nskr.blog to our server. (In fact, you don't 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.

To facilitate management, we can install either 1Panel or Baota panel. Choose one of the two:

# 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

After installing these two panels, Docker and Docker-compose will be automatically installed. 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. You can check the ports required by the panel 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 about the use of vim on your own. Here, only the operations related to deployment are mentioned:

Use vim .env to create and open the .env file, then switch to insert mode by entering i, enter 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: The length should be no less than 16 characters and no more than 32 characters, used to encrypt JWT.
• ALLOWED_ORIGINS: The allowed domain name. If there are multiple, separate them with commas.
• ENCRYPT_ENABLE: Whether to enable encryption, fill in true or false.
• ENCRYPT_KEY: The encryption key. If encryption is not enabled, it does not need to be filled in. The length of the key should be 64 bits and only contain lowercase letters and numbers. You can generate it using the command openssl rand -hex 32.

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 the backend deployment is completed, we need to configure reverse proxy. You can refer to the official documentation for the single domain name scheme. Here, I choose to use 1Panel for dual domain name configuration. The configuration method is similar to that of Baota panel, so it will not be demonstrated here.

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

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 start
    ## 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 end

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 use Vercel's Serverless service to deploy the frontend. This can effectively reduce the load on our server and reduce costs on the server.

First, you need to clone the official repository of Shiro on GitHub: https://github.com/Innei/Shiro.

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

Next, you need to visit the backend panel of the blog and configure the cloud function.

In the editing panel, fill in:

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

And copy the content of this link and fill it in (here, the configuration file of this site is directly referenced, 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: The API address.
• NEXT_PUBLIC_GATEWAY_URL: The Gateway address.
• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: The public key obtained from Clerk.
• CLERK_SECRET_KEY: The private key obtained from Clerk.

Then click Deploy and wait for the deployment to complete.

After the deployment is complete, bind your domain name to it and resolve the blog link to the Vercel server on Cloudflare.

At this point, the basic deployment is complete.

Configuration of Extended Features (To be updated)#

Dynamic Display#

Connect with xlog#

Set up a domain email and enable email subscription#

Implement global search using Algolia Search#

References#

Mix Space Official Documentation: https://mx-space.js.org/

This article is synchronized and updated to xLog by Mix Space.
The original link is https://nishikori.tech/posts/tech/build-mix-space