使用 Hexo 在个人电脑部署博客网站并发布在 Github Pages

一、准备工作

1、一台个人电脑。
2、Github 账号，没有的话直接 Github官网申请一个。
3、安装 NodeJS，node.js官网下载安装包，一路点击 Next 安装即可。
4、安装 Git 工具，Git官网下载安装包，同样一路点击 Next 安装即可。

二、部署 `Hexo`，版本 `6.3.0`

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官网地址

安装 Hexo，打开 CMD 控制台输入以下命令即可。

1	npm install -g hexo-cli

说明: -g 表示全局安装，hexo-cli 为所安装的包

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

1
2
3

hexo init [folder]
cd <folder>
npm install

[folder] 可以按自己的喜好命名，例如 Myblog；如果没有设置 folder（文件夹） ，Hexo 默认在目前的文件夹建立网站。由于现在 win11 系统深度集成了 OneDrive，图片，文档，桌面都可以通过 OneDrive 备份，把博客文件夹放在文档里，这样即使需要重做系统也不用担心数据丢失，登录进 OneDrive 重新设置下备份文件夹，原先的文件就会自动映射到本地，恢复即可。
需要 CD 指令进入你指定建立网站的文件夹，才能执行下面的命令。

本地启动网站

hexo g

hexo s

启动服务器。默认情况下，访问网址为： http://localhost:4000/

三、更换主题

Hexo 提供了很多主题，可以自行挑选喜欢的主题安装。我现在使用 butterfly 主题，版本 4.9.0，主题地址。可以在作者博客查看主题使用文档。

进入博客所在文件夹下载主题

1 2	cd <folder> git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

使用主题

在 _config.yml 中可以修改大部分的配置。

1	theme: butterfly

此时如果直接本地启动 Hexo，打开网页后会报错，因为此款主题还需要 pug 以及 stylus 的渲染器。

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

本地启动

1 2	hexo g hexo s

现在就能正常打开网页了，其他主题相关设置可以直接进入作者博客查看教程。

四、在 `Github` 创建仓库

4.1、`Github` 创建个人仓库

点击 Your repositories，进入仓库页面。——点击 New 按钮，进入仓库创建页面。——填写仓库名，格式必须为<用户名>.github.io，然后点击 Create repository。

4.2、设置 `git`

4.2.1、在 `Git` 中设置用户名

官方文档

Git 使用用户名将提交与身份关联。 Git 用户名与您的 GitHub 用户名不同。

4.2.2、关于 `Git` 用户名

可使用 git config 命令更改与 Git 提交关联的名称。您设置的新名称将在从命令行推送到 GitHub 的任何未来提交中显示。如果您想要将真实姓名保密，则可以使用任意文本作为您的 Git 用户名。

使用 git config 更改与 Git 提交关联的名称仅影响未来的提交，而不会更改用于过去提交的名称。

4.2.3、为计算机上的每个存储库设置 `Git` 用户名

打开 Git Bash。
设置 Git 用户名：

1	git config --global user.name "Mona Lisa"

确认您正确设置了 Git 用户名：

1 2	git config --global user.name > Mona Lisa

4.2.4、为一个仓库设置 `Git` 用户名

打开 Git Bash。
将当前工作目录更改为您想要在其中配置与 Git 提交关联的名称的本地仓库。
设置 Git 用户名：

1	git config user.name "Mona Lisa"

确认您正确设置了 Git 用户名：

1 2	git config user.name > Mona Lisa

4.2.5、设置邮件地址

官方文档

1 2	git config --global user.email "YOUR_EMAIL" git config user.email "YOUR_EMAIL"

4.2.6、生成秘钥

官方文档

1	ssh-keygen -t ed25519 -C "your_email@example.com"

代码参数含义：
-t 指定密钥类型，默认是 rsa ，可以省略。
-C 设置注释文字，比如邮箱。
-f 指定密钥文件存储文件名。

注意：如果你使用的是不支持 Ed25519 算法的旧系统，请使用以下命令。

1	ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

1	ls -al ~/.ssh #如果能进入到 .ssh 文件目录下，则证明，之前生成过 .ssh 秘钥，可以直接使用里面的秘钥。

接着按 3 个回车

