Hexo+Fluid搭建个人博客网站

这篇博文我已经拖更半年了，半年前兴致勃勃地买了域名、搭起了个人博客，结果到现在网页上还是空空如也，马上就要2023年了，准备从现在开始，每天坚持做一件事，希望时间的积分效应能让我有所收益。
本博文将介绍如何从零开始一步一步搭建出属于自己的个人博客网站，使用的框架为Hexo+Fluid。在写作时主要参考了以下博文，在此对这些作者表示由衷的感谢：
(1) 彻底搞懂如何使用Hexo+GitHubPages搭建个人微博
(2) GitHub+Hexo 搭建个人网站详细教程
本文会持续更新，最近一次更新时间：2024年07月03日

1. 配置GitHubPages

简单来说，GitHubPages的作用是提供免费的静态网站托管服务，我们只需要把自己写的html文档保存在其仓库中，该服务就会对这些文件进行处理并展示为网页的样式，即近似实现了Web服务器的功能，创建GitHubPages需要在GitHub上完成（注册GitHub账号以及配置SSH公钥可见这篇博文），具体步骤为：
(1) 点击GitHub首页右上角的“+”按钮，在弹出窗口选择“New respository”；
(2) 在新页面中的“Repository name”一栏输入你GitHub的用户名。注意：必须输入用户名，否则创建的将不是GitHubPages而是一个普通的仓库；
(3) 勾选“Initialize this repository with a README”选项，并点击“Create Respository”按钮。
此时在浏览器输入https://你GitHub的用户名.github.io后，已经可以看到一个简陋的界面，这就说明你已经成功开启GithubPages服务了。

2. 安装Hexo并初始化博客

Hexo是一个快速且简洁的博客框架，用户可以通过Hexo快速生成一个完整的博客页面。Hexo使用Node.js来对页面进行快速渲染，因此需要同时安装Node.js和Hexo：

2.1 安装Node.js

可在官网直接安装Node.js，建议使用Node.js 10.0及以上版本。可以在cmd中输入以下命令检查自己是否安装成功：

1
node --version

2.2 安装Hexo

npm是随Node.js一起安装的包管理器，可以使用npm直接安装Hexo：

1
npm install -g hexo-cli

2.3 初始化博客

在你喜欢的位置上新建一个文件夹，命名为《你GitHub的用户名.github.io》，该文件夹以后统称为站点根目录。进入到该目录的上级目录打开cmd，输入以下命令：

1
2
3
hexo init <folder>   # 使用Hexo初始化站点根目录，即你新建的文件夹名
cd <folder>   # 打开该文件
npm install   # 安装npm所依赖的库

完成上述命令后，Hexo就会自动在站点根目录中生成一系列用于生成博客的文件，你只需要输入以下命令（需要在cmd中进入站点根目录），就可以在本地浏览博客：

1
2
hexo g   # 生成博客，等同于 hexo generate
hexo s   # 本地预览，等同于 hexo server

在浏览器中输入http://localhost:4000，就可以在本地看到一个原始的博客页面。此时，站点根目录的目录结构如下：

1
2
3
4
5
6
7
8
9
|-- _config.yml
|-- node_modules
|-- package-lock.json
|-- package.json
|-- scaffolds
|-- source
|-- themes
|-- public
|-- db.json

事实上，在执行hexo g命令后，Hexo将souce文件夹下的Markdown和HTML文件解析到了public文件夹下，并生成了db.json文件。

3. 将本地博客部署到GitHubPages

最直接的方式使用git将本地博客文件夹关联到GitHub的远程仓库，并且把本地文件push到对应的仓库中。Hexo提供了一种更为简洁的方式，只需要在_config.yml文件中进行配置并在命令行中输入相应命令就可以将本地博客发布到GitHubPages上。
首先，打开_config.yml文件，在deployment配置项下设置如下参数：

1
2
3
4
deploy:
    type: git
    repo: git@github.com:你GitHub的用户名/你GitHub的用户名.github.io.git
    branch: master

然后，安装以下插件：

1
npm install hexo-deployer-git —save

最后，执行以下命令发布本地博客到远程仓库：

1
hexo d   # 推送博客，等同于 hexo deploy

