Hexo框架+Fluid主题+GitHub Pages搭建个人博客

博客框架：Hexo

web框架

之前手搓的网页我还是不太满意，一方面还是觉得丑，另一方面如果要添加博客文章的话，还得转成HTML格式。这种东西肯定有前人已经造过轮子了，自己再造一遍就Duck Bull Bee了。所以我尝试了使用模版框架来搭建个人网站。目前主流的web前端框架有：Vue、React、Bootstrap等。不过感觉这些对于写博客而言有点太庞杂了。

另外还有WordPress、Typecho这种动态博客框架。不过目前对我来说静态博客就够了，动态网站还需要买服务器什么的才行，而像学校的FTP个人主页还有GitHub Pages都只支持静态网站。

静态博客框架主要有：

• Jekyll：基于Ruby语言，GitHub使用的就是Jekyll。

• Hexo：基于Node.js。

• Hugo：基于Go语言。

我最后选择了Hexo，主要是我对JavaScript相对熟悉一点，而且据说Hexo比起Jekyll也更快一些。

安装Hexo

Hexo是基于Node.js的，首先要先安装Node.js，为了以后需要时能够方便切换不同版本的Node.js，我先安装了一个Node.js版本管理工具：nvm。然后使用了最新的LTS版本：Node.js v16。

另外，根据文档 | Hexo，还需要安装git，我之前已经安装过了。

安装好node.js后在终端使用下面的命令安装hexo：

npm install -g hexo-cli

然后建立一个目标文件夹，在该文件夹处打开终端输入：

hexo init blog
cd blog
npm install

第一行新建了一个名为blog的子文件夹并初始化，第二行我们进入该文件夹，然后第三行会安装相关依赖。之后的操作都将会在这个名为blog的文件夹内进行，我们称之为博客目录。

博客主题：Fluid

Hexo官网给出了许多主题：Themes | Hexo，一番挑选后觉得Fluid主题还挺好看的。

主要吸引我的是打字机的动效（虽然别的主题可能也有？），另外我想要的功能也基本都有，看了下GitHub上hexo-theme-fluid似乎也挺活跃的，而且Hexo Fluid 用户手册也比较详细，所以就决定是它了。（BTW，听说Hexo最成熟的主题是NexT，许多人都在用。）

安装主题

安装主题的方法，在Fluid的GitHub和用户手册上都有介绍。其实都是把主题的项目文件夹拷到博客目录/themes文件夹下，然后重命名文件夹为fluid即可。我则是git clone了Fluid的GitHub仓库。

安装后还需要告诉Hexo指定的主题，修改博客目录中的 _config.yml文件：

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

然后在博客目录处新建_config.fluid.yml，并将博客目录/themes/fluid/_config.yml的内容复制粘贴过来，Hexo会优先使用_config.fluid.yml作为主题配置文件。

主题配置可以参考配置指南 | Hexo Fluid 用户手册。下面我只挑几个说一下。

首页标语

首页的slogan使用了Hitokoto - 一言提供的API，每次一句随机的格言。

设置主题配置文件为：

slogan:
  enable: true
  api:
    enable: true
    url: "https://v1.hitokoto.cn/?c=k&encode=json"
    method: "GET"
    headers: {}
    keys: ["hitokoto"]

然而这样的话只能显示句子内容，并不会显示作者和出处，这里的keys虽然是列表，但实际上只会显示json文件中的一项，另外如果我们想在作者前面加个破折号并给出处加上书名号也是办不到的，所以我们需要修改主题代码。这里我也找了几篇教程，但我都不是很满意它们的方法，所以按照自己的想法修改了主题的代码。

找到博客目录/themes/fluid/layout/_partials/plugins/typed.ejs，修改success部分为：

success: function(result) {
  var apiText = '';
  if (result) {
    var keys = '<%= theme.index.slogan.api.keys %>'.split(',');
    if (result instanceof Array) {
      result = result[0];
    }
    for (const k of keys){
      if (!k){
        continue;
      }
      if(k[0] === '.'){
        var resultContent= eval("result"+k);
        if (resultContent) {apiText += resultContent;}
      }
      else {
        apiText += k;
      }
    }
  }
  apiText ? typing(apiText) : typing(text);
},

一言发送get请求得到的json格式示例如下：

{
    "id": 6100,
    "uuid": "cc58124d-5ba8-450e-8c9f-114ce133bdc3",
    "hitokoto": "斩尽杀绝，这是对一个文明最高的重视。",
    "type": "d",
    "from": "三体",
    "from_who": "刘慈欣",
    "creator": "~灿若繁星~",
    "creator_uid": 6249,
    "reviewer": 1044,
    "commit_from": "web",
    "created_at": "1589952285",
    "length": 18
}

所以我们需要把主题配置中的slogan项下面api的keys改成：

keys: [".hitokoto","--",".from_who","「",".from","」"]

这时标语就能以类似斩尽杀绝，这是对一个文明最高的重视。--刘慈欣「三体」的格式显示啦～

背景动效

背景的动效看着很复杂，其实设置起来反倒很简单，因为只需要引用别人写好的公开资源就可以了。

网上能找到很多，有些还有跟随鼠标之类的效果，我这里用的是一个彩带的动效，主要是为了在日间和夜间模式下都能看到良好的动态特效。

在主题设置里引用一下就可以了：

custom_js:
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/caidai.js 

引用这类外部资源时最好都在//前加上https:前缀，否则有些资源可能被浏览器拦截。

字数统计

wordcount字数统计感觉挺不准的，而且阅读速度默认值每分钟60词属实有点太磨蹭了。我自己试着较认真地阅读试了一下，感觉下面的值稍微靠谱点，仅供参考，毕竟阅读速度因人、因内容而异。总之这项功能参考价值不高，也就图一乐。

