Github pages + Hexo个人博客搭建

Hexo是一个使用Node.js编写的静态网站生成器。它允许使用Markdown文件创建和管理博客或网站。Hexo提供了一个命令行界面（CLI），可以轻松创建新的文章、生成网站并将其部署到Web服务器。

准备工作

GitHub 账号

首先需要有一个GitHub账号，没有的话到官网注册一个

安装Git

攻略自行搜索，或者这里

安装NodeJS

Hexo是基于NodeJS编写的，所以使用时需要安装NodeJS和npm工具，官网教程

安装Hexo

安装Node.js后，可以使用npm全局安装Hexo：

1
2
3
npm install -g hexo-cli
hexo -v # 查看版本
hexo -h # 帮助

安装完Hexo后，可以通过运行以下命令创建一个新的站点：

1
hexo init my-blog

这将创建一个名为my-blog的新目录，其中包含Hexo站点的基本结构。进入新目录并运行以下命令安装依赖项：

1
2
cd my-blog # 下文未作说明的话，一律默认当前目录为my-blog
npm install

安装完依赖项后，可以通过运行以下命令生成页面 & 启动本地开发服务器：

1
2
hexo generate # 生成站点的静态文件，可以简写为 `hexo g`，生成的页面文件在public目录下
hexo server # 启动本地开发服务器，简写为 `hexo s`

这将在 http://localhost:4000 启动一个本地Web服务器，可以在此处预览您的站点

然后可以通过运行以下命令创建新的文章：

1
hexo new post "My First Post"

这将在当前目录下 source/_posts 目录中创建一个名为”My First Post”的新Markdown文件。可以编辑markdown文件以编写内容

编写完成后重新发布，建议每次都使用 clean 命令清理当前的页面缓存文件

1
2
3
hexo clean # 清理生成的页面文件。当配置未生效时，建议执行清理命令
hexo generate # 生成站点的静态文件
hexo server # 启动本地开发服务器

或者直接简写为

1
hexo clean && hexo g && hexo s

创建仓库

在GitHub上创建一个新的代码仓库存放个人blog页面

注意: 此仓库用于存放个人博客页面，仓库名必须使用 <GitHub用户名>.github.io 格式

创建blog仓库

仓库创建完成后，可以在仓库根路径下创建一个名为 index.html 的静态 HTML 文件来验证个人博客搭建是否成功

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Suga yoiya's Blog</title>
</head>
<body>
    <h1>Hello, Blog World ~</h1>
</body>
</html>