此时，在浏览器中输入地址你GitHub的用户名.github.io，就可以在互联网上看到本地的博客了（上传需要时间，如果看不到等待一段时间即可）。

4. 配置域名

用上述方式访问你的博客太过复杂，我们可以选用自己喜欢的域名作为网址供人访问。因此，我们需要将自己购买的域名和GitHubPages进行绑定。

4.1 购买域名

目前国内主流的域名代理厂商包括腾讯云、阿里云等，我个人使用的是腾讯云，便宜的域名一般10-20块钱一年。

4.2 添加记录

购买域名后进入管理控制台的域名列表，找到你的个性化域名并点击解析，添加以下两条记录：

主机记录 记录类型 线路类型 记录值
@ A 默认 185.199.108.153
@ A 默认 185.199.109.153
@ A 默认 185.199.110.153
@ A 默认 185.199.111.153
www CNAME 默认 你GitHub的用户名.github.io

这样的目的是能够同时添加顶级域名（通过A解析）和子域名（通过CNAME解析），这也是GitHubPages推荐的方式，详细说明可见官方文档。
之后，在GitHub中打开该项目（即名称为“你GitHub的用户名.github.io”的仓库，需要注意此时必须关闭vpn，否则会弹出404无法进入），在Settings-Pages-Custom domain中输入你购买的域名，并点击Save保存。注意：只需要输入域名，不要添加www！例如你的域名是abc.com，则不要输入www.abc.com，否则以后在输入网址访问博客时必须带有www。
现在，你用三种域名都可以访问到你的博客：www.abc.com、abc.com和你GitHub的用户名.github.io。

4.3 配置CNAME文件

设置Custom domain的步骤在每次执行hexo d后都会重置失效，为了一劳永逸，需要在站点根目录的source文件夹内新建一个txt文件，在其中输入你购买的域名（仍然不带www），并将txt文件重命名为CNAME（要把.txt删掉！）。这样就可以解决每次都需要修改Custom domain的问题。

5. 更换主题

5.1 选择你喜欢的主题

个人认为Hexo默认的主题不够好看，可以选择不同类型的主题，官网提供了丰富的主题样式，常用的包括Fluid、Next等。本博客将以Fluid为主题进行讲解。

5.2 主题安装

在站点根目录下输入以下命令就可以完成Fluid的安装：

1
npm install --save hexo-theme-fluid

完成安装后，可以在themes文件夹中看到fluid文件夹，说明安装成功。官方给出了非常详细的配置文档，想要配置最适合自己风格的主题，建议自己阅读文档。接下来一节将给出一些重要的配置。

5.3 一些重要的配置

5.3.1 初始化后的必要步骤

首先，安装Fluid后，需要在根目录下新建一个_config.fluid.yml文件，并将themes/fluid/_config.yml中的所有内容复制过去。
然后，在_config.yml文件中指定主题和语言：

1
2
theme: fluid  # 指定主题
language: zh-CN  # 指定语言

最后，可以选择设置主题的自动更新，在根目录下输入以下命令：

1
npm update --save hexo-theme-fluid

5.3.2 创建关于页

关于页可以展示你的基本信息、兴趣、联系方式等，首次使用时需要先进行创建，在根目录输入以下命令：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性：

1
2
3
4
---
title: 关于我
layout: about  # 必须存在且不能修改
---

5.3.3 覆盖配置

当主题更新时可能导致原有配置丢失，因此在初始化后我们建立了_config.fluid.yml，之后所有的配置都只需要在根目录下的_config.fluid.yml文件中修改，而themes/fluid/_config.yml中的修改则无效、被覆盖。
注意：以下的所有配置也都是在_config.fluid.yml中修改！

5.3.4 显示网站数据统计

推荐采用leancloud实现显示网站的访客人数和总访问量，配置如下：

1
2
3
4
5
6
footer:
  statistics:
    enable: false
    source: "leancloud"  # 在此处输入leancloud
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

想要使用leancloud的功能，需要注册账号、新建应用并获取App ID和App Key，具体操作可以查看这篇博文。之后将获取的信息做如下配置：

1
2
3
leancloud:
    app_id: 你获取的App ID
    app_key: 你获取的App Key