[root@localhost ~]# ssh-keygen -t rsa       <== 建立密钥对，-t 代表类型，有 RSA 和 DSA 两种
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa):   <==密钥文件默认存放位置，按 Enter 即可
Created directory '/root/.ssh'.
Enter passphrase (empty for no passphrase):     <== 输入密钥锁码，或直接按 Enter 留空
Enter same passphrase again:     <== 再输入一遍密钥锁码
Your identification has been saved in /root/.ssh/id_rsa.    <== 生成的私钥
Your public key has been saved in /root/.ssh/id_rsa.pub.    <== 生成的公钥
The key fingerprint is:
SHA256:K1qy928tkk1FUuzQtlZK+poeS67vIgPvHw9lQ+KNuZ4 root@localhost.localdomain
The key's randomart image is:
+---[RSA 2048]----+
|           +.    |
|          o * .  |
|        . .O +   |
|       . *. *    |
|        S =+     |
|    .    =...    |
|    .oo =+o+     |
|     ==o+B*o.    |
|    oo.=EXO.     |
+----[SHA256]-----+

最后在 .ssh 目录下( C 盘用户文件夹下)得到了两个文件：id_rsa（私有秘钥）和 id_rsa.pub（公有密钥）

4.3、如果想登陆远端，则需要将 `rsa.pub` 里的秘钥添加到远端

首先，去 .ssh 目录下找到 id_rsa.pub 这个文件夹打开复制全部内容。——登录 GitHub，进入你的 Settings ——点击 SSH and GPG keys——创建 New SSH key——粘贴你的密钥到你 key 输入框中——点击 Add SSH key ——再弹出窗口，输入你的 GitHub 密码，点击确认按钮。——到此，就大功告成了。

五、在 `GitHub Pages` 上部署 `Hexo`

5.1、安装 `hexo-deployer-git`

1	npm install hexo-deployer-git --save

5.2、修改配置

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: main               #分支名称
  token:           #可选的令牌值，用于认证 repo。上面已经创建了SSH，就不需要使用token了。

5.3、生成站点文件并推送至远程库。执行 `hexo clean` && `hexo deploy`

1	hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

hexo g

hexo d

六、主题配置

前面说过大部分配置可以在作者博客查看主题使用文档，就几个需要额外安装的模块记录一下。

6.1、搜索模块

记得生成前运行 hexo clean

你需要安装 hexo-generator-searchdb 或者 hexo-generator-search，我选择安装第二个。

1 2	npm install hexo-generator-searchdb npm install hexo-generator-search --save

修改 Hexo 配置文件 _config.yml

search:
path: search.xml
field: post
content: true
template: ./search.xml

修改 主题配置 文件

# Local search
local_search:
  enable: false
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  CDN:

参数	解释
enable	是否开启本地搜索
preload	预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
top_n_per_article	匹配的文章结果，默认显示最开始的 1段结果
unescape	将 html 字符串解码为可读字符串
CDN	搜索文件的 CDN 地址（默认使用的本地链接）

6.2、字数统计插件

插件文档

要为 Butterfly 配上字数统计特性, 你需要如下几个步骤。

打开 hexo 工作目录
运行命令

1	npm install hexo-wordcount --save

修改 主题配置 文件

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

6.3、`RSS` 插件

插件文档

hexo-generator-feed，生成 RSS 文件的插件。

1	npm install hexo-generator-feed --save

修改 Hexo 配置文件 _config.yml

feed:
  enable: true  ##源类型。
  type: atom   ##启用或禁用此插件。默认启用。
  path: atom.xml  ## 源路径。
  limit: false ##默认20   ##源中的最大帖子数（使用 或 显示所有帖子）0 false
  hub:     ##PubSubHubbub hubs 的 URL（如果不使用它，请将其留空）
  content: true ##默认留空    ##（可选）设置为“true”以在 Feed 中包含整个帖子的内容。
  content_limit: 150  ##可选）摘要中使用的帖子内容的默认长度。
  content_limit_delim: ' '  ##可选）如果使用content_limit来缩短帖子内容，则仅在达到字符限制之前最后一次出现此分隔符时进行剪切。默认情况下不使用。
  order_by: -date
  icon: fa-solid fa-rss ##icon.png   ##（可选）自定义源图标。默认为主配置中指定的电子邮件头像。
  autodiscovery: true
  template:

6.4、`sitemap` 插件