在 <GitHub用户名>.github.io 仓库对应的 GitHub Pages 设置页面 (访问路径为Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub 用户名>.github.io

GitHub pages页面

若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功

创建GitHub personal access tokens (PAT)

在 Settings - Developer Settings - Personal access tokens - tokens(classic) 下

创建PAT

验证密码后，选择合适的过期时间和scopes

PAT过期时间/权限选择

生成成功，记得先复制保存下来

PAT生成成功

安装主题

Hexo的默认主题不够好看怎么办？官方提供了数百种主题选择，可以根据个人喜好更换，链接hexo themes

这里使用Fluid主题的安装与配置

安装Fluid主题

官方提供了两种安装方式

  • 方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将该目录下./node_modules/hexo-theme-fluid/_config.yml文件内容复制进去

  • 方式二

下载 最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

修改Hexo 博客目录中的 _config.yml:

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

创建「关于页」

首次使用主题的「关于页」需要手动创建：

1
hexo new page about

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

修改后的文件示例如下：

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

注意：layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

更新主题

  • 方式一

适用于通过 Npm 安装主题。

在博客目录下执行命令：

1
npm update --save hexo-theme-fluid
  • 方式二

适用于通过 Release 压缩包安装主题，且没有自行修改任何代码的情况。

  1. 先将原文件夹重命名为别的名称，例如 fluid-bkp，用于升级失败进行回退；
  2. 按照安装步骤，重新下载 release并解压重命名为 fluid；
  3. 如果某些配置发生了变化（改名或弃用），release 的说明里会特别提示，同步修改原配置文件即可。
  • 方式三

适用于自定义了一些代码，或想体验其他分支的情况，以 dev 分支为例。

  1. 确定自己的 fluid 目录已经开启 git，并且所有改动都已 commit；
  2. 把 fluid 仓库的 develop 分支拉取到自己当前的分支上（也可新建一个分支再拉取）：
1
git pull https://github.com/fluid-dev/hexo-theme-fluid.git develop
  1. 解决代码冲突，保留自己修改的部分（如何解决冲突可自行搜索）。

创建文章

如果要使用markdown嵌入图片，建议再安装一个插件hexo-renderer-marked，它可以方便的解析markdown中图片对应文章的路径

安装hexo-renderer-marked

1
npm install hexo-renderer-marked --save

启用该插件

找到 _config.yml 中 post_asset_folder 将它的值设置为 true ，然后在下面添加

1
2
3
4
5
6
post_asset_folder: true
# hexo-renderer-marked config
marked:
  prependRoot: true
  postAsset: true
# hexo-renderer-marked还有很多其他config，具体可以在https://github.com/hexojs/hexo-renderer-marked#options查看

创建文件名为 my-first-post 文章

1
hexo new post my-first-post

如上命令执行成功后，在 source/_posts/ 目录下生成了一个 markdown 文件和一个同名的资源目录，整体目录结构如下：

1
2
3
4
5
$ source/_posts (main)> tree
.
├── hello-world.md
├── my-first-post       # markdown图片目录
└── my-first-post.md    # markdown文件本身

我这里使用Typora编辑markdown文件，为了方便插入图片，将my-first-post.md文件先放进同名资源目录下

此时目录结构为：

1
2
3
4
5
$ source/_posts (main)> tree
.
├── hello-world.md
└── my-first-post             # markdown图片目录
			└── my-first-post.md    # markdown文件本身

再使用Typora打开编辑，修改Typora的偏好设置为：

image-20230719141142351

之后插入的图片就会自动放在当前文件夹(my-first-post)下，目录结构大概为：

1
2
3
4
5
6
7
8
$ source/_posts (main)> tree
.
├── hello-world.md
└── my-first-post             # markdown图片目录
			├── my-first-post.md    # markdown文件本身
			├── image-1.png    			# markdown中图片1
			├── image-2.png    			# markdown中图片2
			└── image-3.png    			# markdown中图片3

等到编辑完成后再移出来，这样的好处是不需要手动编辑markdown中图片的路径信息，发布后 hexo-renderer-marked 插件会自己渲染图片路径到对应文章目录结构下，此时的文件目录为：

1
2
3
4
5
6
7
8
$ source/_posts (main)> tree
.
├── hello-world.md
├── my-first-post             # markdown图片目录
│			├── image-1.png    			# markdown中图片1
│			├── image-2.png    			# markdown中图片2
│			└── image-3.png    			# markdown中图片3
└── my-first-post.md    			# markdown文件本身

缺点就是编辑时要再将md文件放入资源文件夹中进行编辑，不然编辑器中看不到图片的显示，以及如果后续继续往其中插入图片时图片的路径前后不一致，总之比起自行修改大量图片的文件路径，这个方法只需要移动markdown文件本体

当然图片的引用方式也不止一种，更多详细介绍可参考官方文档

发布到本地

在上一部编辑完成后将md文件移到图片资源文件夹上层后即可执行

1
hexo clean && hexo g && hexo s

在本地 http://localhost:4000/ 就能看到新发布的文章了

配置指南

此处也以 Fluid 主题为例，本指南不包括所有的配置说明，几乎每个配置在主题配置(以下主题配置都指的是 _config.fluid.yml )中都有注释，可配合官方指南共同参考使用。同样，站点配置代表的是 _config.yml

覆盖配置

覆盖配置可以使主题配置放置在 fluid 目录之外，避免在更新主题时丢失自定义的配置。

Hexo 5.0.0 版本以上的用户，在博客目录下创建 _config.fluid.yml 文件，将该目录下./node_modules/hexo-theme-fluid/_config.yml文件内容复制进去，这一步我们在安装主题的时候已经做了，以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可。

注意：

  • 只要存在于 _config.fluid.yml 的配置都是高优先级，修改原 _config.yml 是无效的。
  • 每次更新主题可能存在配置变更，请注意更新说明，可能需要手动对 _config.fluid.yml 同步修改。
  • 想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出。
  • 如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的，比如：
1
2
3
4
about:
  icons:  # 不要把 icons 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }

页面顶部大图

  • 图片来源

主题配置中，每个页面都有名为 banner_img 的属性，可以使用本地图片的相对路径，也可以为外站链接，比如：

指向本地图片：

1
banner_img: /img/bg/example.jpg   # 对应存放在当前博客的 /source/img/bg/example.jpg

指向外站链接：

1
banner_img: https://static.zkqiang.cn/example.jpg

博客标题

页面左上角的博客标题，默认使用站点配置中的 title，这个配置同时控制着网页在浏览器标签中的标题。

如需单独区别设置，可在主题配置中设置：

1
2
navbar:
  blog_title: 博客标题

导航菜单

1
2
3
4
5
navbar:
  menu:
    - { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill', name: '联系我' }
  • key: 用于关联有语言配置，如不存在关联则显示 key 本身的值
  • link: 跳转链接
  • icon: 图标的 css class，可以省略（即没有图标），主题内置图标详见这里
  • name: 强制使用此名称显示（不再按语言配置显示），可省略

另外支持二级菜单（下拉菜单），配置写法如下：

1
2
3
4
5
6
7
8
9
10
menu:
  - {
      key: '文档',
      icon: 'iconfont icon-books',
      submenu: [
        { key: '主题博客', link: 'https://hexo.fluid-dev.com/' },
        { key: '配置指南', link: 'https://hexo.fluid-dev.com/docs/guide/' },
        { key: '图标用法', link: 'https://hexo.fluid-dev.com/docs/icon/' }
      ]
  }

全局字体

所有页面统一字体的字号和字族可以通过主题配置中的下列配置项设置：

1
2
3
4
font:  # 主题字体配置
  font_size: 16px        # 全局字号
  font_family:           # 全局字体族
  code_font_size: 85%    # 代码的字号

关于字体族（font-family）如果不了解可以看这篇文章先了解一下。

需要注意：

  • 最好使用系统自带的字体，否则需要通过自定义功能额外引入 @font-face，字体一般较大，不建议引入；
  • 应当至少添加一个通用的字体族名（如 serif，具体见上方链接文章）。

如果想设置单独的页面，可以直接在 markdown 里通过 style 标签实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: example
---

<style>
  /* 设置整个页面的字体 */
  html, body, .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }

  /* 只设置 markdown 字体 */
  .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }
