建站之路
前言
遥想当年上大学的时候，想拥有一个自己的网站，当时采用内网穿透的方式，在网上嫖了一个 html 模板，似乎像那么回事，但事实上完全没法持续开发或者维护。
自上班以来从没有定居过，一直在搬家搬家搬家，再也没有一个固定的 IP，内网穿透是不可能了，看到阮一峰、痞子衡等等大佬的个人博客，非常心痒，一直寄居在各个论坛里面终究是不好的毕竟天天发水文
最近看见一个非常非常漂亮的个人博客，也就是本站的模板工程，前后端分离，独立管理，后端写文章也非常方便，决定狠狠 fork 下来。
是这个大佬
本科毕业设计
开发出的开源 Mix-Space 博客 ，可以说是超级漂亮，剽窃起来超级方便。
Note我的方案是借助腾讯云平台进行，相比官方文档以及其他少量社区文档，非专业性会强很多。由于并不是互联网相关的工程师，在虚拟机里尝试了好久，官方或社区文档总有好多不太理解的东西，结合各个文章终于探索出自己的建站之路。
其他参考:
所以一共需要这些准备:
- 可以上 github 的电脑(推荐 steam++ 加速)
- 大约最多800块钱（用于购买服务器、域名、SSL 服务等等搞不定的网络服务）
本文中需要花钱购买的域名和服务器都放在最前面，因为在部署过程中很多点需要绑定这些内容，同时申请到实际发放需要一些时间-几个小时到几天不等。😒
初建站时对一切都还不熟悉，所以完全是拿钱开道，怎么方便怎么来。了解了几个月后，除了服务器的钱必须交，DNS、CDN、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 version2.拉取配置文件
打如下命令，拉取后端 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:i@innei.ren",
"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 的项目
将这个项目 fork 进自己的代码仓库，不然后面在服务器上可能拉不下来
4.拉取前端
这部分也是我原创的工作流。
回到云服务器的管理后台，新开一个终端
输入以下指令，其中的 git@github.com:stbanana/Shiro.git部分替换为你自己的 git 地址，在 github 自己的项目中找到 Shiro，右上角的 Code 标里面可以找到，与我这个类似的就可以了。
cd
cd mx-space
git clone git@github.com: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.设置前端反向代理
新建完成站点到设置-反向代理-添加反向代理
代理名字这里方便管理就设置为 前端
目标 URL: http://127.0.0.1:2323 发送域名: $host
与后端不同，这里需要填写2323端口
3.修改前端配置文件
保存后点击 保存后点击 配置文件 将下方配置文件文本复制复制进去，记得全选删掉以前的配置
这里的内容和后端内容是不同的!!!
#PROXY-START/
location ~* \/(feed|sitemap|atom.xml)
{
proxy_pass http://127.0.0.1:2333/$1;
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;
add_header Cache-Control max-age=60;
}
location /
{
proxy_pass http://127.0.0.1:2323;
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_fileSw1Jy3nG 0;
if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
{
set $static_fileSw1Jy3nG 1;
expires 12h;
}
if ( $static_fileSw1Jy3nG = 0 )
{
add_header Cache-Control no-cache;
}
}
#PROXY-END/4.部署容器
还记得买域名时申请的 SSL 吗？回到 SSL 的页面，如果申请已经完成，可以将 SSL 证书下载下来。
下载时选择 Nginx 将 SSL 证书下载下来，打开压缩包将后缀 .key 和 .pem 密钥和证书文件的文本复制到 网站页(先前添加站点的那里) -站点设置 -SSL -其他证书中。
需要检查两个文件最后是否多复制了一个空行，注意删除。
保存这里可以选择开启强制 HTTPS 建议开启
后记
还需要等至少24小时对我们的前端网址进行备案，不过大体框架都搭建完成，www.xxxx.xx 电脑应该是可以访问的。
注意备案时有一个备案文件需要摁手印拍照上传，可以多摁几个，我摁满一大片才通过，需要至少一个清晰完整的手印。所有备案流程都可以在线上进行，社恐+懒狗的福音。
在后端面板 设定-系统中有
- 网站设置
- SEO 优化
- 后台附加设置
- 文本设定
- 邮件通知设置
- 评论设置
- Bark 通知设定
- 友链设定
- 备份
- 百度推送设定
- Algolia Search
- 终端设定
这里就不一一讲解了
请参考 初次使用说明 | Mix Space 的文档中内容