GitHub Actions部署Hexo小结

一、关于CICD

传送门:什么是CI/CD/CD

二、Hexo

2.1 博客搭建

• Hexo官方文档
• 搭建总结

2.2 博客主题

• NexT 主题配置 官方
• Hexo-Next 主题博客个性化配置

三、自动部署

3.1 GitHub Actions部署博客

使用GitHub Actions自动部署
注意:Deploy key添加到个人或者博客源码的 settings 里面都可以

3.2 Travis CI部署博客

• Hexo＋Travis-ci＋Github构建自动化博客
• GitHub Token + Travis CI 自动部署项目应用
• GitHub SSH + Travis CI 自动部署项目应用

四、使用中遇到的问题

4.1 Hexo 使用 Github Actions 自动发布至 Github Pages 时,生成的 html 页面空白,没有css/js等文件

• 原因: 由于主题是 git clone 下来的,主题目录下生成了 .git 目录,导致和 hexo 根目录下 .git 冲突了,commit 时没有把主题 push 上去导致的。
  部署的博客发布

• 解决: 删除本地主题中的.git文件夹,上传到远程仓库

4.2 解决hexo博客网页无法使用图片问题

npm install hexo-asset-image --save # 安装hexo插件

# 这里还要注意修改_config.yml中的一个点
……
post_asset_folder: true
……

hexo new test       # 生成新的网页

位置在 test/source/_posts下，会同时生成test目录和test.md 网页，将需要的图片放置到test目录下，test.md就可以正常解析了，注意：要在图片路径直接写成同目录下即可。

image.png

4.3 解决hexo博客乱码

好不容易解决无法访问的问题，结果打开网站是乱码？？？

4.4 hexo部署后，CNAME会被自动删除

解决: 将需要上传至github的内容放在source文件夹，例如CNAME、favicon.ico、images等

参考文档：

• 使用 GitHub Actions 实现 Hexo 博客自动部署
• gitee+hexo搭建个人博客
• Hexo 使用 Github Actions 自动发布至 Github Pages 时，生成的 html 页面空白