Github Page+Hexo+Fluid 搭建博客

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 这一项。实际上它的位置在

    1
    2
    3
    4
      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 项并打开编辑->末尾修改或添加为如下代码:

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

Github Page+Hexo+Fluid 搭建博客
https://breadkiller.com/2023/04/14/Guide-to-Building-a-Blog.html
作者
BreadKiller
更新于
2024年3月16日
许可协议