hexo-generator-sitemap。站点地图即 sitemap，是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接。站点地图可以告诉搜索引擎网站上有哪些可供抓取的网页，以便搜索引擎可以更加智能地抓取网站。所以我们首先需要生成一个站点地图。

安装站点地图生成插件

1	npm install hexo-generator-sitemap --save

修改 Hexo 配置文件 _config.yml

1
2
3

# 站点地图
sitemap:
  path: sitemap.xml

6.5、文章置顶插件

卸载 hexo-generator-index，然后安装 hexo-generator-index-pin-top

注意到 Hexo 根目录安装。

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

使用方法

在需要置顶的文章的 Front-matter 中加上 top: true / 数字即可，数字越大，文章越靠前。

例如

cover: 
top: 1 #这里加一个top就行
abbrlink: 1d543
date: 2023-07-15 10:32:05

6.6、文章隐藏插件

插件文档

本 Hexo 插件可以在博客中隐藏指定的文章，并使它们仅可通过链接访问。

当一篇文章被设置为「隐藏」时，它不会出现在任何列表中（包括首页、存档、分类页面、标签页面、Feed、站点地图等），也不会被搜索引擎索引（前提是搜索引擎遵守 noindex 标签）。

只有知道文章链接的人才可以访问被隐藏的文章。

安装

1	npm install hexo-hide-posts --save

修改 Hexo 配置文件 _config.yml

# hexo-hide-posts
hide_posts:
  enable: true
  # 可以改成其他你喜欢的名字
  filter: hidden
  # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
  # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

举个栗子：设置 filter: secret 之后，你就可以在 front-matter 中使用 secret: true 来隐藏文章了。
注意：不是所有插件注册的 generator 名称都与其插件名称相同。比如 hexo-generator-searchdb 插件，其注册的 generator 名称就是 xml 和 json，而非 searchdb。因此，在填写 public_generators 参数时要注意使用插件实际注册的 generator 名称（可以查阅对应插件的源码来获取准确的注册名）。

使用

在文章的 front-matter 中添加 hidden: true 即可隐藏文章。

比如我们隐藏了 source/_posts/lorem-ipsum.md 这篇文章

---
title: 'Lorem Ipsum'
date: '2019/8/10 11:45:14'
hidden: true
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

虽然首页上被隐藏了，但你仍然可以通过 https://hexo.test/lorem-ipsum/ 链接访问它。（如果想要完全隐藏一篇文章，可以直接将其设置为草稿）
你可以在命令行运行 hexo hidden:list 来获取当前所有的已隐藏文章列表。
插件也在 Local Variables 中添加了 all_posts 和 hidden_posts 变量，供自定义主题使用。

6.7、文章加密插件

虽然文章隐藏插件可以起到隐藏文章的作用，但是这样一来不不输入链接就会自己也找不到文章，设置为草稿虽然也能实现文章隐藏，但只能本地查看。文章加密插件就很好的解决了这一痛点，文章还是正常显示，但要访问文章内容就需要密码去解密。

插件文档

6.7.1、安装

1	npm install --save hexo-blog-encrypt

快速使用

将 password 字段添加到您文章信息头就像这样

---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

设置优先级

文章信息头 > 按标签加密

6.7.2、高级设置

文章信息头

---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

标签加密

修改 Hexo 配置文件 _config.yml

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

对博文禁用 Tag 加密

只需要将博文头部的 password 设置为 “” 即可取消 Tag 加密。

配置优先级

文章信息头 > _config.yml (站点根目录下的) > 默认配置

6.8、音乐插件

插件文档

安装

1	npm install --save hexo-tag-aplayer

配置

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false

修改 Hexo 配置文件 _config.yml

1
2
3

aplayer:
  meting: true
  asset_inject: false

开启主题的 aplayerInject

在 主题配置 文件中，enable 设为 true 和 per_page 设为 true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入 Aplayer html

为了适配 hexo-tag-aplayer，主题内置的 Meting js 仍为 1.2 版本，并非最新的 2.x 版本。

参数解释

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折迭
storagename	`metingjs`	LocalStorage 中存储播放器设置的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

配置全局吸底，data-fixed 和 data-mini 也必须配置，配置为 true
如果使用 Pjax，则在 class 里需添加 no-destroy，这样防止切换页面时 Aplayer 被销毁

把 aplayer代码 插入到主题配置文件的 inject.bottom 去

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-autoplay="true"> </div>

