搭建自己的博客 - Mix Space 及Shiro主題部署教程

::: warning
本文中所出現的所有網域、項目與接口在本文發出後均停止服務，僅供演示使用
:::

最終結果呈現

前期準備

請在GitHub、Clerk、Vercel註冊自己的帳號，此處不再演示。

配置網域

搭建個人博客的第一步，便是擁有自己的網域，如果你還沒有，可以前往Dynadot購買，在此可以使用我的優惠碼8E9O6bh6c9B8y6l以獲得五美元的優惠。

此處以在 Dynadot 購買nskr.blog為例。

介於 Cloudflare 提供了諸多優化站點訪問，保障站點安全的服務，我們在此選擇將站點託管至Cloudflare。

首先需要在 Cloudflare 中加入自己已購買的網域，並令其掃描現有的 DNS 解析。

隨後複製 Cloudflare 提供的 DNS 伺服器，回到 Dynadot 控制台，在 DNS 設定處選擇網域名稱伺服器，並填入已複製的內容。

配置伺服器

在完成有關網域的相關設定後，我們便需要進行伺服器的配置。我在此選擇的是Google Cloud，在綁定貸記卡後可以獲得 300 美元的贈金，有效期三個月。

根據自己的需求配置和購買，我按照個人習慣選擇了 Ubuntu 的系統鏡像。注意在此處需開啟「允許 HTTP 流量」、「允許 HTTPS 流量」兩個選項。

在伺服器構建完畢後，我們可以獲得這一伺服器的公網 IP。我們需要複製這一 IP 並在 Cloudflare 的控制台中配置網域解析，將api.nskr.blog指向自己的伺服器。（實際上，在此處無需參照影片中的操作，同時解析 @.nskr.blog，因為後面需要將其解析到 Vercel 的伺服器上）

在完成前面的操作後，我們通過 SSH 連結自己的伺服器。

為了方便管理，我們可以安裝 1Panel 面板或寶塔面板，二者選其一即可：

Copy
#安裝1Panel
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh

Copy
#安裝寶塔面板
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

這安裝這兩個面板後都會自動安裝 Docker 與 Docker-compose，可以通過下面的命令分別檢查：

Copy
docker -v

Copy
docker compose version

如果伺服器沒有正確輸出已安裝版本號，可以執行以下命令即可：

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

在完成上面的步驟後，請前往伺服器控制台開放相關端口，面板所需端口可以在 SSH 介面查詢，博客所需端口為2323與2333：

部署博客後端

首先，需要拉取配置文件：

Copy
# 創建目錄
cd && mkdir -p mx-space/core && cd $_

# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

並在mx-space/core目錄下新建.env文件並填入以下內容（請根據自身需要進行修改）：

有關vim的使用可以自行學習，在此僅提及與部署相關的操作：

使用vim .env創建並打開.env文件，隨後輸入i切換至 insert 模式，在輸入完變量後按ESC鍵進入命令模式，輸入:wq保存退出。

Copy
JWT_SECRET=nishikoriyuinishikoriyui
ALLOWED_ORIGINS= nskr.blog
ENCRYPT_ENABLE=false
ENCRYPT_KEY=

JWT_SECRET 長度不小於 16 個字符，不大於 32 個字符，用於加密 JWT。

ALLOWED_ORIGINS 為被允許的域名，如果存在多個需用英文逗號分割。

ENCRYPT_ENABLE 是否開啟加密，填寫true或false。

ENCRYPT_KEY 為加密密鑰，如不開啟加密，則無需填寫。密鑰長度需為 64 位且僅包含小寫字母與數字，可通過openssl rand -hex 32命令生成。

完成上面的操作後，可通過下面的命令拉取鏡像並運行後端核心容器：

Copy
docker compose up -d

完成後端部署後，我們需要配置反向代理。使用單域名的方案可以參照官方文檔 ，我在此選擇借助1Panel進行雙域名配置，寶塔面板配置方法與之類似，在此不再演示。

首先需要在 1Panel 安裝OpenResty程式，用於網站部署。

隨後，在「網站」選擇卡中搭建靜態網站api.nskr.blog

完成網站搭建後，需要申請 SSL 證書，在此不再演示。

搭建完成後，選擇「配置」，並將下面的內容粘貼至網站配置文件：

Copy
## 反向代理开始
## WebSocket
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;
}
## Others
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;
}
## 反向代理结束

這樣配置後，

API 地址為 https://api.nskr.blog/api/v2

GateWay 為 https://api.nskr.blog/

博客後端面板為 https://api.nskr.blog/proxy/qaqdmin

部署博客前端

在此我們使用 Vercel 的 Serverless 服務進行前端的部署，這可以有效減輕我們伺服器的壓力，從而減少在伺服器上的開支。

我們首先需要在 GitHub 上克隆 Shiro 的官方倉庫。

隨後，我們需要打開Clerk，並創建新應用，獲得公鑰和私鑰。

隨後我們需要訪問博客的後端面板，在配置雲函數。

在編輯面板中填入：

名稱：shiro

引用：theme

數據類型：JSON

並複製該連結的內容並填入（此處直接引用本站點的配置文件，請根據自身需要進行修改）：

在完成上述步驟之後，前往Vercel，創建新項目，在配置頁面中，点击 Environment Variables，填入以下內容：

Copy
NEXT_PUBLIC_API_URL=https://api.nskr.blog/api/v2
NEXT_PUBLIC_GATEWAY_URL=https://api.nskr.blog
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_•••••••••••••••••••••••••••••••••••••••••••
CLERK_SECRET_KEY=sk_test_•••••••••••••••••••••••••••••••••••••••••••

NEXT_PUBLIC_API_URL 為 API 地址

NEXT_PUBLIC_GATEWAY_URL 為 Gateway 地址

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 是 Clerk 獲得的公鑰

CLERK_SECRET_KEY=sk_test_・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・是在 Clerk 獲得的私鑰

隨後點擊Deploy，等待部署完成

在部署完成之後，將自己的網域名稱與之綁定，並將博客連結在 Cloudflare 上解析到 Vercel 的服務器。

就此，基本的部署便已經完成。

參考資料

Mix Space 官方文檔 https://mx-space.js.org/

此文由 Mix Space 同步更新至 xLog
原始链接为 https://ursprung.io/posts/tech/%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2%20-%20Mix%20Space%20%E5%8F%8AShiro%E4%B8%BB%E9%A1%8C%E9%83%A8%E7%BD%B2%E6%95%99%E7%A8%8B