Deploy Mix-Space and the front-end Shiro theme using 1Panel

Preface#

The previous blog used Typecho, and in 2024 I stumbled upon Mix-Space, a front-end and back-end separated personal space, which I really liked, so I migrated the blog. It has now been successfully deployed, and I hope it can help others who want to deploy as well. || It's also a reminder for myself qwq ||

This article tutorial is: the back end is deployed using Docker, while the front end uses Github Action to build Shiro and then push it to the server (of course, you can also choose the more convenient Docker, but the closed-source version is not provided).

Mix Space is a small personal space site program. Unlike traditional blog programs, it adopts a front-end and back-end separation design, suitable for those who enjoy writing in different styles or types.

Mix Space - An Alternative Personal Space - Mix Space Documentation

Shiro is a front-end for personal sites made by Innei for Mix Space.
A minimalist personal website, embodying the purity of paper and freshness of snow.

GitHub - Innei/Shiro: 📜 A minimalist personal website embodying the purity of paper and freshness of snow.

Shiro - A brand new style, setting sail again - 静かな森

1 Panel Installation#

Refer to the official website's Online Installation - 1Panel Documentation steps. Here I am using Ubuntu, so just execute the following command.

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

Follow the prompts step by step; during this process, you will be asked to enter some account information, passwords, the default port for 1 Panel, etc. You can just press Enter to use the defaults, which can all be changed in the panel.
Finally, a log will be output, which contains your panel address, username, and password. You can use the address and account inside to log into the panel.

Back-end Core Deployment#

Check and Install Docker#

I deployed the back end using Docker, which is also a recommended method.
Since the 1 Panel panel will install Docker by default, there is no need to check if it is already installed.

Pull and Modify Configuration File#

You can use the command line to pull the file or use the 1 Panel panel to pull it; the storage path can be modified as needed.

# Go back to the root directory, create the mx-space/core folder, and switch to the core folder
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

Using 1Panel to pull

Modify some content in the docker-compose.yml.

services:
  app:
    container_name: mx-server
    image: innei/mx-server:latest
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      # Fill in your blog's domain name, separate multiple with commas, you can also add your local address to allow them to access themselves
      - ALLOWED_ORIGINS=blog.lolita.best,localhost:*,127.0.0.1:* 
      # Fill in your generated JWT secret, 16≤ secret length ≤32 characters (be sure to keep your secret safe and do not leak it)
      - JWT_SECRET=xxxxx 
      # Whether to enable encryption-related configurations, the default is false and empty, if encryption is needed, refer to the official configuration documentation
      - ENCRYPT_ENABLE=false
      - ENCRYPT_KEY=
    volumes:
      - ./data/mx-space:/root/.mx-space
    ports:
      #-'2333:2333' Modified the docker port mapping, not opening the port
      - '127.0.0.1:2333:2333' 
    depends_on:
      - mongo
      - redis
    networks:
      - mx-space
    restart: unless-stopped
    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
    networks:
      - mx-space
    restart: unless-stopped

  redis:
    image: redis:alpine
    container_name: redis
    volumes:
      - ./data/redis:/data
    healthcheck:
      test: ['CMD-SHELL', 'redis-cli ping | grep PONG']
      start_period: 20s
      interval: 30s
      retries: 5
      timeout: 3s
    networks:
      - mx-space
    restart: unless-stopped

networks:
  mx-space:
    driver: bridge

Start Core#

After configuration is complete, directly use the following command in the current directory to start Core.

# The same command is used for updating the back end or modifying the yaml configuration to update the container
docker compose pull && docker compose up -d

After successful startup, you can see the running status of the mx-server, redis, and mongo containers in the 1 Panel.
At this point, you have successfully deployed the back end.

Reverse Proxy Settings#

After the back end is deployed, you also need to set up a reverse proxy to access it, and here I will also set up the SSL certificate.

Apply for Website Certificate#

You can directly apply for a certificate in the website/certificate section of the 1 Panel.
We need to create an Acme account first, and after filling in the email, the rest can be left as default.

Next is the verification method when applying for the certificate. Here I use the DNS account verification method, which requires creating a DNS account. The panel supports many DNS service providers, so choose your own; I use CloudFlare.

The CloudFlare API token can be applied for in the "Manage Account/Account API Tokens" section, and you can directly use the "Edit Zone DNS" template.
After completing the above steps, the preparation work is done. Click to apply for the certificate and fill in your website domain name.
Certificate after application

Create Website and Set Up Reverse Proxy#

When using 1 Panel for the first time, it will prompt you to install OpenResty from the app store; just install it as prompted.
Choose to create a static website, fill in your domain name, and leave the rest as default.
Click on the web configuration, switch to HTTPS, and select the previously applied certificate; the SSL is configured.
Next, go to the configuration file, copy the content below and add it at the end, save and reload (remember to modify the commented areas to your own).