运行 Hexo 就可以看到网页左下角出现了 Aplayer

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的 pjax 设为 true

6.9、hexo-filter-nofollow 插件

hexo-filter-nofollow，为网站使用到的所有外链添加 rel="noopener external nofollow noreferrer", 可以有效地加强网站SEO和防止权重流失。

6.9.1、安装

1	npm i hexo-filter-nofollow --save

6.9.2、添加配置信息在 Hexo 的配置文件

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

enable 启用插件，缺省值为 true
field 您希望插件继续运行的范围，可以是“site”或“post”，缺省值为site
exclude 排除主机名

6.10、hexo-douban 插件

一个在 Hexo 页面中嵌入豆瓣个人主页的小插件

原理

hexo-douban 目前升级到了 2.x 版本，将原先由插件客户端自行获取数据的逻辑抽到了一个隐藏的服务端中进行，以统一解决数据获取、数据缓存、风控对抗等问题，提高页面生成的成功率和效率。

安装

1	npm install hexo-douban --save

配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

douban:
  id: 162448367
  builtin: false
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
    option:
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    option:
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
    option:
  song:
    path: songs/index.html
    title: 'This is my song title'
    quote: 'This is my song quote'
    option:
  timeout: 10000

6.11、hexo-butterfly-artitalk 插件

给 hexo-theme-butterfly 添加 Artitalk 说说

安装

1	npm install hexo-butterfly-artitalk

LeanCloud 配置参考 Artitalk 使用文档
添加配置信息在 Hexo 的配置文件或者主题的配置文件中添加

# Artitalk
# see https://artitalk.js.org/
artitalk:
  enable: true
  appId:
  appKey:
  path:
  js:
  option:
  front_matter:

参数	解释
appId	【必须】LeanCloud 创建的应用中的 AppID
appKey	【必须】LeanCloud 创建的应用中的 AppKEY
path	【可选】Artitalk 的路径名称（默认为 artitalk，生成的页面为 artitalk/index.html）
js	【可选】更换 Artitalk 的 js CDN（默认为 https://cdn.jsdelivr.net/npm/artitalk）
option	【可选】Artitalk 需要的额外配置
front_matter	【可选】Artitalk 页面的 front_matter 配置

一、准备工作

二、部署 Hexo，版本 6.3.0

三、更换主题

四、在 Github 创建仓库

4.1、Github 创建个人仓库

4.2、设置 git

4.2.1、在 Git 中设置用户名

4.2.2、关于 Git 用户名

4.2.3、为计算机上的每个存储库设置 Git 用户名

4.2.4、为一个仓库设置 Git 用户名

4.2.5、设置邮件地址

4.2.6、生成秘钥

4.3、如果想登陆远端，则需要将 rsa.pub 里的秘钥添加到远端

五、在 GitHub Pages 上部署 Hexo

5.1、安装 hexo-deployer-git

5.2、修改配置

5.3、生成站点文件并推送至远程库。执行 hexo clean && hexo deploy

六、主题配置

6.1、搜索模块

6.2、字数统计插件

6.3、RSS 插件

6.4、sitemap 插件

6.5、文章置顶插件

6.6、文章隐藏插件

6.7、文章加密插件

6.7.1、安装

6.7.2、高级设置

6.8、音乐插件

6.9、hexo-filter-nofollow 插件

6.9.1、安装

6.9.2、添加配置信息 在 Hexo 的配置文件

6.10、hexo-douban 插件

6.11、hexo-butterfly-artitalk 插件

二、部署 `Hexo`，版本 `6.3.0`

四、在 `Github` 创建仓库

4.1、`Github` 创建个人仓库

4.2、设置 `git`

4.2.1、在 `Git` 中设置用户名

4.2.2、关于 `Git` 用户名

4.2.3、为计算机上的每个存储库设置 `Git` 用户名

4.2.4、为一个仓库设置 `Git` 用户名

4.3、如果想登陆远端，则需要将 `rsa.pub` 里的秘钥添加到远端

五、在 `GitHub Pages` 上部署 `Hexo`

5.1、安装 `hexo-deployer-git`

5.3、生成站点文件并推送至远程库。执行 `hexo clean` && `hexo deploy`

6.3、`RSS` 插件

6.4、`sitemap` 插件

6.9.2、添加配置信息在 Hexo 的配置文件