建站之路

前言#

遙想當年上大學的時候，想擁有一個自己的網站，當時採用內網穿透的方式，在網上嫖了一個 html 模板，似乎像那麼回事，但事實上完全沒法持續開發或者維護。

自上班以來從沒有定居過，一直在搬家搬家搬家，再也沒有一個固定的 IP，內網穿透是不可能了，看到阮一峰、痞子衡等等大佬的個人博客，非常心癢，一直寄居在各個論壇裡面終究是不好的~~畢竟天天發水文~~。

最近看見一個非常非常漂亮的個人博客，也就是本站的模板工程，前後端分離，獨立管理，後端寫文章也非常方便，決定狠狠 fork 下來。

是這個大佬

Innei (Innei) (github.com)

本科畢業設計

畢業設計

開發出的開源 Mix-Space 博客，可以說是超級漂亮，剽竊起來超級方便。

[!NOTE]

我的方案是借助騰訊雲平台進行，相比官方文檔以及其他少量社區文檔，非專業性會強很多。由於並不是互聯網相關的工程師，在虛擬機裡嘗試了好久，官方或社區文檔總有好多不太理解的東西，結合各個文章終於探索出自己的建站之路。

其他參考:

官方文檔 Docker 部署 | Mix Space (mx-space.js.org)

社區文檔 https://www.miaoer.net/posts/blog/mx-install

所以一共需要這些準備:

可以上 github 的電腦 (推薦 steam++ 加速)
大約最多 800 塊錢（用於購買伺服器、域名、SSL 服務等等搞不定的網絡服務）

本文中需要花錢購買的域名和伺服器都放在最前面，因為在部署過程中很多點需要綁定這些內容，同時申請到實際發放需要一些時間 - 幾個小時到幾天不等。😒

預備工作#

1. 首先說明整體思路#

這個網站框架使用 Docker 技術進行了包裝，部署在伺服器上 (或者自己的 linux 本地) 以容器形式存在。

同時框架是前後端分離的，所以最終呈現在系統中是兩個容器。這兩個容器應用分別佔用了127.0.0.1的後端2333端口和前端2323端口，進行本地的前後端交互。

而期望使用類似 www.yono233.cn 的網址對博客進行訪問，需要的是將網址在 DNS 供應商那裡進行一下綁定 (花錢)，讓他們將網址與你伺服器的公網 IP 聯繫起來，然後將這個訪問的請求接引到本地127.0.0.1的前端2323端口。而且據我所知直接輸入網址，進入的幾乎一定是https://開頭的網站，這裡不贅述 https 和 http 的區別，反正 https 被認為是安全的，而這個安全認證及服務是需要自己進行的 (花錢)。同樣的，後端管理網址也需要進行這樣的綁定。

ps：127.0.0.1是本機環回 IP

2. 需要借助的網站工具#

以下是需要註冊帳號的網站，建議提前註冊或者另開一個瀏覽器放在一旁備用，因為涉及一些國外的網站，不確定註冊 or 訪問是否順利。

知名同性交友網站 https://github.com/

~~第三方帳號登錄驗證 https://dashboard.clerk.com/~~ 最新版中被廢棄

雲伺服器供應商 https://cloud.tencent.com/

大名鼎鼎的 MS 圖床 Image Upload - SM.MS - Simple Free Image Hosting

3. 確認自己擁有一個舉一反三的腦子#

首先起碼要清楚如何在命令行中打命令和複製粘貼；

其次是要具備把報錯信息拿去百度 or 狗屁通 (GPT) 的能力；

部署過程終究會有很多問題，可能你的方案或者當時的網絡環境也有所不同，是要自己解決的。

買一個域名#

在騰訊雲裡找到註冊域名的頁面，買一個滿意的域名，建議同時購買 DNS 解析服務，否則網站有一定概率上不去，還是需要給 DNS 供應商交保護費。

找到 SSL 證書的頁面，目前仍有免費證書可以申請，將頂級域名本體和帶www.的常用訪問頁都申請了。

