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

::: 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#

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 and get $300 in credits after binding a credit card, 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 get 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, 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 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 following commands to install:

# 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. The ports required by the blog are 2323 and 2333:

Path in the Google Cloud 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 how to use 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 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 names, 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 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, 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 blog panel 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, we need to open Clerk and create a new application to obtain the public and private keys.

After that, we need to visit 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 private 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 in 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