</style>

语言配置

不同语言会影响一些主题自带的文字。

设置语言是在站点配置中，需要对应 fluid/languages/ 目录内的配置文件名:

1
language: zh-CN

你可以在主题 languages目录里查看支持哪些语言，只要上面的配置的值和文件名相同即可。

你也可以使用类似于覆盖配置的方式去自定义语言，可按如下操作：

  1. 进入博客目录的 source/_data 目录（如不存在则创建），创建 languages 文件夹；
  2. 在 source/_data/languages 文件夹下创建 xxx.yml 文件（xxx 替换为对应语言的代码，例如 zh-CN）
  3. 将 fluid/languages (opens new window)目录下对应语言的配置内容复制到 xxx.yml 中；
  4. 以后配置都在 xxx.yml 中修改，配置会在 hexo g 时自动覆盖。

当然你可以按这个方法创建一份其他语言的配置。

暗色模式

主题暗色模式，开启后菜单中会出现切换按钮

1
2
3
dark_mode:
  enable: true
  default: auto

default 是暗色默认的模式，可选参数：auto / light / dark

选择 auto 时优先遵循 prefers-color-scheme，如果不支持则按用户本地时间 18 点到次日 6 点之间进入暗色模式。

无论选择任何模式，当用户手动切换后会在用户本地保存选项，该用户不再按照默认模式。

Slogan(打字机)

首页大图中的标题文字，可在主题配置中设定是否开启：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: false
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ["hitokoto"]

如果 text 为空则按站点配置的 subtitle 显示。

另外支持通过 API 接口获取内容，如果请求失败则按 text 字段显示：

url: API 地址，必须返回的是一个 JSON 格式

1
method`: 请求方法，可选 `GET`、`POST`、`PUT

headers: 请求头，如果接口需要传一些验证的头部信息，在这里设置

keys: 从请求结果获取字符串的取值字段，程序会根据列表中的字段依次取值，最终需要获得到一个字符串