我的方案是，不帶www.的作為博客後端，帶www.的作為博客前端。

當然如果你希望使用其他域名作為博客後端也可以，只不過後續配置中，所有的博客後端網址都替換成你期望的就好了。

開啟雲伺服器#

騰訊雲，這個輕量應用伺服器大概是最便宜的類型，買其中最便宜的就好，對於個人博客足夠了。

如果仍具有學生身份或者學生朋友，可以找找學生優惠。

最好選個帶一定 UI 的系統，我用的寶塔 linux 面板，大概是最傻瓜的網站部署了。

輕量應用伺服器 Lighthouse_香港輕量伺服器_海外輕量伺服器 - 騰訊雲 (tencent.com)

到如下的防火牆頁，將 2323、2333、8888、80、443 這幾個端口一一放通，否則後面是上不去伺服器內部署的網站的。

到如下的雲伺服器管理頁，依據提示，"登錄" 並複製它給出的命令，打在終端中，獲得初始的帳號密碼，將這些帳號密碼保存起來備用。

進入被我打碼的那個地址，那就是伺服器管理頁了。其中被我打碼的部分就是你自己的公網 IP，"面板端口" 默認是 8888，這四個字替成 8888 就好。進入管理頁應該如下圖。

然後點擊Docker頁，安裝 Docker 支持。

點擊軟件商店頁，安裝 PM2 管理器、 Nginx (免費的那個)，依次等待安裝完畢後，在 " 已安裝 “中找到 PM2 管理器，點擊進去，將 Node 版本切為最新版。

其他文檔沒有提到的點#

在如下的地址有一個文件，是編寫 Docker 代理網址的。不設置大陸可訪問的代理地址，會導致許多 docker 拉取失敗。特別是我們的博客後端，在我部署過程中產生了很大的困擾，國內常見的代理都拉不到，必須使用俄羅斯兄弟的代理。如果大陸互聯網環境改變，政策再收縮就要再想其他辦法。

將這個文件編輯為如下內容，設置了國內和俄羅斯的一些代理，為後續拉取 docker 做準備。

{
  "registry-mirrors": [
    "https://docker.rainbond.cc",
    "https://do.jiuy.eu.org",
    "https://docker.mirrors.ustc.edu.cn",
    "https://dockerproxy.com",
    "https://docker.nju.edu.cn",
    "https://docker.m.daocloud.io",
    "https://huecker.io",
    "https://registry.docker-cn.com",
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com",
    "https://dockerhub.timeweb.cloud",
    "https://noohub.ru"
  ]
}

部署博客後端#

[!NOTE]

在終端頁打命令，建議另開一個管理頁，有些文件在文件頁中進行編輯比較方便，命令行編輯太痛苦了

1. 檢查 Docker 安裝#

打如下命令，如果 Docker 安裝沒有問題，會返回兩個版本號

docker -v

docker compose version

2. 拉取配置文件#

打如下命令，拉取後端 docker 的配置模板

cd && mkdir -p mx-space/core && cd $_

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

拉取到的配置文件在如下位置，後續需要編輯的，此時終端應該也在這個文件夾下，後續終端都需要在這個文件夾下運行，如果一不小心關閉了當前的終端，需要 CD 到這個文件夾下打指令。

或許可以使用如下命令進行 cd

cd
cd mx-space
cd core

3. 編輯拉取到的配置文件#

如下圖是需要自己修改的部分，注意注意注意，這裡要另開管理面板網頁，進行文件編輯。避免此前我們的終端被關閉，CD 到原來的文件夾挺麻煩的，還容易出錯。

以下是我關於這部分的編輯，可以參考，並進行編輯、保存。

[!CAUTION]

JWT 密鑰 ：JWT_SECRET 需要填寫長度不小於 16 個字符，不大於 32 個字符的字符串，用於加密用戶的 JWT，務必保存好自己的密鑰，不要洩露給他人。其實對於僅僅想要做個人博客記錄日誌，這裡隨便亂填就好了

