我是基于ChatGPT-turbo-3.5实现的AI助手，在此网站上负责整理和概括文章
文章作者在一整天里折腾自己的博客网站，遇到了许多技术问题和坑。尝试使用Shiro博客主题，但在部署过程中遇到了许多挑战，包括反代配置问题、websocket连接问题等。之后转向使用Hexo博客系统，成功部署并对接评论系统和站内搜索。最终将博客托管到Vercel并通过Cloudflare代理，最终完成了博客搭建。文章总结了一天的折腾经历，自我反省并表示接下来会继续努力赶进度。
# Prologue
最近发现只要是大学计算机系的教师，基本都有自己的个人网站，然后通过翻我导师读博时的导师的网站，我发现我导师的导师竟然参与了 Kotlin , Java , C# 等语言的开发，顿时惊为天人。
考虑到我也是个学计算机的，是时候折腾一个自己的博客网站了。
只是...
没想到我搞了一整天...
真不是我的技术问题，我知道如何使用 CentOS/Ubuntu ，也知道 Node.JS 怎么用，也知道如何在 nginx/Apache 反代，也知道怎么做 SSL ，也知道如何使用 docker 和 docker compose ，但我就是搞了一整天...
# Shiro 博客主题
在网上冲浪时看到了一个叫做 Shiro 的博客网站前端，非常好看，寻思着自己去对接一下吧，没想到这是噩梦的开端。。。
# Mix Space
是的，这个博客系统有个后端需要部署，然后需要在后端里去发表文章之类的。
他的要求很简单，只需要以下配置：
- Linux / macOS
- Linux 内核版本 >= 4.19
- Memory >= 1G
于是我掏出了我白嫖的 1 核 1G 内存的 CentOS 机子开始了倒腾
五分钟就用 Docker 部署成功了。
我以为很顺利，结果是我天真了
因为我当时打算前后端共用一个域名，是的，就是 xgamedev.net，于是我需要把后端和前端的路径反代到不同的地方
# 坑 1
他们网站上没有提供 Apache 的反代配置写法，但影响不大，看看 nginx 的就能写个一模一样的。
但是！！请各位看官看下面的代码：
## API 地址 | |
location /api/v2 { | |
proxy_pass http://127.0.0.1:2333/api/v2; | |
} | |
## 简读 render 地址 | |
location /render { | |
proxy_pass http://127.0.0.1:2333/render; | |
} | |
## Kami 地址 | |
location / { | |
proxy_pass http://127.0.0.1:2323; | |
} | |
## 后台地址 | |
location /qaqdmin { | |
proxy_pass http://127.0.0.1:2333/proxy/qaqdmin; | |
} |
有没有发现，最后两条的顺序反了，如果将 server.com/* 都反代到 127.0.0.1:2323/* 的话，那 server.com/qaqdmin 也会反代到 127.0.0.1:2323/qaqdmin ！
# 坑 2
你以为你把反代顺序写对就行了？你太天真了...
虽然你把 /qaqdmin 反代到了 /proxy/qaqdmin ，但是他还需要请求 /proxy/css 跟 /proxy/js 的资源，但是资源的请求路径是基于当前路径去拼接的，意思是说你反代后进入后台，他们会请求 server.com/js 而不是 server.com/proxy/js 。
那咋办呢，很简单，再加一条反代
ProxyPass /proxy http://127.0.0.1:2323/proxy | |
ProxyPassReverse /proxy http://127.0.0.1:2323/proxy |
好的，终于能看得到后台了，泪目了。
# 坑 3
你猜怎么着，他们还要反代 ws：
## WebSocket 地址 | |
location /socket.io { | |
proxy_set_header Upgrade $http_upgrade; | |
proxy_set_header Connection "Upgrade"; | |
proxy_buffering off; | |
proxy_set_header Host $host; | |
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; | |
proxy_set_header X-Forwarded-Proto $scheme; | |
proxy_pass http://127.0.0.1:2333/socket.io; | |
} |
这个我承认可能是技术问题，我在 Apache 下用 RewriteCond + RewriteRule 没能成功使 wss 连接成功。
不过我寻思着没啥大问题，就继续去部署前端了，然后更痛苦的事情发生了。
# Shiro
别的不说，这个部署教程有点东西，让我学会了 2 个东西：
Vercel- 快速部署 web 应用，自动监听GitHub仓库的更新，每次更新后自动deploy最新代码，并且挂个CNAME到DNS就能解析到自己域名了，很方便Clerk- 适用于 web 的聚合登录插件，虽然不知道为什么博客网站要搞这个，但是这个东西是挺有用的
然后跟着教程部署就很直接，在这两个平台开账号拿秘钥，存到 .env ，接着 GitHub 上 Fork 个 Shiro 代码，然后用 Vercel 部署出来就行。结果还是翻车了
# 坑 1
这个主题会调用一个叫做 /fn/ps/update 的云函数，然而默认这玩意儿是不存在的，需要在云函数的地方额外下载 Shiro 扩展包（文档里没提及，需要自己找）。
这玩意下载下来后也不叫 /fn/ps/update ，这个 API 的路径在 /fn/shiro/ps/update 。。。
# 坑 2
有个功能是利用 websocket 长连接去统计在线人数，然而因为我没搞定 wss 的反代，所以这个功能废了。。。
# 坑 3
这个前端主题要求网站持有者用 Clerk 登入后拿 user_id ，搭配 jwt_pem 和 clerk_secretkey 去启动鉴权，然后理论上博客首页会显示我的头像。然而并没显示出来，原理不明（Clerk 我肯定是配置好了，甚至绑定了自己的域名切到了线上模式）
# 坑 4
新用户注册后不会跳转回博客页，而是会停留在你在 Clerk 分配的用户信息页，没找到解决方案。
# 坑 5
因为用了 Vercel ，会需要挂个 CNAME 给域名去做 DNS ，所以实际上不能前后端共用一个域名，至于为什么，因为前端的域名需要用 CNAME 记录（如果你不用 Vercel 而是自己部署那当我没说）
# 坑 6
因为前后端站点分离了，遇到了跨域问题，经典。
在 Apache 下直接改 HEADER 就行，在 nginx 下就搞笑了，如果你加了允许请求源地址的 header，他的网页程序会再给你加一次，所以你每次用 nginx 去加这个 header 前得先重置一下该 header。。。
# 后续
我一度怀疑是因为我用了 Apache ，而他们官方推荐 nginx 的问题，于是我又搞了一台服务器，部署了 nginx，然后又开始崩溃了。。。
# 坑 1
我新的机器是 ARM 的，他们没对应平台的 docker image ，然后就算你强行指定 docker 的 platform 为 amd64 ，他里面要进行 bash exec ，还会出现格式不兼容的报错。。。
# 坑 2
我不用 docker，我自己编译源码总行吧，再看稳定，来了一句源码编译有 Bug，只推荐 docker 运行，我直呼好家伙。。。
# 坑 3
退而求次，我用我自己家里的 MacBookPro （Intel 芯片）去部署，再内网穿透出去得了。然后，确实能行，但是用了 nginx 也会遇到上述的全部问题。
# 总结
看了下这套架构，作者实力是有的，但是部署难度真的高，关键文档不全，同时没有社区，但毕竟是新出的东西，未来可期吧。
说实话我看有数十个人部署成功了，真不知道咋做到的
# Hexo 博客
是的，我又回归 Hexo 了，这个博客系统我高中时就在用，只是一直没找到好看的主题。
但我现在找到了 Shoka 主题，快速部署，美滋滋。
不过对接评论系统有点小坑：
LeanCloud 海外版不知道为什么对跨域的限制比国内版的严格，我一直没对接成功评论，换成国内版就好了。
最后我再对接了一下 Algolia 做站内搜索，同时写了个 Git 事件，当我提交更新的时候自动编译搜索信息并提交给 Algolia ，自动化真的美滋滋。
最后的最后我把这个站点托管到了 Vercel 去编译，然后再把 @.xgamedev.net 解析到我自己的服务器，挂载 Cloudflare 代理下，写了个 RewriteRule 把全部 xgamedev.net 的请求转发到这个站点（ www.xgamedev.net ），于是我的博客就算是搞定了。
# Epilogue
今天真的是从早到晚折腾了一天，主要是我自诩还是有点计算机水平的，对服务器和 Web 开发也有一定基础，都能折腾这么久，着实汗颜。。。。
而且最近学校作业多的一批，今天浪费了一天时间，一个作业都没写，有点无奈。。。
后续几天得开始拼命赶进度了，有空我再写点代码方面的博客。
