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, has been bothering me with its inconsistent configuration and slightly cumbersome article writing process. After careful consideration, I decided to switch to a new blog system.
My initial choice was VanBlog. It uses a convenient backend, has a mostly static frontend, and a good design with frontend-backend separation. However, after trying it out, I found some small issues that affected my usage, such as:
- The built-in Waline comment system had incomplete configuration and the internal iFrame proxy for its management page often had some inexplicable issues.
- The variable table used for friend links and donation information had low editability.
- The pages looked somewhat outdated, and some pages (such as the friend links page) had mediocre responsiveness.
This may be partly due to it being in the development stage, but I still decided to look for a blog system that suits my needs.
Then I came across Shiro (I actually saw it a while ago, but at that time I thought Hexo would also work, so I didn't delve into it). After carefully studying Shiro and its backend Mix-Space, I found that it seemed to be a good fit for my requirements.
Moreover, I can deploy Shiro to Serverless platforms like Vercel or Netlify, which can ensure a certain speed while reducing server load. This feels quite good, doesn't it?
Step 1: Deploying the Backend#
As the title suggests, I use 1Panel as my server management panel. It is an open-source and fast server management panel that better suits my usage habits compared to Baota. Being open-source, I am not very concerned about surveillance or backdoor issues. Its containerization feature also 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 better suit 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 1Panel's
1panel-networkDocker network, which is more convenient for reverse proxy and integration with other services in 1Panel. - Changed the Core backend address from
0.0.0.0:2333to127.0.0.1:2333, only broadcasting within the server's internal network for increased security. - Replaced the Redis database service with DragonflyDB, which is a Redis-compatible database service. According to its official documentation, it has 20 times the read-write efficiency of Redis and stronger concurrency capabilities. 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 instructions in the Mix-Space official documentation to create a new directory:
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 enter a string with a length of at least 16 characters and no more than 32 characters. It is used to encrypt the JWT of the user. Be sure to keep your secret key safe and do not disclose it to others.
JWT_SECRET=
# Allowed Origins: You need to enter the allowed domain name, usually the domain name of the frontend. If multiple domain names are allowed to access, separate them with commas.
ALLOWED_ORIGINS=
# Enable Encryption: If you are sure you want to enable encryption, change false to true. After enabling encryption, you need to enter 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. Paste the above parameters into it and modify the values as needed. Please note that you should 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 should 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 pull and creation is complete, the service will start automatically. This completes the backend startup configuration.
Step 2: Configuring Reverse Proxy#
Not mandatory, personal testing showed that the program still works fine without configuring reverse proxy.
Configuring reverse proxy on 1Panel is similar to Baota, after all, it has a visual management panel, which is quite convenient.
We enter the Websites section in 1Panel (Openresty needs to be installed first), then click Create Website, select Reverse Proxy, enter the desired backend domain name in the Domain Name field, enter 127.0.0.1:2333 in the Reverse Proxy Address field, and then click Create Website to start the reverse proxy service. However, 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 as written 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 now 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.