被允許的域名 ：ALLOWED_ORIGINS 需要填寫被允許的域名，通常是前端的域名，如果允許多個域名訪問，用英文逗號，分隔。如果還沒有買域名，這裡也只能亂填了，但是後續買域名後，這個後端需要修改配置文件重新構建容器，挺麻煩的，建議先買域名，這裡填好。

是否開啟加密 ：ENCRYPT_ENABLE 如果你確定要開啟加密，將 false 改為 true，開啟加密後，你需要在下方填寫加密密鑰。false 就好。

加密密鑰 ：ENCRYPT_KEY 如果你不知道這是什麼，那麼不建議開啟此功能，具體內容可參考 https://mx-space.js.org/usage/security.html 這裡建議不填就好

    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - DB_HOST=mongo
      - REDIS_HOST=redis
      - JWT_SECRET=xxxxxxxx_xxx_xxxxxx_xxxx
      - ALLOWED_ORIGINS=www.yono233.cn
      - ENCRYPT_ENABLE=false
      - ENCRYPT_KEY=

4. 啟動 Core#

再次提醒注意注意注意，此時終端應該運行在 2. 拉取配置文件時提到的那個文件夾，終端中命令行前的顯示應該如下。

[root@VM-20-5-opencloudos core]#

如果不是，也許可以使用如下命令 CD 到這裡

cd 
cd mx-space
cd core

打如下命令啟動 Core

docker compose pull
docker compose up -d

由於牆的問題，很多時候會啟動失敗，可以使用如下的重啟指令，再嘗試上面的啟動 Core 指令

如果還不行，可以自己重啟伺服器再嘗試啟動 Core

sudo systemctl daemon-reload
sudo systemctl restart docker

綁定博客後端#

1. 添加後端站點#

在網站頁進行添加站點，這裡域名填寫沒有”wwww.“的版本，作為後端域名。

其中的” 備註 “項可以隨便填寫，我填的是 "博客後端"。

2. 設置後端反向代理#

新建完成站點到設置 - 反向代理 - 添加反向代理

代理名字這裡方便管理就設置為 後端

目標 URL: http://127.0.0.1:2333 發送域名: $host

在這裡其實就是橋接到本地環回 IP 了

3. 修改後端配置文件#

保存後點擊保存後點擊 配置文件 將下方配置文件文本複製複製進去，記得全選刪掉以前的配置

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


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;

    #Set Nginx Cache


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileJsNv8TWb 1;
        expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

4. 配置後端 SSL 證書#

還記得買域名時申請的 SSL 嗎？回到 SSL 的頁面，如果申請已經完成，可以將 SSL 證書下載下來。

下載時選擇 Nginx 將 SSL 證書下載下來，打開壓縮包將後綴 .key 和 .pem 密鑰和證書文件的文本複製到 網站頁(先前添加站點的那裡) -站點設置 -SSL -其他證書 中。

需要檢查兩個文件最後是否多複製了一個空行，注意刪除。

保存這裡可以選擇開啟強制 HTTPS 建議開啟

5. 初始化博客後端#

假如你的後端地址是 test.cn, 前端地址計劃是www.test.cn（目前還沒有搭建前端）

訪問後端地址 https://test.cn/proxy/qaqdmin 進行初始化

出現類似如下的頁就成功了，圖片是從別人博客嫖的，其中已填寫的信息都不要在意

需要注意的是以下幾條

前端地址：填寫計劃中的前端地址，注意前綴 https://
API 地址 ：注意我們只認證了兩個網址test.cn和www.test.cn，所以這裡借助後端網址好了。填寫 https://test.cn/api/v2 , 其中 api/v2 字段是配置文件中決定的，不了解無需修改
後台地址 ：依據後端地址填寫為 https://test.cn/qaqdmin ，其中 /qaqdmin 字段是源碼文件決定的，不要修改
Gateway 地址 ：依據後端地址填寫為 https://test.cn 即可

到了 主人信息 這裡推薦全部填寫完

需要注意一下郵箱是指收取友鏈和評論通知的地址，後面在後端面板設定好郵箱提醒