例如 API 返回的内容为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
    {
        "data": {
            "author": "Fluid",
            "content": "An elegant theme"
        }
    },
    {
        "data": {
            "author": "Test",
            "content": "Test content"
        }
    }
]

设置 keys: ["data", "content"]，程序会如下执行：

  1. 由于返回体是列表，程序会首先获取第一个元素（不是列表则跳过此步骤）
  2. 通过第一个 key data 获取值，发现不是一个字符串，继续执行
  3. 通过第二个 key content 获取值，发现是一个字符串，返回内容；如果不是字符串则获取失败，使用 text 值

文章摘要

开关自动摘要（默认开启）：

1
2
3
index:
  auto_excerpt:
    enable: true

若要手动指定摘要，使用 <!-- more --> MD文档里划分，如：

1
2
3
正文的一部分作为摘要
<!-- more -->
余下的正文

或者在 Front-matter (markdown文件中最上方以 --- 分隔的区域，下同)里设置 excerpt 字段，如：

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

TIP

优先级: 手动摘要 > 自动摘要

如果关闭自动摘要，并且没有设置手动摘要，摘要区域空白

无论哪种摘要都最多显示 3 行，当屏幕宽度不足时会隐藏部分摘要。

文章跳转方式

1
2
index:
  post_url_target: _self

可选值：

  1. _blank：新标签页打开
  2. _self：当前标签页打开

文章信息

可配置隐藏包括发布时间、分类、标签。

经过测试，如果首页的文章列表中没有略缩图和摘要，标题+文章信息的显示方式会使页面过于拥挤，所以给出此项配置供喜欢首页只显示文章标题的同学使用。

1
2
3
4
5
index:
  post_meta:
    date: true
    category: true
    tag: true

隐藏文章

如果想把某些文章隐藏起来，不在首页和其他分类里展示，可以在文章开头 Front-matter中配置 hide: true 属性。

1
2
3
4
5
6
7
---
title: 文章标题
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
hide: true
---
以下是文章内容

隐藏会使文章在分类和标签类里都不显示

隐藏后依然可以通过文章链接访问

文章排序

如果想手动将某些文章固定在首页靠前的位置，可以在安装 hexo-generator-index >= 2.0.0 版本的情况下，在文章开头 Front-matter中配置 sticky 属性：

1
2
3
4
5
6
7
---
title: 文章标题
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
sticky: 100
---
以下是文章内容

sticky 数值越大，该文章越靠前，达到类似于置顶的效果，其他未设置的文章依然按默认排序。

当文章设置了 sticky 后，主题会默认在首页文章标题前增加一个图标，来标识这是一个置顶文章，你可以通过主题配置去关闭或修改这个功能：

1
2
3
4
index:
  post_sticky:
    enable: true
    icon: 'iconfont icon-top'

icon 可以通过自定义图标修改为其他图标。

文章在首页的封面图

对于单篇文章，在文章开头 Front-matter中配置 index_img 属性。

1
2
3
4
5
6
7
---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

和 Banner 配置相同，/img/example.jpg 对应的是存放在 /source/img/example.jpg 目录下的图片（目录也可自定义，但必须在 source 目录下）。

也可以使用外链 Url 的绝对路径。

如果想统一给文章设置一个默认图片（文章不设置 index_img 则默认使用这张图片），可在主题配置中设置：

1
2
post:
  default_index_img: /img/example.jpg

当 default_index_img 和 index_img 都为空时，该文章在首页将不显示图片。

文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter中指定 banner_img 属性。

本地图片存放位置同上。

1
2
3
4
5
6
7
8
---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

日期/字数/阅读时长/阅读数

显示在文章页大标题下的文章信息，除了作者和阅读次数，其他功能都是默认开启的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
post:
  meta:
    author:  # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
      enable: false
    date:  # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
      enable: true
      format: "dddd, MMMM Do YYYY, h:mm a"  # 格式参照 ISO-8601 日期格式化
    wordcount:  # 字数统计
      enable: true
      format: "{} 字"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    min2read:  # 阅读时间
      enable: true
      format: "{} 分钟"
    views:  # 阅读次数
      enable: false
      source: "leancloud"  # 统计数据来源，可选：leancloud | busuanzi   注意不蒜子会间歇抽风
      format: "{} 次"

日期格式必须遵循 ISO-8601 规范，否则无法正常显示；

