一只鬆

Mix Space is a simple yet sophisticated personal blog system. It is fast and modern. You can use it to build your own personal space, record life, and share knowledge.

Step 0: Getting Started#

Before switching to Mix-Space, I was using Hexo as my main personal blog system. However, Hexo, although good, was lightweight, fast, and completely static. But its inconsistent configuration and cumbersome article writing process have always been a problem for me. After careful consideration, I decided to switch to a new blog system.

My initial choice was VanBlog. It uses a convenient backend, has a basic static frontend, and a good design with frontend-backend separation. However, after actually using it, I found various small issues that affected my usage, such as:

• The comment system uses the built-in Waline, but its configuration is not perfect, and the internal iFrame often has some inexplicable problems.
• The variable table used for friend links and donation information has low editability.
• The pages are somewhat outdated, and some pages (such as friend links) have average responsiveness.

This may be somewhat related to it being in the development stage, but I still decided to look for a blog system that suits me.

Then I came across Shiro (I actually saw it a long time ago, but at that time I thought using Hexo was fine and didn't delve into it). After carefully studying Shiro and its backend Mix-Space, I found that it seems to be suitable for my needs.

And I can also deploy Shiro to serverless platforms like Vercel or Netlify, which can ensure a certain speed and reduce server pressure. This feels pretty good, right?

Step 1: Deploying the Backend#

As the title suggests, the server management panel I use is 1Panel. It is an open-source and fast server management panel, which is more in line with my usage habits compared to Baota. Being open-source, I am not very worried about surveillance or backdoor issues, and its containerization feature makes server application running more secure.

On 1Panel, it is generally recommended to deploy applications using Docker containers for easy management, installation, and uninstallation.

I used the Docker Compose deployment method recommended by Mix-Space, but I made some small modifications to make it more suitable for my needs.

The Docker Compose file I used is as follows, which is relatively more suitable for 1Panel usage and is for reference only.

version: '3.8'

services:
  app:
    container_name: Mx-Space
    image: innei/mx-server:5
    command: bash ./docker-run.sh
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - ALLOWED_ORIGINS
      - JWT_SECRET
      - ENCRYPT_KEY
      - ENCRYPT_ENABLE

    volumes:
      - ./data/mx-space:/root/.mx-space
    ports:
      - '127.0.0.1:2333:2333'
    depends_on:
      - mongo
      - redis
    links:
      - mongo
      - redis
    networks:
      - 1panel-network
    restart: always
    healthcheck:
      test: ['CMD', 'curl', '-f', 'http://127.0.0.1:2333/api/v2/ping']
      interval: 1m30s
      timeout: 30s
      retries: 5
      start_period: 30s

  mongo:
    container_name: mongo
    image: mongo
    volumes:
      - ./data/db:/data/db
    ports:
      - "127.0.0.1:27017:27017"
    networks:
      - 1panel-network
    restart: always

  redis:
    container_name: redis
    image: docker.dragonflydb.io/dragonflydb/dragonfly
    networks:
      - 1panel-network
    ulimits:
      memlock: -1
    ports:
      - "127.0.0.1:6379:6379"
    volumes:
      - ./data/redis:/data

networks:
  1panel-network:
    external: true
    

The modifications I made compared to the official Mix-Space Compose file are as follows:

• Changed the Docker network to the 1Panel's 1panel-network Docker network, which is more convenient for reverse proxy and integration with other services in 1Panel.
• Changed the backend address from 0.0.0.0:2333 to 127.0.0.1:2333, which only broadcasts within the server's internal network, making it more secure.
• Replaced the Redis database service with DragonflyDB. This is a Redis-compatible database service, and its official documentation claims to have 20 times the read-write efficiency of Redis and stronger concurrency. If you don't like this, you can compare it with the Mix-Space official documentation and replace it with standard Redis service.

Starting the Service#

Starting the service is simple. We don't need to install Docker and Docker Compose separately because 1Panel has already pre-installed these services. We just need to follow the new directory creation instructions in the Mix-Space official documentation:

cd && mkdir -p mx-space/core && cd $_ 

# Fetch the modified docker-compose.yml file
wget https://fastly.jsdelivr.net/gh/yzsong06/File@main/Mix-Space/docker-compose.yml

.env File#

# JWT Secret: You need to fill in a string with a length of at least 16 characters and no more than 32 characters as the JWT secret key used to encrypt the user's JWT. Be sure to keep your secret key safe and do not disclose it to others.
JWT_SECRET=
# Allowed Origins: You need to fill in the allowed domain names, usually the domain name of the frontend. If you allow multiple domain names to access, separate them with commas.
ALLOWED_ORIGINS=
# Enable Encryption: If you want to enable encryption, change false to true. After enabling encryption, you need to fill in the encryption key below.
ENCRYPT_ENABLE=
# Encryption Key: If you don't know what this is, it is not recommended to enable this feature. For more information, please refer to https://mx-space.js.org/usage/security.html
ENCRYPT_KEY=
# If encryption is enabled, please note that the key length must be 64 bits, otherwise an error will occur during initialization. Please note that this is irreversible, so it is not highly recommended to use it unless you really need encryption.

Next, open the directory where you placed docker-compose.yml (usually /root/mx-space/core) and create a .env file and paste the above parameters into it. Then modify the values as needed, and remember to write the values directly after the equal sign without spaces.

Then go back to the terminal and enter the following command (please note that when executing the following command, you need to be in the root directory of the server, but you can also execute the following commands separately):

cd mx-space/core && docker compose up -d

This will start pulling and creating Docker containers. After the pulling and creation is complete, the service will start automatically. This completes the backend startup configuration.

Step 2: Configuring Reverse Proxy#

Configuring reverse proxy on 1Panel is similar to Baota, after all, there is a visual management panel, which is quite convenient.

We enter the Websites section in 1Panel (you need to install Openresty first), then click Create Website, select Reverse Proxy, fill in the desired backend domain name in the Domain field, and fill in 127.0.0.1:2333 in the Reverse Proxy Address field. Then click Create Website to start the reverse proxy service. At this point, we still need a little configuration to make it work better.

Go to the Configuration of the corresponding website service, find Configuration File, and add the reverse proxy configuration according to the instructions in the Mix-Space official documentation. There should already be a Server header inside, so we add the following content:

    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; 
    }
   
   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; 
    }
    

After completing this, select Save and Reload, and then configure Https on the panel. You can access your backend domain (e.g., {domain}/proxy/qaqdmin) to see the management panel.

Step 3: Configuring the Theme#

The process of configuring the frontend theme is not described here in detail. For specific instructions, please refer to the official documentation.