这样就可以实现网站数据统计，需要注意的是在本地测试时可能会出现统计数据异常，这属于正常现象。

5.3.5 开启博客评论功能

推荐使用基于leancloud的Valine，首先需要做如下配置：

1
2
3
4
5
# 评论插件
# Comment plugin
comments:
	enable: true
    type: valine  # 在此处输入valine

之后，在valine选项中做如下配置：

1
2
3
4
# Valine
valine:
  appId: 你获取的App ID
  appKey: 你获取的App Key

访问Valine官网，可以自定义评论系统的细节。

6. 撰写博客并发布

6.1 撰写博客

经过前面的六步，我们终于完成了一个博客系统的搭建，接下来我们就可以撰写自己的博文了。Hexo采用Markdown语法来编辑博文，这里推荐采用csdn的发布文章功能，先在csdn上写博文，之后导出为.md格式，就可以生成自己的博文。

6.2 发布博客

根据官方文档，Hexo共有三种layout（排版形式）：

Layout Path
post source/_posts
draft source/_drafts
page source/

在站点根目录下采用以下命令可以生成一个新的layout：

1
hexo new [layout] <title>

layout的缺省值为post，会生成一篇新的博文；若选择page，则会生成一个新的页面（就像之前的关于页）；若选择draft，则会生成一个草稿，你可以在这里自主编辑并选择合适的时机publish到source/_posts文件夹中。基于csdn的协助，我们可以根据以下步骤快速的完成一篇博文并上传：
(1) 采用上述命令生成一篇新的post，执行后会在source/_posts中生成一个<title>.md的文件，这部分内容如下（又称为Front-matter）：

1
2
3
4
5
---
title: <title>
date: <present time>
tags: <preset tags>
---

(2) 将csdn中导出的md文字部分拷贝在上述内容的最后；
(3) 执行以下命令，在本地（http://localhost:4000）查看效果：

1
2
3
hexo c   # 即hexo clean，清除缓存
hexo g
hexo s

(4) 本地查看无误后，上传到网站：

1
hexo d

6.3 设置Front-matter

一篇博文的前页（即Front-matter）描述了这篇博文的一些基本信息，根据官方文档，共有11类设置。这里主要介绍一下比较常用的设置：
(1) categories（类别）
该属性用于对博文进行分类，例如是属于python还是属于java。类别有层次之分，在描述时需要从高到低，例如：

1
2
3
categories:
- Programming
- Python

本例说明该博文属于Programming类别下的Python子类。
(2) tags（标签）
该属性用于描述博文的性质，例如该博文是经验分享还是刷题解析。标签是没有层次之分，描述时无顺序要求，例如：

1
2
3
 tags:
- 经验
- 后端

本例说明该博文主要讲述了后端的经验分享。
(3) excerpt（摘要）
摘要会出现在博客首页，对整篇博文进行一个简要的介绍。根据资料，设置摘要共有三种方法。官方推荐的方法是使用 <!-- more --> 进行手动截断，例如：

1
2
3
4
5
6
---
title: 这是标题
---
这是摘要
<!-- more -->
这是正文   # 注意：正文在显示时仍包括了上述摘要部分

我个人推荐在前页中添加excerpt字段来手动输入摘要：

1
2
3
4
---
title: 这是标题
excerpt: 这是摘要
---

这样设置摘要自由度较高，无需担心摘要和正文内容不同。

6.4 设置博文的url

Hexo中一篇博文默认的url为：

1
:year/:month/:day/:title/   # 年/月/日/文章路径+博文名字

这样十分容易造成中文url乱码，实际应用效果很差。这篇博文给出了两种解决方案。这里我推荐将source/_posts下的各个md文件按照类似blog00x的顺序进行命名，然后在站点根目录下的_config.yml文件中做如下设置：

1
permalink: posts/:title/

对于懒人则可以使用Hash的方式，这样不需要进行统一编号，设置如下：

1
permalink: posts/:hash/

值得注意的是这里参考了官方推送的个人博客网站，没有使用年月日来设置url，而是采用posts来设置url，避免网址冗余。

6.5 设置博文中的图片