其他格式必须包括 {} 符号代替数字，文字可自由设置。

代码块

1
2
3
4
5
6
7
8
9
10
11
12
code:
  copy_btn: true
  highlight:
    enable: true
    line_number: true
    lib: "highlightjs"
    highlightjs:
      style: 'Github Gist'
      bg_color: false
    prismjs:
      style: "default"
      preprocess: true

copy_btn: 是否开启复制代码的按钮

line_number: 是否开启行号

highlight: 是否开启代码高亮

lib: 选择生成高亮的库，可选项: highlightjs、prismjs，对应下面两组配置，高亮的配置说明具体见主题配置中的注释

关于信息

在关于页介绍自己的基础信息，可以在主题配置中设置：

1
2
3
4
about:
  avatar: /img/avatar.png
  name: "Fluid"
  intro: "An elegant theme for Hexo"

社交页图标

在主题配置中设置：

1
2
3
4
5
about:
  icons:
    - { class: 'iconfont icon-github-fill', link: 'https://github.com', tip: 'GitHub' }
    - { class: 'iconfont icon-douban-fill', link: 'https://douban.com', tip: '豆瓣' }
    - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }
  • class: 图标的 css class，主题内置图标详见这里
  • link: 跳转链接
  • tip: 鼠标悬浮在图标上显示的提示文字
  • qrcode: 二维码图片，当使用此字段后，点击不再跳转，而是悬浮二维码

友情链接页

