Mix-Space 搭建从入门到入土

前言

你说的对，但是《Mix-Space》是由 Innei 自主研发的一款全新开放源代码博客项目。项目发生在一个被称作「Github」的幻想世界，在这里，被神选中的人将被授予「Node.JS」，导引键盘之力。你将扮演一位名为「Developer」的神秘角色，在自由的 Coding 中邂逅性格各异、能力独特的码子们，和他们一起击败强敌，找回失散的开源协议——同时，逐步发掘「Mix-Space」的真相。

准备材料

本文演示服务器由雨云提供计算服务

VPS / 服务器一台（本文采用雨云美国洛杉矶 8c16g 服务器，使用 Ubuntu 20.04 已提前安装好宝塔面板）
域名一个
智慧的大脑
灵巧的双手

安装环境

Docker

curl -fsSL https://get.docker.com | bash

Node.JS

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Redis

apt install redis

Git

apt install git

Git LFS

Note
如果你不用 Kami 主题的话可以不用装这个

curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs

MongoDB

请参考 MongoDB 官网\ 安装完成后需要手动启动

systemctl enable mongod
systemctl start mongod

后端搭建

请先将您的域名解析到你的服务器（文中用 mxapi.xcnya.cn 作为 后端 API 示例）

Docker（推荐）

从仓库获取 docker-compose.yml

mkdir /opt/mx-space
mkdir /opt/mx-space/core
cd /opt/mx-space/core
wget https://raw.githubusercontent.com/mx-space/core/master/docker-compose.yml

然后在同目录下创建一个 .env 文件\ 写入以下内容

# 随便写，要求 16≥ 字符串 ≥32
JWT_SECRET=
# 允许的域名，指的是你的前端域名，用","分开
ALLOWED_ORIGINS=

我的配置如图，保存并退出后使用以下命令启动容器

docker compose up -d

等待完成

如图启动完成后，使用你喜欢的方式反代 127.0.0.1:2333 并配置好 SSL 证书绑定到你的域名作为 后端 API\ 我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

完成后访问你的后端 API 域名测试，出现如图代表正常

手动搭建

从仓库拉取 core

mkdir /opt/mx-space
cd /opt/mx-space
git clone https://github.com/mx-space/core.git
cd core

安装

npm install -g pnpm pm2
pnpm i

做和放宽，稍安勿躁，好东西马上就要来了

然后输入以下命令进行构建

pnpm build
pnpm bundle

然后在 apps/core/ 中创建一个 ecosystem.config.js（如果有就删掉）\ 将以下内容粘贴进去，并注意配置 env{} 中的环境变量

const { cpus } = require('os')
const { execSync } = require('child_process')
const nodePath = execSync(`npm root --quiet -g`, { encoding: 'utf-8' }).split(
  '\n',
)[0]
const cpuLen = cpus().length
module.exports = {
  apps: [
    {
      name: 'mx-server',
      script: 'out/index.js',
      autorestart: true,
      exec_mode: 'cluster',
      watch: false,
      instances: cpuLen,
      max_memory_restart: '520M',
      args: '',
      env: {
        MX_ENCRYPT_KEY: 'mx-space',
        PORT: '2333',  // 启动端口
        ALLOWED_ORIGINS: 'mx.xcnya.cn,mxspace.xcnya.cn',  // 允许的域名，指的是你的前端域名，用","分开
        JWT_SECRET: 'hPf6Rb8KfE6jOgY3cDuM6H6t'  // 随便写，要求 16 ≥ 字符串 ≥ 32
      },
    },
  ],
}

然后使用 pm2 start ecosystem.config.js 启动后端

完成后访问你的后端 API 域名测试，出现如图代表正常

配置后端

后端搭建完成后需要进行初始化配置

Important
自 core 5.0 版本以来，原 /qaqdmin 被变更到了 /proxy/qaqdmin

访问 https://你的后端域名/proxy/qaqdmin\ 然后会出现如图

Note
如果没有出现初始化界面，请尝试访问 https://你的后端域名/proxy/qaqdmin#init

跟着一步步配置就好了

前端搭建

Kami

Important
Kami 已停止维护，为了更好的使用体验，请跳过本节并使用下一节中的 Shiro 主题作为替代