Here, a single domain method is used. If you need a dual domain for front and back ends, please refer to the official configuration documentation.

    # WebSocket address
    location /socket.io {
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection "Upgrade"; 
        proxy_buffering off; 
        proxy_set_header Host $host; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto $scheme; 
        proxy_pass http://127.0.0.1:2333/socket.io; 
    }
    # API address
    location /api/v2 {
        proxy_pass http://127.0.0.1:2333/api/v2; 
    }
    # Simple read render address
    location /render {
        proxy_pass http://127.0.0.1:2333/render; 
    }
    # Shiro address
    location / {
        proxy_pass http://127.0.0.1:2323; 
    }
    # Backend address
    location /proxy {
        proxy_pass http://127.0.0.1:2333/proxy; 
    }
    location /qaqdmin { # If you need to modify your backend address, you can change it here
        proxy_pass http://127.0.0.1:2333/proxy/qaqdmin; 
    }
    # RSS address
    location ~* \/(feed|sitemap|atom.xml) {
        proxy_pass http://127.0.0.1:2333/$1; 
    }

After setting up, you can access the backend management address via https://your-domain/qaqdmin and fill in the corresponding content as instructed.

Front-end Deployment#

I used the closed-source version of Shiro and automatically deployed it via Github Action. The open-source version should also be able to follow the steps below.

Github Fork Shiroi-deploy-action Repository and Modify Workflows File#

Repository address: GitHub - innei-dev/shiroi-deploy-action
After forking, modify the deploy.yml file under workflows (the parts that need modification are annotated in Chinese).

name: Build and Deploy

on:
  workflow_dispatch: # Added manual execution of the workflow
  push:
    branches:
      - main
  # schedule:
  #   - cron: '0 3 * * *'

  repository_dispatch:
    types: [trigger-workflow]

permissions: write-all
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

env:
  PNPM_VERSION: 9.x.x
  HASH_FILE: build_hash

