Hexo + GitHub Pages 搭建个人博客

一、前言

本篇博客主要记录了我使用 Hexo 和 GitHub Pages 搭建博客的过程，主要有以下几部分内容：

  • Hexo 博客基本使用
  • Hexo 配置优化
  • 使用 GitHub Pages 部署 Hexo
  • 配置域名
  • 总结

二、Hexo 基础使用

2.1 安装 Hexo

前置条件：安装使用 Hexo 需要先安装 Nodejs 和 Git ，这个根据自己的操作系统和使用习惯来进行安装，我就不赘述了。

1
npm install -g hexo-cli

2.2 初始化 Hexo 博客

执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
hexo init blog

Hexo 的初始文件如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中比较重要的是 _config.yml 配置文件，配置文件的内容可以参考 Hexo 配置。

2.3 运行

初始化完成之后，进入 Hexo 博客目录 ，然后执行下面的指令安装依赖和启动服务。

1
2
3
4
# 安装依赖
npm install
# 启动服务
hexo s

然后在浏览器输入 ：http://127.0.0.1:4000/ 就可以看到如下界面：

Hexo 启动

三、Hexo 优化

Hexo 优化包括很多方面，如配置主题、添加菜单、添加搜索功能、添加网站统计等。我直接使用了一套现成的主题配置方案，叫做 Fluid。

3.1 主题配置

3.1.1 安装 Fluid 主题

进入 Hexo 博客目录，执行下面的命令，完成 Fluid 主题安装。

1
npm install --save hexo-theme-fluid
3.1.2 创建 Fluid 配置文件

这里可以在 node_modules/hexo-theme-fluid/ 目录下复制一份 Fluid 主题默认的配置文件。

1
cp node_modules/hexo-theme-fluid/_config.yml _config.fluid.yml
3.1.3 使用 Fluid 主题

编辑 hexo 目录下的 _config.yml配置文件，将主题切换为 fluid

1
theme: fluid

然后执行 hexo -s 命令启动服务器，在浏览器输入 ：http://127.0.0.1:4000/ 就可以看到 Fluid 主题已经配置成功了。

Fluid 主题配置

3.2 twikoo 评论插件配置

评论插件的选择很多，对比了之后，我选择了 Twikoo 这款评论插件，使用 Zeabur 部署，部署成功后，需要自己设置一个域名，例如 https://mytwikoo.zeabur.app。然后在 _config.fluid.yml 配置文件中做如下配置：

1
2
3
4
5
6
7
# 1. 找到 comments 配置，设置类型为 twikoo
comments:
    type: twikoo

# 2. 找到 twikoo 配置项，将其中的 envId 配置为部署 twikoo 后设置的域名 
twikoo:
    envId: https://mytwikoo.zeabur.app

配置完成后，执行 hexo -s 启动服务，查看博客详情，看到如下界面就说明配置成功了。

twikoo 插件配置

3.3 配置网站运行天数

在 _config.fluid.yml 配置文件中找到 footer 配置，将 content 配置成下面的代码：

1
2
3
4
5
6
7
8
9
10
11
footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div style="font-size: 0.85rem">
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
  '

然后在 source/js 目录下创建 duration.js 文件，里面加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
!(function() {
  /** 计时起始时间，自行修改 **/
  var start = new Date("2020/01/01 00:00:00");

  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length === 1 ){
      snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp"+dnum+"&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }

  update();
  setInterval(update, 1000);
})();

3.4 其他配置

还有很多细枝末节的配置，我就不一一展开了，可以参考 Fluid 配置指南，根据文档来进行即可。

四、使用 GitHub Pages 部署 Hexo

GitHub Pages 的相关知识可以参考 GitHub Pages 文档。

4.1 创建 Github Pages 仓库

在自己的 GitHub 创建一个名为 .github.io 的仓库，其中 username 就是 GitHub 用户名，例如我的用户名是 marshalby2, 那我创建的仓库名就是 marshalby2.github.io

4.2 安装 hexo-deployer-git

进入 Hexo 博客目录下，执行下面的安装命令：

1
npm install hexo-deployer-git --save

4.3 配置 SSH 密钥

先简单说一下过程，就是在我们本地的电脑上生成一个 SSH 密钥，然后将其中的 SSH 公钥配置到 GitHub 中，就可以实现无密码访问我们的 GitHub 仓库了，更多的细节可以参考 GitHub 文档 - 使用 SSH 进行连接。下面是配置过程：

4.3.1 生成 SSH 密钥
1
2
3
4
# 生成 ssh 密钥
ssh-keygen -t ed25519 -C "your_email@example.com"
# 查看公钥
cat ~/.ssh/id_ed25519.pub
4.3.2 将 SSH 公钥添加到 GitHub 中

进入 GitHub 个人设置中，找到 SSH and GPG keys，然后点击 New SSH key 将上一步生成的公钥添加进去。
添加 SSH key

4.3.3 测试 SSH 连接

打开终端，执行下面的命令

1
ssh -T git@github.com

如果出现以下内容，则说明配置成功

1
Hi USERNAME! You've successfully authenticated, but GitHub does not

4.4 修改配置

编辑 _config.yml 文件，找到 deploy 配置，加入 Github Pages 仓库的地址

1
2
3
4
deploy:
  type: git
  repo: git@github.com:marshalby2/marshalby2.github.io.git
  branch: master

4.5 生成站点文件并推送至远程库

1
hexo clean && hexo deploy

推送成功后，就可以直接通过 GitHub 的域名 https://marshalby2.github.io 来访问我们的的博客了。

五、配置域名

5.1 域名购买和解析

普通的域名还是很便宜的，可以选择腾讯云和阿里云。我对比了一下普通域名的费用，阿里云会便宜一些，我就在阿里云购买了域名。购买完成后需要解析到我们的 GitHub Pages 仓库地址。照着下面截图的方式创建两条解析记录：

添加解析

添加完如下所示：

解析记录

5.2 域名配置

在 GitHub Pages 仓库中，依次点击 Settings -> Pages，然后就会看到下面的配置，在 Custome domain 中填入购买的域名，并将 Enforce HTTPS 选上。
GitHub Pages 域名配置

配置完后，就可以通过域名 https://marshalby2.site 访问博客了。

5.3 创建 CNAME 文件

配置到上一步就可以通过域名访问博客了，但是有个问题，每次部署博客后（执行 hexo d 指令），都会把上一步配置的域名清空，所以还需要在博客目录下的 source 文件下创建 CNAME 文件，在里面填入我们的域名。

1
2
> cat source/CNAME
marshalby2.site

至此，域名配置的所有步骤就结束了。

五、总结

本篇博客主要记录了通过 Hexo 和 GitHub Pages 搭建一个静态博客的过程，然后做了一些简单的配置优化，后续有其他方面的配置优化，再做记录。如果觉得访问 GitHub Pages 很慢，改进的方案是可以将博客部署到 Gitee 或者 Coding 平台，这些平台都提供了类似 GitHub Pages的功能。

‍

‍

技术小结
#hexo
Hexo + GitHub Pages 搭建个人博客
http://marshalby2.site/2023/08/28/hexo-install-and-usage/
作者
marshalby2
发布于
2023年8月28日
许可协议