Setting up your own blog - Mix Space and Shiro theme deployment tutorial

::: warning
All domains, projects, and interfaces mentioned in this document have ceased operation after the document was issued and are for demonstration purposes only.
:::

Final Presentation#

Frontend Interface

Backend Interface

Preparations#

Please register your account on GitHub, Clerk, and Vercel. We will not demonstrate the registration process here.

Configure the 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 to optimize website access and ensure site security, we choose to host the site on Cloudflare.

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

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

Configure the 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 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 the 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 also resolve @.nskr.blog, because we need to resolve it to the Vercel server later.)

After completing the above 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. The ports required by the panel can be queried in the SSH interface, and the ports required by the blog are 2323 and 2333:

In Google Cloud, the path to the firewall control panel

Deploy the Backend of the Blog#

First, you need to pull the configuration file:

# Create a 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 enter the following content (please modify it according to your needs):

You can learn about the use of vim by yourself. Here, we only mention the operations related to deployment:

Use vim .env to create and open the .env file, then switch to insert mode by pressing i, enter the variables, and press the ESC key to enter command mode. 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 names. If there are multiple domain names, 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 key length 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 the 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 is https://api.nskr.blog/

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

Deploy the 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, open Clerk and create a new application to obtain the public key and secret key.

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

In the editing panel, enter:

Name: shiro
Reference: theme
Data Type: JSON

Then, copy the content of this link and paste it (Here, we 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 enter 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 secret key obtained from Clerk

Then click Deploy and wait for the deployment to complete.

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

At this point, the basic deployment is complete.

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://ursprung.io/posts/tech/%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2%20-%20Mix%20Space%20%E5%8F%8AShiro%E4%B8%BB%E9%A1%8C%E9%83%A8%E7%BD%B2%E6%95%99%E7%A8%8B