min2read:
  enable: true
  # 每个字词的长度，建议：中文≈2，英文≈5，中英混合可自行调节
  # Average word length (chars count in word), ZH ≈ 2, EN ≈ 5
  awl: 2
  # 每分钟阅读字数，如果大部分是技术文章可适度调低
  # Words per minute
  wpm: 275

其他

代码高亮我使用了highlightjs，默认的样式我感觉区分度不够，所以挑选后改了一下。

highlightjs:
  style: "Atom One Light"
  style_dark: "Base16/Gigavolt"

网站浏览量统计使用了不蒜子，图个方便。

网站运行时长参考这篇文章就可以了：Fluid 页脚增加网站运行时长 - Hexo Theme Fluid。

添加博客文章

Hexo默认支持Markdown和EJS，日常写作当然还是Markdown更便利啦。

和普通的markdown文章不同，我们还需要给markdown的开头处加入Front-matter，用来给Hexo在生成静态网页时提供额外的信息，参数列表可以参考Front-matter | Hexo。

以本文为例，我添加了下面的Front-matter，注意每一项的冒号后需要有一个空格。

---
title: Hexo框架+Fluid主题+GitHub Pages搭建个人博客
categories: [技术,建站]
tags: [Hexo,Fluid,Github Pages]
date: 2022-06-15 16:25:22
---

分类和标签需要注意yml语法中，行内列表的不同项之间使用英文逗号进行分割，我自己经常在检查时发现自己用了中文逗号。

date指的是文章的创建日期，默认是文件的创建日期，我一般都会手动指定为项目实际完成的时间。

文章格式转换

之前写在其他地方的文章很多都不是Markdown写的，需要转为Markdown文件。

随笔最简单，基本上就是几段纯文字，连什么一级标题二级标题也没有，复制粘贴保存为.md文件基本就可以了。不过之前排版诗歌时，小节之间需要空一行，而在markdown里会把空的行忽略掉，解决方法是在空行处使用html的<br>标签，因为markdown通常都包含对html语法的支持。

Pandoc是一个强大的文档格式转换工具，支持你见过的几乎所有文档格式，详见Pandoc - About pandoc。我试了下把LaTex的.tex文件用pandoc转成markdown，虽然也不尽完美，但比起用在线工具拿pdf转的markdown效果要好。

图片引用

首先有一个很坑的点：在文章中不要使用本地gif图片！！！在开启了hexo server的情况下，在文章中引用gif图片后，hexo server会检测到文件变动，刷新网页后可以看到新加进来的gif图片。然而！当你使用hexo g来生成网页的时候，hexo却会报错。而最坑的地方在于，报错信息全是一些hexo依赖的Node.js库，没有半句会提到你加入的gif图片和文章。最后我只好把文章中的gif都弄成了https链接才得以解决。

为了让图片在Markdown编辑器和生成的网页中都能正常显示，使用本地绝对路径是不行的。一种方法是像刚刚那样使用在线图床，另一种是使用相对路径。Markdown编辑器有的可能需要先设置一下允许相对路径之类的，而Hexo这边需要安装插件在生成页面时自动将本地的相对路径替换成网页路径。使用下面这个插件即可：

GitHub - cocowool/hexo-image-link: 当MD中引用本地文件时，处理生成的html中的图片链接。

二级导航

找到了一篇文章：hexo+fluid主题添加二级导航 | 银海里泛摘天星，不过翻了一下我电脑上的fluid主题的layout/_partials/navigation.ejs文件，发现里头出现了submenu这一单词，于是只修改了主题配置文件，发现果然可以显示二级导航。看来是那篇文章有点旧了，后来的fluid主题已经内置好了二级导航功能。修改后的主题配置文件如下：

menu:
  - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
  - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
  - { key: 'category', link: '/categories/', icon: 'iconfont icon-category-fill', submenu: [
    { key: '全部', link: '/categories/', icon: 'iconfont icon-abc' },
    { key: '随笔', link: '/categories/随笔/', icon: 'iconfont icon-pen' },
    { key: '编程', link: '/categories/编程/', icon: 'iconfont icon-code' },
    { key: '技术', link: '/categories/技术/', icon: 'iconfont icon-exp-fill' },
    { key: '工作', link: '/categories/工作/', icon: 'iconfont icon-books' },
    { key: '笔记', link: '/categories/笔记/', icon: 'iconfont icon-notebook' }
  ]}
  - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
  - { key: "photos", link: "/photos/", icon: "iconfont icon-images" }
  - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
  - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

部署到GitHub Pages

git部署

首先需要新建一个Github仓库，名称为yourusername.github.io，全小写。

然后进入仓库，在Settings里找到pages，设置Source分支为main然后保存。

git之前我电脑上已经有了，并且也绑定好了与GitHub进行ssh免密连接的token，只需要安装hexo插件就好了。进入博客根目录，打开终端：

npm i hexo-deployer-git

安装好之后还需要设置_config.yml文件：

deploy:
  type: git
  repo: git@github.com:YourUserName/yourusername.github.io.git
  branch: main

repo那一项直接复制仓库Clone的SSH链接即可。

然后再在终端里执行部署命令等待运行结束：

hexo d

等待几分钟后，在浏览器中输入yourusername.github.io即可访问啦～

页面渲染出错

然而部署到GitHub Pages上之后，虽然页面能够访问，但页面渲染明显出了问题，和在本地服务器预览时的页面大不一样。

不过，事实上我之前也尝试过用python3服务器预览：

cd public/
python3 -m http.server 4000

也出现了同样的页面渲染问题。

后来发现其实还是引用路径设置的问题，打开_config.yml，修改下面两项分别为：

url: https://yourusername.github.io

path: ./

重新生成页面并部署，这下页面就能正常显示哩！