Mix Space is a modern personal space backend built with a frontend-backend separation architecture; Shiro is its official high-aesthetic frontend theme, built on Next.js, known for its minimalist design and smooth animations. When used together, they provide a personal blog system that combines article writing, daily updates, exceptional performance, and visual appeal. — Gemini

I previously used Hexo, but struggled with difficult updates and limited functionality (because I prefer self-hosting and don't really like PaaS). Even updating a single character required rebuilding and re-uploading to the server, making fragmented writing very difficult.

Mix Space and Shiro are complementary — the backend (Core) and frontend (Theme) respectively. There are also other frontend themes available (such as Kami, Yun). This article only covers Mix Space (backend) and Shiro (frontend).

For backend deployment, you can directly use the official pre-built Docker image. For the Shiro frontend, you can use either the pre-built Docker image or build your own Docker image. Self-building allows for deep customization of the frontend pages (if you need to display two or more ICP filing numbers, you'll have to self-build).

Enough talk, let's get started!

Mix Space Deployment

Pull the Image

Backend deployment simply requires pulling the image via Docker Compose

Then write in docker-compose.yml:

• JWT_SECRET requires a string between 16 and 32 characters in length
• ALLOWED_ORIGINS should contain the allowed domains, typically the frontend domain. If multiple domains are allowed, separate them with commas.

You can modify other settings as needed, for example changing '2333:2333' to '127.0.0.1:2333:2333'

Then you can start the Core

Reverse Proxy

Recommended to use modern panels like 1Panel or BT Panel for this operation, it's very simple

Create a new website, configure the reverse proxy, URL address http://127.0.0.1:2333 and you're done

If you want to manually configure Nginx, refer to the Official Docs

Backend Configuration

Go to the website settings and set Frontend URL, Admin Panel URL, API URL, and Gateway URL to:

• Frontend URL: {Shiro URL}
• Admin Panel URL: {Backend URL}/proxy/qaqdmin
• API URL: {Backend URL}/api/v2
• Gateway URL: {Backend URL}

Configure the rest according to your needs

Shiro Deployment

Enter the Mix Space admin panel, go to the "Configuration & Cloud Functions" page, click the add button in the top right corner, and fill in the following on the edit page:

• Name: shiro
• Reference: theme
• Data Type: JSON
• Data:

Modify the following content according to your needs

Shiro frontend deployment can be divided into official pre-built and self-built versions, choose as needed

Pre-built is suitable for quickly setting up a site, but doesn't allow deep customization. As mentioned: choose according to your needs

One more thing: if you've sponsored the closed-source Shiroi version, you can only choose self-building, as there's no official pre-built image available

Pre-built

Pre-built is very quick, just pull the official image, configure the environment variables, and you're ready to go

Configure environment variables

Then fill in

Once filled in, you can run docker compose up -d

Self-built

Self-building is slightly more complex, but if you want deep customization, it's your only option

Here we use GitHub Actions to build the Docker image, which is convenient and fast

Go to your GitHub and create a repository, a private repository is recommended, we'll need it later

Make sure you have Git installed on your computer

Open a terminal in a directory and execute the following commands. Note: don't delete the .git folder, we use a "rename remote repository" approach so you can sync and merge when the original author updates

Here's the key part! Go to and clear the .github / workflows folder, then create docker-main.yml

And fill in:

Save and exit

Then return to the CMD window

After pushing, return to the GitHub repository to check

You can click the yellow dot next to it to view the process

After the build is complete, you still need to configure a GitHub Token on the server to pull the image

• Go to GitHub → Click your avatar → Settings → Developer Settings → Personal access tokens (classic) and create a Token
• Duration can be permanent, only set the read:packages permission
• Go to your server and enter echo "{your Token}" | docker login ghcr.io -u {your GitHub ID} --password-stdin

Then follow the process

Configure environment variables

Then fill in

Once filled in, you can run docker compose up -d

Alright, the entire process is now complete. How you want to tinker with it from here is up to you

Updating Code

As the original author continues to update, you might want to sync the latest features. Thanks to preserving the Git history and configuring upstream earlier, updating becomes very simple

If there are no conflicts, you only need three commands to complete the update

If there are conflicts, you'll need to "mediate" in VS Code (

Closing Notes

If your server is located in mainland China, pulling images from ghcr.io might be very slow or even fail. To solve this problem, you can sync the image to Alibaba Cloud ACR after building

Add the following to the env section of docker-main.yml

Then add the following at the end of the file

Next, configure your Alibaba Cloud account full name and ACR instance independent login password in the repository Actions Secrets as ALIYUN_USERNAME and ALIYUN_PASSWORD respectively

Once configured, the next time you push code, GitHub Actions will automatically sync the image to Alibaba Cloud. This way, domestic servers won't have to spend half an hour pulling images anymore