Vercel

点击一键部署到 Vercel\ 点进去之后先按照提示将仓库 fork 到你的个人账号

然后按图配置

坐和放宽.ing

然后就好了

这时你用 Vercel 分配给你的域名是用不了的，所以你得绑个自己的域名

然后访问前端域名，大功告成！

本地搭建

请先将您的域名解析到你的服务器（文中用 mx.xcnya.cn 作为 前端域名 示例）

克隆仓库

cd /opt/mx-space
git clone https://github.com/mx-space/kami.git
cd kami

安装

npm install -g pnpm pm2
git lfs fetch --all
git lfs pull
pnpm i

然后在同目录创建一个 .env 文件，写入以下内容

# API 地址
NEXT_PUBLIC_API_URL=https://你的后端域名/api/v2
# GATEWAY 地址
NEXT_PUBLIC_GATEWAY_URL=https://你的后端域名
#前端使用的配置项名字
NEXT_PUBLIC_SNIPPET_NAME=kami
# 如果使用 CDN, 修改产物前缀；一般留空
ASSETPREFIX=

然后输入 pnpm build 开始构建

坐和放宽.ing

完成后使用 pnpm prod:pm2 启动

如图启动完成后，使用你喜欢的方式反代 127.0.0.1:2323 并配置好 SSL 证书绑定到你的域名作为 前端 API\ 我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

然后访问前端域名，大功告成！

Shiro

关于 CLERK

在 Shiro 主题中需要用到 Clerk，所以需要去 Clerk 官网注册一个账号\ 注册完之后控制台点击 Add application

名字随便写，然后创建

完成之后下滑找到这些，把这两个东西保存好，请勿泄露

配置后端

Shiro 前端构建之前需要先在后端进行一些设置
访问你的后台，找到 附加功能 → 配置云函数，点击上面的 "+" 号

然后名称填写 shiro，引用填写 theme，数据类型选 JSON
内容根据以下内容修改后覆盖到右边的框框中

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:[email protected]",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "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": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "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": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "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": 1434499
      }
    }
  }
}

然后点右上角的保存

Docker（？

Shiro 文档里是没写 Docker 用法的，但是仓库里确实有 docker-compose.yml 这个文件，~~主要是我研究了半个小时属实没整明白，先挖个坑来年有幸再填吧~~

Vercel

点击一键部署到 Vercel

Important
不建议直接点击上方按钮进行部署，不然后续没办法更新，请手动 fork Innei/Shiro 仓库到自己的 Github 账号底下然后在 Vercel New Project

跟前面一样的 fork 仓库

填上环境变量信息然后点部署等会就好了

一样的绑上自己的域名，就宣布大功告成了！

手动搭建

克隆仓库

cd /opt/mx-space
git clone https://github.com/Innei/Shiro.git
cd Shiro

然后在同目录下创建一个 .env 文件，填入以下内容

# 你的API地址
NEXT_PUBLIC_API_URL=
# 你的API域名
NEXT_PUBLIC_GATEWAY_URL=
# CLERK 公钥
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
# CLERK 私钥
CLERK_SECRET_KEY=
# OpenAI Key（不多说了，自己看着整吧）
OPENAI_API_KEY=

输入以下命令构建

npm install -g pnpm pm2
pnpm i
pnpm build

如图完事之后我们可以输入 pm2 start ecosystem.config.js 来启动 Shiro

或者安装为系统服务启动

输入 vim /etc/systemd/system/mx-shiro.service\ 然后输入以下内容

[Unit]
Description=MX-Space Shiro Theme Daemon
After=network.target

[Install]
WantedBy=multi-user.target

[Service]
Type=simple
WorkingDirectory=/opt/mx-space/Shiro
ExecStart=npx next start -p 2323
Restart=always

然后使用以下命令启动

systemctl enable mx-shiro
systemctl start mx-shiro

启动完成后，使用你喜欢的方式反代 127.0.0.1:2323 并配置好 SSL 证书绑定到你的域名作为 前端域名（也就是博客域名\ 我这里用宝塔面板，配置如图（已提前配置好 SSL 证书）

然后访问前端域名，大功告成！

后记

如果你跟我一样遇到了类似的问题

请看这篇文章