因为Hexo是纯静态网页,所以需要借助第三方插件实现后台管理的功能,此次使用的是Qexo https://github.com/Qexo/Qexo
的第三方网页后台,而基于网页的后端的方便之处就在于,只要能访问网页,就可以随时进行写作和发布文章——当然能够发布文章的前提是已经完成了持续集成的配置。
又因为我的Hexo从最开始就用的hexo deploy来本地推送静态页(太懒了),所以相当于重新搭建一次Hexo。
此次使用vercel https://vercel.com/ 持续集成部署
注册账号
集成部署
注册GitHub账号
略
注册Vercel 账号
使用浏览器访问:https://vercel.com/signup
点击「Cotinue with GitHub」并使用 GitHub 账号授权登录。
新建Hexo项目并部署
从模板 创建一个 Hexo 应用,名称随意,输入完毕后点击「Continue」。
Vercel 自带的版本非最新版,建议部署后更新至最新版,以避免错误和问题的发生。
点击 GitHub 标签,输入你导入后的仓库名称(可随意),输入完毕点击「Continue」。
(当然顺序也可以反过来,在GitHub把Hexo官方的模板fork到自己仓库,然后再导入到Vercel)
可以看到 Vercel 已经自动识别出仓库是 Hexo 框架,点击「Deploy」。
Project Name 可以随意填写,但必须是唯一的。
随后 Vercel 就会开始部署,稍等片刻。
部署完毕后,Vercel 会撒花 🎉 庆祝。这时,点击页面中的「Visit」就可以访问站点了。
同时GitHub 中也已经自动创建了这个博客项目
到这里Vercel的持续集成就算结束了,但是没人会用这个默认主题和给定的域名吧?
更换主题和传统的本地部署方式差不多但又有些区别。
更换主题和自定义域名
更换第三方主题
首先,前往 Hexo 主题列表 找到你喜欢的主题。
点击主题的名称就可以进入到主题的 GitHub 地址。
点击侧边栏中的 Release 进入到最新的发行版下载地址。
没有的话就阅读主题的 README 寻找答案,一般情况下都是有的。
不支持直接下载的主题
滑动到页面底部,下载文件。你可以选择 .zip 压缩版本或是 .tar.gz 压缩版本。(解压后文件都一样)
解压下载下来的文件。
访问 https://vercel.com/dashboard ,找到并点击 你部署的博客项目的 卡片。
点击 图片中箭头指的位置 ,进入 GitHub 仓库。
将之前创建GitHub的Hexo下载到本地
解压在GitHub下载的文件,点击文件区域的 themes 目录。
将第三方主题文件夹放入themes目录下,
配置根目录下的config.yml文件和主题的config.yml文件(第三方主题的config.yml文件配置参考作者的readme文件)
安装插件
与本地部署不一样的地方是,在配置第三方主题文件的时候作者可能会用到一些Hexo的插件,本地部署直接npm下载,但是集成部署只存放源代码,所以需要修改根目录下package.json文件以便在部署的时候自动安装插件
打开package.json,找到 dependencies 一项。
在这里添加第三方主题需要的插件或者自己想要的插件。
例如,我要安装 2.1.0 版本的 hexo-generator-sitemap
插件:
我就需要在 dependencies
项中 添加以下的字段
1 | "hexo-generator-sitemap": "^2.1.0" |
不要忘记遵守 JSON 语法格式!具体可以百度一下。
剩下的就是用Git上传到GitHub,等待 Vercel 自动部署完毕即可。
Git上传的使用可参考猴子都能懂的GIT入门 | 贝格乐(Backlog)的入门篇
添加域名
在 Vercel 里找到自己的项目,在Setting下的Domains里设置,在输入框里添加自己的域名后点Add,然后再把记录添加到域名商的解析列表里,等待几分钟后便会生效。
到这里Vercel持续集成就算完成了,如何发布新文章?使用Git上传,也可以在GitHub直接编辑发布。
或者用第三方的伪后端比如HexoPlusPlus和Qexo。下面使用Qexo作为后端演示部署。
Qexo部署
申请 MongoDB
注册 MongoDB 账号 创建免费 MongoDB 数据库,区域一定要选择 AWS / N. Virginia (us-east-1) 在 Clusters 页面点击 CONNECT,按步骤设置允许所有 IP 地址的连接),创建数据库用户,并记录数据库连接信息,密码即为你所设置的值
fork(可以理解成复制)一份Qexo的源码到自己的仓库
略
一键部署
重新进入项目,在项目设置界面添加环境变量 Environment Variables
各个环境变量参考
名称 意义 示例 DOMAINS 你所允许通信的安全域名 注意双引号而且是英文半角 [“.vercel.app”, “127.0.0.1”, “.yoursite.com”] MONGODB_HOST MongoDB 数据库连接地址 mongodb+srv://cluster0.xxxx.mongodb.net MONGODB_PORT MongoDB 数据库通信端口 默认应填写 27017 27017 MONGODB_USER MongoDB 数据库用户名 abudu MONGODB_DB MongoDB 数据库名 Cluster0 MONGODB_PASS MongoDB 数据库密码 JWo0xxxxxxxx
在 Deployments 点击 Redeploy 开始部署,若没有 Error 信息即可打开域名进入初始化引导
获取一个Github密钥
略
配置后台
如果访问Qexo的网址,会发现仍需要一些配置操作,跟着向导走或者参考官方文档的Github 配置应该不会有什么大问题,图床需不需要填还是看自己的需求,如果博客里需要放图片的话,可以考虑加一个图床。
这样基本上整个流程就算完成了