建設の道

前言#

遥想当年上大学的时候，想拥有一个自己的网站，当时采用内网穿透的方式，在网上嫖了一个 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. 设置前端反向代理#