jobs:
  prepare:
    name: Prepare
    runs-on: ubuntu-latest
    if: ${{ github.event.head_commit.message != 'Update hash file' }}

    outputs:
      hash_content: ${{ steps.read_hash.outputs.hash_content }}

    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Read HASH_FILE content
        id: read_hash
        run: |
          content=$(cat ${{ env.HASH_FILE }}) || true
          echo "hash_content=$content" >> "$GITHUB_OUTPUT"
  check:
    name: Check Should Rebuild
    runs-on: ubuntu-latest
    needs: prepare
    outputs:
      canceled: ${{ steps.use_content.outputs.canceled }}

    steps:
      - uses: actions/checkout@v4
        with:
          repository: innei-dev/shiroi # Fill in the repository you need to access, for the open-source version it is innei/shiro
          token: ${{ secrets.GH_PAT }} # `GH_PAT` is a secret that contains your PAT
          fetch-depth: 0
          lfs: true

      - name: Use content from prev job and compare
        id: use_content
        env:
          FILE_HASH: ${{ needs.prepare.outputs.hash_content }}
        run: |
          file_hash=$FILE_HASH
          current_hash=$(git rev-parse --short HEAD)
          echo "File Hash: $file_hash"
          echo "Current Git Hash: $current_hash"
          if [ "$file_hash" == "$current_hash" ]; then
            echo "Hashes match. Stopping workflow."
            echo "canceled=true" >> $GITHUB_OUTPUT
          else
            echo "Hashes do not match. Continuing workflow."
          fi

  build:
    name: Build artifact
    runs-on: ubuntu-latest
    needs: check
    if: ${{needs.check.outputs.canceled != 'true'}}

    strategy:
      matrix:
        node-version: [20.x]
    outputs:
      sha_short: ${{ steps.store.outputs.sha_short }}
      branch: ${{ steps.store.outputs.branch }}
    steps:
      - uses: actions/checkout@v4
        with:
          repository: innei-dev/shiroi # Fill in the repository you need to access, for the open-source version it is innei/shiro
          token: ${{ secrets.GH_PAT }} # `GH_PAT` is a secret that contains your PAT
          fetch-depth: 0
          lfs: true

      - name: Checkout LFS objects
        run: git lfs checkout
      - uses: pnpm/action-setup@v2
        with:
          version: ${{ env.PNPM_VERSION }}
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - uses: jongwooo/next-cache@v1
      - name: Install dependencies
        run: pnpm install
      - name: Build project
        run: |
          sh ./ci-release-build.sh

      # - uses: actions/upload-artifact@v4
      #   with:
      #     name: dist
      #     path: assets/release.zip
      - name: Cache Build Artifacts
        id: cache-primes
        uses: actions/cache/save@v4
        with:
          path: assets
          key: ${{ github.run_number }}-release

      - name: Store artifact commit version
        shell: bash
        id: store
        run: |
          sha_short=$(git rev-parse --short HEAD)
          branch_name=$(git rev-parse --abbrev-ref HEAD)
          echo "sha_short=$sha_short" >> "$GITHUB_OUTPUT"
          echo "branch=$branch_name" >> "$GITHUB_OUTPUT"

  deploy:
    name: Deploy artifact
    runs-on: ubuntu-latest
    needs: build
    steps:
      # - name: Download artifact
      #   uses: actions/download-artifact@v4
      #   with:
      #     name: dist

      - name: Restore cached Build Artifacts
        id: cache-primes-restore
        uses: actions/cache/restore@v4
        with:
          path: |
            assets
          key: ${{ github.run_number }}-release
      - name: Move assets to root
        run: mv assets/release.zip release.zip

      - name: copy file via ssh password
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          password: ${{ secrets.PASSWORD }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          source: 'release.zip'
          target: '/tmp/shiro'

      - name: Exec deploy script with SSH
        uses: appleboy/ssh-action@master

        with:
          command_timeout: 5m
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          password: ${{ secrets.PASSWORD }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          #script_stop: true Removed the line command because it is no longer in use; it will prompt but does not affect, so it can be left unchanged
          script: |
            set -e
            export NVM_DIR=~/.nvm # Define the installation directory of .nvm, otherwise, the command cannot be found during terminal execution
            source ~/.nvm/nvm.sh # Recognize nvm command, otherwise it may report command not found
            source $HOME/.bashrc 
            basedir=$HOME/mx-space/shiro # Fill in the path you want, since my back-end files are under mx-space, I want my shiro to also be in the mx-space folder for easy management
            workdir=$basedir/${{ github.run_number }}
            mkdir -p $workdir
            mkdir -p $basedir/.cache
            mv /tmp/shiro/release.zip $workdir/release.zip
            rm -r /tmp/shiro
            cd $workdir
            unzip -qq -o $workdir/release.zip
            rm -rf $workdir/standalone/.env
            ln -s $HOME/mx-space/shiro/.env $workdir/standalone/.env # Your .env file path, I store it in the mx-space/shiro folder for easy management
            export NEXT_SHARP_PATH=$(npm root -g)/sharp
            # copy workdir ecosystem.config.js to basedir if not exists
            if [ ! -f $basedir/ecosystem.config.js ]; then
              cp $workdir/standalone/ecosystem.config.js $basedir/ecosystem.config.js
            fi
            # https://github.com/Unitech/pm2/issues/3054
            # symlink workdir node entry file to basedir
            ln -sf $workdir/standalone/server.js $basedir/server.js
            mkdir -p $workdir/standalone/.next
            rm -rf $workdir/standalone/.next/cache
            ln -sf $basedir/.cache $workdir/standalone/.next/cache
            cd $basedir
            pm2 reload ecosystem.config.js --update-env
            rm $workdir/release.zip
            pm2 save
            echo "Deployed successfully"

      - name: After deploy script
        run: |
          hash=${{ needs.build.outputs.sha_short }}
          # curl -X "POST" "https://mx.innei.in/api/v2/fn/shiro/new-version-hook" -H 'Content-Type: application/json' -d "{\"hash\": \"$hash\", \"key\": \"\"}"
          ${{ secrets.AFTER_DEPLOY_SCRIPT }}
  store:
    name: Store artifact commit version
    runs-on: ubuntu-latest
    needs: [deploy, build]
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
          fetch-depth: 0 # otherwise, you will fail to push refs to dest repo
      # Get the commit version from the build job
      - name: Use outputs from build
        env:
          SHA_SHORT: ${{ needs.build.outputs.sha_short }}
          BRANCH: ${{ needs.build.outputs.branch }}
        run: |
          echo "SHA Short from build: $SHA_SHORT"
          echo "Branch from build: $BRANCH"
      - name: Write hash to file
        env:
          SHA_SHORT: ${{ needs.build.outputs.sha_short }}

        run: echo $SHA_SHORT > ${{ env.HASH_FILE }}
      - name: Commit files
        run: |
          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"
          git add ${{ env.HASH_FILE }}
          git commit -a -m "Update hash file"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: ${{ github.ref }}

Set Workflow Secrets#

HOST Server address
USER Server username
PASSWORD Server password
PORT Server SSH port
KEY Server SSH Key (optional, either password or key)
GH_PAT GitHub Token to access the previous repository

Configure .env File#

Return to 1 Panel, create a .env file in the specified location in your workflow, and copy the following content, modifying it to your own.
For example, the above is root/mx-space/shiro.

# Back-end API address
NEXT_PUBLIC_API_URL=https://blog.lolita.best/api/v2
# Back-end gateway address
NEXT_PUBLIC_GATEWAY_URL=https://blog.lolita.best
# TMDB information retrieval
TMDB_API_KEY=Fill in your TMDB-API
# GitHub token, used to obtain front-end version hash
GH_TOKEN=Fill in your own token

Install Necessary Environment on Server#

To deploy the Shiro theme, you need to install Node.js, npm, pnpm, pm2, sharp.
You can enter the following commands in the terminal of 1 Panel to install them.
Now Node.js official website also has installation methods; just follow the prompts.

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# In lieu of restarting the shell
\. "$HOME/. Nvm/nvm. Sh"

# Download and install Node. Js:
Nvm install 23

# Verify the Node. Js version:
Node -v # Should print "v 23.8.0".
Nvm current # Should print "v 23.8.0".

# Download and install pnpm:
Corepack enable pnpm

# Verify pnpm version:
Pnpm -v

# Additional supplementary content
npm i -g pm2 # Install pm2
npm i -g sharp # Install sharp

Since the workflow uses unzip for decompression, you need to confirm whether unzip is installed on the server; otherwise, it will report an error.

# Update packages and install unzip
sudo apt update && sudo apt install -y unzip 
# Use the following command to verify if it is installed
unzip -v

Start Workflow#

Manually run the workflow in GitHub and wait for the workflow to complete. If there are no errors, it is successful.

Configure Shiro Theme Cloud Functions in Management Backend#

Warning

Reminder
The configuration modification updates of cloud functions do not refresh immediately; please be patient.

The Shiro theme also needs to work with cloud functions. Enter the management backend / additional features / configuration and cloud functions, and first import the relevant files.

Then click the add button in the upper right corner, and in the editing page, fill in the following settings:

Name: shiro
Reference: theme
Data Type: JSON
Data: Copy the following example on the right and change it to your own information.
Data content reference: Configuration - Mix Space Documentation

{
  "footer": {
    "otherInfo": {
      "date": "2019-{{now}}",
      "icp": {
        "text": "萌ICP备20248012号",
        "link": "https://icp.gov.moe/?keyword=20248012"
      }
    },
    "linkSections": [
      {
        "name": "About",
        "links": [
          {
            "name": "About this site",
            "href": "/about-site"
          },
          {
            "name": "About me",
            "href": "/about",
            "external": true
          }
        ]
      },
      {
        "name": "More",
        "links": [
          {
            "name": "Timeline",
            "href": "/timeline"
          },
          {
            "name": "Friend Links",
            "href": "/friends",
            "external": true
          }
        ]
      },
      {
        "name": "Contact",
        "links": [
          {
            "name": "Leave a message",
            "href": "/message",
            "external": true
          },
          {
            "name": "Send an email",
            "href": "mailto:[email protected]",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/Sumikanya",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
    "bg": [
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "https://cn.cravatar.com/avatar/08d99bea604c306b51ebe162e93412f1?s=36",
      "faviconDark": "https://cn.cravatar.com/avatar/08d99bea604c306b51ebe162e93412f1?s=36"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "星野纯夏",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "💕。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A Lo girl who loves technology and digital ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "🦋<INFP>🦋",
            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
          },
          {
            "type": "span",
            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
          }
        ]
      },
      "description": "I hope to leave my mark in this world",
      "Hitokoto": {
        "random": true,
        "custom": "Custom one sentence"
      }
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": false,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
          "https://cdn.innei.ren/bed/2023/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 19781
      }
    }
  }
}

Set PM2 Service to Restore Processes After Restart#

pm2 startup
pm2 save

How to manually start Shiro? You can enter the front-end path of shiro and run the following code.
By default, the GitHub workflow configuration has already started it.

pm2 start ecosystem.config.js

You can use the following command to view the running processes.

pm2 list

Deployment Complete#

After both the front end and back end are successfully deployed, you can directly visit your webpage to see the current effect.

Reference Links#

Many thanks to the official and other related tutorials for building

Mix-Space Deploying the Latest Front-end Shiro - 华岁云小屋
 Trying Github Action Build and Deploy Shiroi - 华岁云小屋
 Mix Space - An Alternative Personal Space - Mix Space Documentation
mx-space + Shiro: A blog as pure as paper • Arthals' ink
General Process and Supplement for Shiroi Deployment - Ethan
Migrating Data from WordPress to Mix Space - FoskyM's Blog

This article is synchronized and updated to xLog by Mix Space
The original link is https://blog.lolita.best/posts/blog/MxspaceDeployShiro