密碼這裡是後端面板的密碼，確認一下密碼

頭像設置以及其他的所有圖片，建議找一個圖床，掛在圖床上，不然伺服器崩了這些博客要恢復圖片也挺麻煩的。（後來還是嫌棄外部圖床太慢，改用伺服器內部圖床了）

可以用這個圖床

大名鼎鼎的 MS 圖床 https://sm.ms/Image Upload - SM.MS - Simple Free Image Hosting

部署博客前端#

前端需要的網站工具就多了，建議先到前面 預備工作 -2.需要借助的網站工具 ，把各個網站都註冊一下

1.Clerk 創建項目這部分在最新版的博客中被廢棄#

~~以下節選自官方文檔，視頻 or 圖片均未上圖床，原作者伺服器崩掉則沒有圖片。~~

~~打開 Clerk 儀表盤 (opens in a new tab) 點擊 Add application 按鈕，填入你的博客名稱，並配置信息，點擊 Create application 按鈕，即可完成配置。~~

~~請你務必記住你的 Clerk 頁面的公鑰和私鑰，稍後將會用到。~~

2. 設置主題配置#

同樣來自官方文檔，仅作補充。

進入 Mix Space 後台 (也就是最後初始化博客後端時設置的後台地址)，進入「配置與雲函數」頁面，點擊右上角的新增按鈕，在編輯頁面中，填入以下設置：

名稱：shiro
引用：theme
數據類型：JSON
數據：（點擊下方的按鈕複製）

請注意，這份配置你需要自行修改成符合你的需求的配置。直接使用下面的配置可能會導致你的博客無法按照你的預期運行。（初次配置先不要改，能進前端後再慢慢修改其中的項目）

下面的配置可能不全，更多配置項的信息請移步配置項了解。

此外，配置也可寫成 yaml 格式，此時數據類型應選擇 YAML。

{
  "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
      }
    }
  }
}

點擊按鈕保存配置，隨後繼續進行下面的步驟。

3.github 中 fork 項目#

前端項目地址如下，也是大佬 innei 的項目

Innei/Shiro: 📜 A minimalist personal website embodying the purity of paper and freshness of snow. (github.com)

將這個項目 fork 進自己的代碼倉庫，不然後面在伺服器上可能拉不下來

4. 拉取前端#

這部分也是我創作的工作流。

回到雲伺服器的管理後台，新開一個終端

輸入以下指令，其中的 [email protected]:stbanana/Shiro.git部分替換為你自己的 git 地址，在 github 自己的項目中找到 Shiro，右上角的 Code 標裡面可以找到，與我這個類似的就可以了。

cd
cd mx-space

git clone [email protected]:stbanana/Shiro.git --depth=1

在 clone 過程中可能需要你輸自己 github 的帳號和密碼，我記得輸密碼的時候終端不會顯示，讓人誤以為自己沒輸入。(如果顯示，那就是我記錯了)

clone 成功後在對應地址中檢查文件，應該如我一樣。

在 Shiro 文件夾中有一個.env.template 文件，複製一份在原地，改名為.env，編輯其中的內容如下，記得保存

NEXT_PUBLIC_API_URL：設置為自己後端域名的 API 地址
NEXT_PUBLIC_GATEWAY_URL：設置為自己後端域名的 GATEWAY 地址
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY：clerk 網站中的公鑰
CLERK_SECRET_KEY：clerk 網站中的私鑰

5. 部署容器#

下面的命令行需要在 root/mx-space/Shiro 文件夾中運行終端，直接把 cd 指令也集成進去吧

cd
cd mx-space
cd Shiro

docker compose pull && docker compose up -d

沒有報錯那麼就部署成功了

綁定博客前端#

類似綁定博客後端的流程，所以這裡粘過來，僅修改少量細節

1. 添加前端站點#

在網站頁進行添加站點，這裡域名填寫有“www."的版本www.****，作為前端域名。

其中的” 備註 “項可以隨便填寫，我填的是 "博客前端"。

2. 設置前端反向代理#