風結ぶ言葉たち

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

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

Since Cloudflare provides many services to optimize site access and ensure 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 "Name Servers" in the DNS settings and enter the copied content.

Configure Server#

After completing the domain-related settings, we need to configure the server. Here, we 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 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, you don't need to refer to the operations in the video here, and you don't need to resolve @.nskr.blog because it needs to be resolved to Vercel's server later.)

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

For easy management, we can install either 1Panel or Baota Panel. 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. You can check the ports required by the panel in the SSH interface. The ports required by the blog are 2323 and 2333:

Deploy Backend#

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 operations related to deployment are mentioned:

Use vim .env to create and open the .env file, then switch to insert mode by entering i. 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: The length should be no less than 16 characters and no more than 32 characters. It is used to encrypt JWT.
• ALLOWED_ORIGINS: The allowed domain name(s), separated by commas if there are multiple.
• 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 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 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 for Baota Panel is similar and will not be demonstrated here.

First, 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 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 address is https://api.nskr.blog/

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

Deploy Frontend#

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 from 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

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 Vercel's server on Cloudflare.

At this point, the basic deployment is complete.

Configuration of Extended Features (To Be Updated)#

Dynamic Display#

Integration with xlog#

Set Up Domain Email and Enable Email Subscription#

Implement Global Search with Algolia Search#

References#

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

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