搭建自己的博客 - 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 面板或寶塔面板，二者選其一即可：

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

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

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

docker -v

docker compose version

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

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

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

在 Google Cloud 中，防火牆控制台的路徑

部署博客後端#

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

# 創建目錄
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保存退出。

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命令生成。

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

docker compose up -d

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

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

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

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

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

    ## 反向代理开始
    ## 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，填入以下內容：

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，等待部署完成