友情链接页用于展示好友的博客入口，默认关闭，开启需要先在 navbar 项中将 links 的注释(#号)删掉：

1
2
3
navbar:
  menu:
    - { key: 'links', link: '/links/', icon: 'iconfont icon-link-fill' }

然后找到 links 的配置项，对页面内容进行配置：

1
2
3
4
5
6
7
8
9
links:
  items:
    - {
      title: 'Fluid Docs',
      intro: '主题使用指南',
      link: 'https://hexo.fluid-dev.com/docs/',
      avatar: '/img/favicon.png'
    }
  default_avatar: /img/avatar.png
  • title: 友链站的标题
  • intro: 站点或博主的简介，可省略
  • link: 跳转链接
  • avatar: 头像图片，可省略
  • default_avatar: 成员的默认头像（仅在指定了头像并且加载失败时生效）

友链页也可以使用自定义区域和评论，使用方式类似于文章页，具体见配置项与相关注释。

网页访问统计

页脚可以展示 PV 与 UV 统计数据，目前支持两种数据来源：LeanCloud与 不蒜子。

相关主题配置如下：

1
2
3
4
5
6
footer:
  statistics:
    enable: false
    source: "busuanzi"  # 可选 leancloud | busuanzi  根据自己需求选择
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

不蒜子不需要申请账号，直接开启即可，但有时候会响应缓慢拖慢整个页面加载。

不蒜子在 localhost 域名下显示的不是真正的数据，因此无需在意。

LeanCloud 使用前需要申请账号（国内需要身份认证）推荐用国际版（leancloud.app），然后在 web_analytics 配置项中将 leancloud API 相关参数填上才能生效。

LeanCloud 在 localhost 域名下不会增加数据。

如果参数填写错误或者接口异常，不会显示数据，请在浏览器控制台排查具体原因。

因为不蒜子只需要直接开启即可，这里介绍一下LeanCloud的配置

在 【控制台 -> 应用 -> 设置 -> 应用凭证】页面中找到对应的 AppID、AppKey等信息填入主题配置中，国内版还需要填写REST API 服务器地址

image-20230719150329974

展示 PV 与 UV 统计

1
2
3
4
footer:
  statistics:
    enable: true
    source: "leancloud"  # 可选 leancloud | busuanzi  根据自己需求选择

LeanCloud配置

1
2
3
4
5
6
7
8
9
10
11
web_analytics:  # 网页访问统计
  leancloud:
    app_id: # AppID
    app_key: # AppKey
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url: # REST API 服务器地址

    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    # If true, ignore localhost & 127.0.0.1
    ignore_local: true

展示文章日期/字数/阅读时长/阅读数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
post:
  meta:
    author: # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
      enable: false
    date: # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
      enable: true
      format: "LL a" # 格式参照 ISO-8601 日期格式化 See: http://momentjs.cn/docs/#/parsing/string-format/
    wordcount: # 字数统计
      enable: true
      format: "{} 字"
    min2read: # 估计阅读全文需要的时长
      enable: true
      awl: 2
      wpm: 60
      format: "{} 分钟"
    views: # 浏览量计数
      enable: true
      source: "leancloud"
      format: "{} 次"

文章评论功能

在上面注册了LeanCloud之后，可以很方便的开启文章评论功能，只需要在主题配置中开启并指定评论插件

1
2
3
4
5
6
7
8
9
10
11
12
13
post:
  comments:
    enable: true
    # 指定的插件，需要同时设置对应插件的必要参数
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
    type: valine

# Valine
# 基于 LeanCloud
# See: https://valine.js.org/
valine:
  appId: # LeanCloud AppID
  appKey: # LeanCloud AppKey

这里介绍一个valine的进阶版waline

Waline 是一款基于 Valine 衍生的简洁、安全的评论系统。

优势 描述
自由评论 完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入
轻量 53kb gzip 的完整客户端大小
强大的安全性 内容校验、防灌水、保护敏感数据等
登录支持 在允许匿名评论的基础上，支持账号注册，保持身份
完全免费部署 可免费部署在 Vercel 上
易于部署 多种部署部署方式和存储服务支持
文章反应 快速表达你对文章的态度
浏览量统计 通过 <1kb 代码可靠统计文章浏览量

首先先注册LeanCloud，可以按照之前的步骤

Vercel部署

点击下面按钮跳转到Vercel进行Waline的server端部署

Deploy with Vercel

  1. 如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
  2. 输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

image-20230719152700758

  1. 此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

image-20230719152750019

  1. 部署中…

image-20230719152805394

  1. 几十秒钟之后，满屏的烟花会庆祝你部署成功。点击 Go to Dashboard 可以跳转到应用的控制台。

image-20230719152854236

  1. 点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key

image-20230719153036114

提示：如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名

  1. 环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效

image-20230719153108455

  1. 此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。

image-20230719153434166

此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

image-20230719153452533

Fluid 主题引入

  1. 设置主题配置文件 comments -> type 值为 waline
1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
  enable: true
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
  type: waline
  1. 配置 waline 相关信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Waline
# 从 Valine 衍生而来，额外增加了服务端和多种功能
# Derived from Valine, with self-hosted service and new features
# See: https://waline.js.org/
waline:
  serverURL: 'path-to-your-server-url'
  path: window.location.pathname
  avatar: retro
  meta: ['nick', 'mail', 'link']
  requiredMeta: ['nick']
  lang: 'zh-CN'
  emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo', 'https://unpkg.com/@waline/emojis@1.1.0/bilibili']
  dark: 'html[data-user-color-scheme="dark"]'
  wordLimit: 0
  pageSize: 10
  1. 最重要的是填入之前得到的服务端地址 到serverURL 中
示例效果

image-20230719154757459

这边我还使用了表情选项卡功能，可以通过设置 emoji 选项自定义评论输入框的表情，你应该将它设置为包含预设地址或预设配置对象的数组。如果你不需要它，只需将它设置为 false

具体的其他功能可以参阅官方文档

登陆服务端

由于Waline有服务端，支持评论管理，所以我们还需要注册一个账号作为管理员

找到评论框，点击登录按钮，会弹出一个窗口。找到用户注册，默认第一个注册的用户为管理员，所以在刚部署之后一定要记得及时注册。登陆id为注册时填写的邮箱

waline注册

发布到GitHub pages

  1. 安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 修改站点配置 _config.yml
1
2
3
4
5
deploy:
  type: git
  repo: <repository url>	# https://github.com/<GitHub用户名>/<GitHub用户名>.github.io.git
  branch: [branch]	# 一般为main或者master
  token: [token]	# 之前在github开发者settings中生成的PAT
  1. 生成站点文件并推送至远程 GitHub 仓库
1
hexo clean && hexo deploy

登入 Github，在库设置（Repository Settings）中将默认分支设置为 _config.yml 配置中的branch分支名称

branch设置

只需稍等片刻，个人博客站点就会显示在 Github Pages 中

Hexo > Fluid
#blog #github pages #hexo
Github pages + Hexo个人博客搭建
https://sugayoiya.github.io/posts/20774.html
作者
Sugayoiya
发布于
2021年5月17日
许可协议