Github Page+Hexo+Fluid 搭建博客

我希望结合自己零基础地搭建博客的经历，通过本文对教程中较为含糊的步骤进行解释，以帮助小白。本文以这篇文章为基础进行 GitHub Pages + hexo +Fluid 主题的博客的搭建，本文主要记录搭建过程中遇到的一些问题以及解决方法。

博客搭建

1. 在安装 Git 的时候没有进行邮箱的配置，似乎没有问题。

2. 在建立新的仓库（repository）的时候，注意不要修改默认的 Public，只要填上 <用户名>.github.io 就可以了。

3. 如下修改 Hexo 博客目录中的 _config.yml：
   theme: fluid # 指定主题
   language: zh-CN # 指定语言，会影响主题显示的语言，按需修改

   • 注意这一步以及下面所有需要打开文件进行修改的步骤，都建议通过 VS Code 文本编辑器来进行。
   • theme 实际上就是储存在 hexo 安装位置 C:\Users\<用户名>\hexo-blog 里的 themes 中的文件夹，这也是为什么上一步需要把解压后的文件夹改名。
   • language 可以通过 C:\Users\<用户名>\hexo-blog\themes\fluid\languages 中的文件进行查询。比如如果希望 Fluid 使用台湾繁体那就将其改为 zh-TW。

4. 第九步发布到 GitHub Pages中，要获取 repo 的链接，在你的仓库的首页点击 Code 后复制 HTTPS 下的链接即可。

5. 进行备份，只需要根据这篇文章操作即可，文章说 3.x.x 用的命令，现在更新到 5.xx 的 hexo 依然可以使用。进行还原，参照这篇文章

我用 Synology Drive Client 和 OneDriveBully 来对文件进行直接的实时备份。

域名设置

参考了这个问答。还算顺利。

我在 Cloudflare 上购买了这个域名，看重的是 Cloudflare 每年的价格都是基本一致的，应该不会出现第二年天价续费的情况，而且它支持 PayPal 支付，还有部分中文支持。

购买域名后，点击网站，选择刚刚购买的域名，点击 DNS，点击添加记录，添加两个 CNAME 类型，目标分别写上网站地址和 www ，网站地址如我的 breadkiller.com ，内容均为 <仓库名>.github.io，其它默认，保存即可。其余步骤根据上述链接可以解决，记得做这一步会很方便：

把 CNAME 文件添加到 source 文件夹里

Cloudflare 侧边栏上像速度和安全性这样的，内部的选项可以酌情勾选。降低 banner 头图的分辨率（大小）可以有效加快加载速度，1920*1080 就足够了。

图床设置

我已有一台黑群晖，但担忧于它的稳定性，我选择使用 PicGo + GitHub + Jsdelivr 的组合。根据这篇教程设置，一路顺利，唯一需要注意的是 PicGo 在托盘中需要双击才能打开。

Windows11 有时会无法进行拖拽添加文件的操作，用
Windows11DragAndDropToTaskbarFix 来解决。

Fluid 主题配置

官方文档很详尽，只记录几点。

• hexo s 用于启动本地服务器。在执行这个命令后，可以通过本地浏览器访问 http://localhost:4000/ 来查看当前 Hexo 博客的效果。这样可以在本地预览、测试博客主题、排版等效果，而不必每次修改后都上传到服务器上才能查看效果，在完成所有修改后，用 hexo g -d 生成并来上传到服务器。不过，当更新了 _config.fluid.yml 后，需要使用用它重新生成静态页面，才能使更改生效。

• 参照这篇文章进行字体的设置。同样的，可以在 fonts.google.com 中根据语言选择想要的字体，在点击右上角的 Selected family 获取相关代码，把 <link> 填入 head.ejs 中，把 CSS rules to specify families 中找到该字体的名字填入 font_family （末尾无分号）和 custom.css，注意引号即可。我觉得 Serif 不耐看，霞鹜文楷作为正文又有点轻飘，最终选择了 Noto Sans 并选择字重 Medium 500，虽然在移动设备上观察时标题略粗，但正文的清晰度比 400 字重更佳，而且考虑到读者（如果有）和我一般都是在 PC 上进入本站。
  设置字体之前记得将浏览器的字体插件关闭。当时还以为设置不生效搞了半天才想起开着 stylus 的全局字体。

• 想统一所有文章的头图，在文档中描述如下：

  文章页顶部大图
  默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter (opens new window)中指定 banner_img 属性。

  其实在 _config.fluid.yml 中通过 Ctrl + F 找不到 post.banner_img 这一项。实际上它的位置在

    post:
  banner_img: /img/default.png
  banner_img_height: 70
  banner_mask_alpha: 0.3

  搜索 banner_img 并移动几次就能找到。

• 根据文档，关闭自动摘要并且不设定手动摘要，摘要处就会留空，具体做法是删掉 front_matter 中的 excerpt: 字段。

• 有时候 hexo g 时会报错 reason: 'can not read a block mapping entry; a multiline key may not be an implicit key' 意思是 yaml 格式不正确，可以用在线 yaml 验证器来进行纠正，不过如果发现并没有什么错误但是它仍然报错，就重启 CMD 再次输入指令。

• 遇到报错 fatal: unable to access 'https://github.com/xx/xx.GitHub.io.git/': Recv failure: Connection was reset，根据这篇文章设置代理。不知为何网上说的修改 repo 之类的方法在我这里无效。

• 遇到了 "OperationalError:' EPERM:' operation not permitted, unlink …" 报错，如果重启并使用管理员模式重新打开 CMD 无法解决，百试不爽的方法是直接删除对应的文件夹（其实都是空的），重启再次输入指令。也可以根据这篇文章进行操作。

• 幾個月沒登錄，突然要求輸入帳戶密碼，而密碼又無法輸入。解決方式是用 SSH 登錄，參考這篇文章。

  • git bash 中只需要順着文章裏的命令輸入，不需要輸入密碼，留空回車即可。
  • GitHub 添加公共密钥：Setting->SSH and GPG keys->new SSH Key
  • .deploy_git 可以直接刪除。

写作

• 因为博客要求文章前面要有 front_matter，使用 markdownlint 在为博客写作时会报错 MD25，可以通过如下设置

  vscode => 扩展（ctrl+shift+X） => 单击 markdownlint => 单击「卸载」右边的齿轮 => 扩展设置 => 找到「在 settings.json 中编辑」 => 在 "markdownlint.config": { } 括号下添加这个代码："MD025":false,

• 原文。给日文漢字かんじ注假名，需要使用 html 语法，这时候 markdownlint 就会报错 MD033。解决方法：
  vscode->扩展（ctrl+shift+X）->单击 maekdownlint->单击「卸载」右边的齿轮->扩展设置->找到 fouse mode 和 config 项并打开编辑->末尾修改或添加为如下代码：

  "markdownlint.config": {
    "default": true,
    "MD033": false // 加这一句
  },