将Hexo部署至Cloudflare

经验之谈
, , ,

写在开头

这是一篇计划外的文章。原本想着通过部署Typecho安度晚年，但是很遗憾网站才上线便遭到朋友唾弃嫌卡。于是使用了我观望很久的Hexo框架。本文对于部署，配置将一笔带过，网上有很多很好的教程教你如何从本地hexo init后push到GitHub再通过Cloudflare Pages部署。

本文将着重强调踩的坑。

部署Hexo

  1. 在本机安装好npm，node等乱七八糟的依赖之后，使用npm install hexo-cli -g安装

  2. 在文件夹内通过hexo init执行Hexo初始化，此处遇到第一个坑

  3. 本博客使用Cactus作为主题，非常简洁

  4. 搞点文章来

  5. 安装各种乱七八糟的插件，如评论，分析等

  6. 推送GitHub，此处遇到第二个坑

  7. 链接至Cloudflare Pages

  8. Cloudflare Pages部署，此处遇到第三个坑

  9. 绑定自定义域并完成

踩坑记录

Hexo初始化需要空文件夹

这个问题纯粹是本人心急吃不了热豆腐，想着快速把这个部署上线。并且本人长期采用GitHub网页上先开仓库，clone到本地。但是好巧不巧我想当然的在GitHub上初始化了Node模板的.gitignore，导致在执行hexo init的时候报错文件夹非空。

解决方案：

  1. 仓库内创建一个文件夹
  2. 文件夹内hexo init
  3. 把里面文件复制出来，能替换的就替换

主题无法推送

如果你是根据Cactus官方仓库完成的安装而不是从第三方下载的歪门邪道压缩包，你应该是通过以下命令安装的

1
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

但是坏就坏在这个git clone，导致仓库内同时出现了两个.git文件夹，进而push失败。

本人解决方案比较外门邪道，但是好歹解决问题：

考虑到Cactus主题的更新频率约为半年一此，因此直接删除theme/cactus内的.git文件夹再推送即解决问题

YN0028部署错误

在Cloudflare Pages从GitHub存储库拉取内容的时候，进入到Build application的时候提示报错，我们重点关注以下内容：

1
2
3
4
16:55:44.717	Using v2 root directory strategy
16:55:49.108	➤ YN0000: ┌ Post-resolution validation
16:55:49.109	➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
16:55:49.109	➤ YN0000: └ Completed

其中v2这个字眼让我警觉起来，于是翻找Cloudflare文档，发现v2与v1中对于lock file处理逻辑不同，于是在项目设置中修改Build system version为Version 1即可解决问题。

Cloudflare Build system version

本以为这个问题到此告一段落，但是根据报错发现，v1里面的Node.js版本过于老旧（12.18.0）而Hexo需要>=14才可以正常工作，于是通过添加环境变量NODE_VERSION与本机同步（18.18.0）解决问题。

图片上传

本来这篇文章已经上传了，但是发现上传的时候出现本地图片无法正常显示，查看HTML发现图片被错误的生成为/$filename但是实际上site/$filename中并没有这个文件，真正的图片存在于site/post/abbr_id/$filename，于是开始各种CSDN，博客园，各种小博客，尝试之后发现都没有作用，接下来讲解一下解决方案

  1. 如果你根据各种博客手动安装了hexo-asset-image，请使用npm remove删除掉

  2. 在_config.yml中添加

    1
    2
    3
    marked:
      prependRoot: true
      postAsset: true

  3. 将post_asset_folder置为true

  4. Markdown语法为![Any Alternative](filename)

  5. 如果你使用Typora，请按照下图设置你的图片位置

    Typora Image Settings

  6. 在上传时批量将./post.title.encoded替换为空

总结

虽然这并不是我第一次通过Cloudflare Pages部署项目，但是确实是第一次不依赖Cloudflare 部署模板完成部署，希望本人可以从此次部署中吸取经验。