一篇博文的图片可以分为两类：第一类是在首页显示的博文封面图，第二类是在文章正文中显示的内容图。放置与引用这些图片有很多很多种方式，这里我推荐一下我个人的设置，并不代表它是最方便、最合适的，但是我个人用起来最为舒服，具体如下：
对于每一篇博文（即放在_posts中的每一个md文件），都在source/img目录下新建一个和博客同名的文件夹，将所有的图片（包括封面图和内容图）统一放在其中。对于封面图，在博文md文件的前页中添加如下信息：

1
index_img: /img/博客名/图片名  # 图片要加扩展名jpg等，下同

对于内容图，直接在正文的相应位置做如下引用即可：

1
![图片标题](/img/博客名/图片名)

如果之后的网站具有一定规模，图片较多难以管理，可以采用图床进行云管理，详见这里。

7. 博客美化

7.1 设置live2d看板娘

这里推荐张书樵大神的开源项目，该项目能够切换多种不同看板娘形象，同时具有丰富可自定义的对话内容。具体操作如下：

  • 从GitHub上下载该项目，解压至/themes/fluid/source文件夹下，将项目名称重命名为live2d-widget，并删除其中的.gitignore文件；
  • 修改autoload.js文件，将live2d_path修改为如下。并将该文件下的cdnPath注释掉，使用apiPath。
1
const live2d_path = "/live2d-widget/";
  • 打开/themes/fluid/layout/layout.ejs，在<body>下一行添加如下代码：
1
<script src="/live2d-widget/autoload.js"></script>
  • 在主题文件配置文件_config.fluid.yaml（注意是博客根目录下的配置文件）中添加以下语句：
1
2
live2d:
	enable: true

通过以上步骤，就成功添加了一个live2d看板娘。作者建议针对自己的网页对看板娘的位置、大小、文本等信息进行自定义。其中，在waifu.css中可以修改看板娘位置等信息，在waifu-tips.json中可以修改看板娘对话（强烈建议自己修改对话，一些对话少儿不宜）。设置说明可见这篇博文（对css语法要求较高）。

8. 配置sitemap

虽然你的网站已经成功部署，但是实际上它还是和“单机版”一样，这是因为你博客的任何内容都没有被搜索引擎收录，其他用户在搜索相关内容时，搜索引擎是不会显示你的内容的。想要自己的博客被搜索引擎收录，你需要配置各大搜索引擎的sitemap。我自己尝试配置了谷歌和百度的sitemap，但是一直没有成功。以下资料可供大家参考：
(1) Hexo-生成sitemap站点地图
(2) Hexo 博客添加百度sitemap以及进行SEO优化

9. 博客迁移到新电脑

因为换电脑需要将博客迁移至新电脑时，可以按照如下步骤实现快速迁移：

（1）在新电脑中安装git和Node.js，安装过程见第二部分，在此不作赘述；

（2）打开git bash，分别运行如下代码：

1
2
3
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
ssh-keygen -t rsa -C "你的邮箱"

在用户目录的.ssh文件夹下打开id_rsa.pub的公钥，复制所有信息，并在自己的github账号中的Settings -> SSH and GPG keys中点击New SSH key，Title输入框随便填，Key输入框粘贴刚才的信息。

（3）把旧电脑的博客文件夹复制到新电脑的任意位置，删除掉node_modules文件夹（其他的文件可以不用动，会自动覆盖掉）。用cmd打开新电脑中该文件夹的位置，运行如下代码：

1
npm install

注意，不要用 hexo init 进行初始化，否则会将配置文件初始化。

（4）依次运行 hexo g 和 hexo s 进行本地测试，最后运行 hexo d 进行部署。注意：在执行部署时，可能会出现如下警告，只需要输入yes即可。

1
2
3
The authenticity of host 'github.com' can't be established.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

10. 结语

以上就是基于Hexo+Fluid的个人博客系统搭建与使用的完整教程了。从第七步中我们可以看出来，如果你的目的是想要博文被大家看到，那么个人博客系统远远不如一些主流的平台，如微信、知乎、掘金等。但是从零搭建起只属于自己的网站还是非常有成就感的，祝大家都能找到人生的意义所在。

Hexo+Fluid搭建个人博客网站
https://princehao.cn/posts/blog001/
作者
王子豪
发布于
2022年12月15日
许可协议