特别感谢innei大佬开源mix-space和Shiro,让我一个完全不懂Node.js和CSS的人也能有一个个人网站
请做好准备,本文档只是一个指引,即使你完全按照本文档执行,也有很大可能遇到报错
请善用ai辅助你克服它们
重要声明
由于本人并无任何Node.js和CSS甚至HTML的学习经历,本指南仅供参考且仅适用于如何将其从零部署下来,
也非常欢迎任何访客指正我的任何错误
前期准备
硬件上
- 一台个人电脑 -> 用于链接服务器和本地预览
总不能在手机上链接吧(也不是不行) - 以及一个会问ai和举一反三的脑子
软件上
安装
Git-> 用于Clone GitHub仓库的内容以本地预览,如果不准备本地预览的话可以不用CodeBlock Loading...需要安装
pnpm-> 用于本地运行前端预览,如果不准备本地预览的话可以不用CodeBlock Loading...需要准备一个个人的GitHub账号 -> 用于Fork 前端Shiro的仓库并部署在Vercel上
其他 主要是要花钱的
- 一台云端轻量应用服务器 -> 用于部署后端
请至少保证你的服务器的系统满足以下要求:
我选用的为宝塔liunx面板
- 一个域名
Mix-space 后端部署
进入服务器安装docker
--- 根据个人经验,在首次进入宝塔面板时,可能会出现一个选择安装的界面,选择安装docker即可
--- 如果没有,可以参考官方文档:
使用以下命令测试或者验证docker是否安装:
CodeBlock Loading...如果没有安装好,可以使用以下方法进行安装: 当服务器在国内时,可以使用阿里云的脚本安装:
CodeBlock Loading...如果在国外,则可以使用官方脚本安装:
CodeBlock Loading...运行完安装脚本后,请再次运行验证命令以验证docker是否安装成功
拉取后端docker配置文件
- 参考官方文档,使用以下命令:
配置core启动配置文件
官方文档内的复制配置的功能已经足够方便与清晰,因此不在此赘述
绝对不是我懒得在这个界面上也实现这个功能
本部分请去参考官方文挡完成
启动core
进入服务器的mx-space/core文件夹下,运行以下命令
配置反向代理
- 以宝塔面板为例
进入宝塔面板后,选择网站->反向代理->添加反代进行配置
在配置界面......
施工中
至此,后端部署完毕,访问你的域名/proxy/qaqdmin来初始化和访问后端
前端部署
前提
- 后端已经部署完毕且可以正常访问
- 如果你选择使用Vercel部署前端,你需要拥有一个已经注册好的Github账号
配置后端
1、进入后端,在附加功能->配置与云函数界面添加配置找加号点就是了
2、在弹出的配置界面填写如下配置:
3、随后选中新建的文件(一般为/theme/shiro),在右侧进行编辑
初始配置如下,来自官方文档:
部署前端
以使用Vercel为例
1、登录你的github账号后进入Shiro仓库,点击Fork将其克隆到你的仓库中
2、进入Vercel,点击Sart Deploying,
3、