Mix Space 圖片展示：#
Part 0 - 伺服器#
此教程由雨雲提供計算
伺服器本人推薦使用雨雲伺服器，可使用 1 元試用一日
下文使用雨雲美國洛杉磯 2c4g 伺服器演示
Part 1 - 準備工作#
安裝環境：#
使用 SSH 工具連接到伺服器
Docker：#
curl -fsSL https://get.docker.com | bash
apt install docker-compose
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:#
curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs
MongoDB：#
首先，確保你的包是最新的。打開終端並輸入：
sudo apt update && sudo apt upgrade -y
繼續安裝 MongoDB：
sudo apt install mongodb
最後輸入下面的命令，來確定 MongoDB 是否運行
sudo systemctl status mongodb
Part 2 - 後端安裝#
注：Mix Space 不像 Typecho、WordPress 之類的博客系統，Mix Space 的前端和後端分離
在此，我們需要首先安裝 Mix Space Core
使用 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
隨後在 core 根目錄下創建.env 文件
vim .env
按 i 後輸入以下內容：
#隨便寫，要求 16≥ 字符串 ≥32
JWT_SECRET=
#允許的域名，指的是你的前端域名，用","分開
ALLOWED_ORIGINS=
隨後按下 ESC，輸入
回到終端後，輸入
docker compose up -d
完成後，給一張免費 ssl 證書，然後反向代理 127.0.0.1:2333
此處使用寶塔面板
訪問 https://[你的域名]/proxy/qaqdmin 來進入後台面板
紅框位置改為前端（你站給人看的地址）
下一步 - LINK START
後端安裝結束～
Part 3 - 前端安裝（Shiro）#
前提：#
在 Shiro 主題中需要用到 Clerk，所以需要去 Clerk 官網（https://clerk.com）註冊一個帳號
註冊完之後控制台點擊 Add application
完成之後找到這些，把這兩個東西保存好，請勿洩露
後端配置：#
進入後台 - 附加功能 - 雲函數
點擊上面的 "+" 號
然後名稱填寫 shiro，引用填寫 theme，數據類型選 JSON
內容根據以下內容修改後覆蓋到右邊的框框中
{
"footer": {
"otherInfo": {
"date": "2020-{{now}}"
},
"linkSections": [
{
"name": "關於",
"links": [
{
"name": "關於本站",
"href": "/about-site"
},
{
"name": "關於我",
"href": "/about-me"
},
{
"name": "關於此項目",
"href": "https://github.com/innei/Shiro",
"external": true
}
]
},
{
"name": "更多",
"links": [
{
"name": "時間線",
"href": "/timeline"
},
{
"name": "友鏈",
"href": "/friends"
}
]
},
{
"name": "聯繫",
"links": [
{
"name": "寫留言",
"href": "/message"
},
{
"name": "發郵件",
"href": "mailto:wibus@qq.com",
"external": true
},
{
"name": "GitHub",
"href": "https://github.com/wibus-wee",
"external": true
}
]
}
]
},
"config": {
"site": {
"favicon": "/wibus.jpg"
},
"custom": {
"scripts": null,
"styles": null
},
"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": {
"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
}
}
}
}
記得改裡面的內容！！！！
改完後點擊右上角保存
部署：#
Vercel：#
進入 https://github.com/innei/Shiro
Fork 這個倉庫到自己帳號下
進入 Vercel-New Project，選擇剛才 Fork 的倉庫
等待構建
本地：#
首先 Fork 倉庫
然後在終端輸入
cd /opt/mx-space
git clone https://github.com/Innei/Shiro.git
cd Shiro
然後
vim .env
按 i 後輸入
#你的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=
按 ESC 後輸入 保存退出
然後輸入
npm install -g pnpm
pnpm i
pnpm build
這樣就是跑完了
我們把它作為系統服務啟動
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
反向代理 http://127.0.0.1:2323
添加 - 訪問前端網址 - Enjoy！
此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://blog.nekotc.cn/posts/default/4