Windows下基于Github和Hexo搭建个人博客

发表于 更新于 分类于

一、前言

⚠️ 2026 年更新说明：本文写于 2021 年，使用的环境是 Hexo 5.3.0 + Node.js 14.x + NexT 8.2.1，目前版本均已严重过时。如果你是新搭建博客，建议直接使用 Hexo 7.x + Node.js 24.x + NexT 8.27 的最新环境。完整的升级/搭建流程请参考 2026 年新版教程：Hexo博客升级指南：从Hexo 5到7、NexT主题升级与GitHub Pages部署（2026版）。下方内容保留作为历史参考。

为了方便其他同学想要搭建自己的博客，本人把自己通过互联网收集的搭建博客的教程进行了整合，由于网上的教程已经很久了，所及在他们给出教程的基础上更新一些自己理解的东西，之前也搭建过博客，但是觉得不够正式，很多东西还是初次接触，例如图床等功能，由于本人不是CS专业，所以我是以非CS专业的角度写这个教程，如果很多原理阐述不够清晰，希望看到的大佬谅解。本人是在Windows操作系统，基于Github Pages和Hexo来搭建博客。为了帮助和我一样的小白也能搭建属于自己的博客，我会尽可能把教程说得明白点，希望帮助到您！

我搭建博客的环境如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo: 5.3.0
hexo-cli: 4.2.0
os: Windows_NT 10.0.19041 win32 x64
node: 14.15.4
v8: 8.4.371.19-node.17
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1i
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0

本人看到网上很多大佬使用的都是NexT主题，于是为了能够方便解决自己搭建博客过程中遇到的问题，于是自己选的也是NexT主题，NexT主题的版本为 NexT version 8.2.1

二、介绍Github Pages和Hexo

GitHub Pages

GitHub Pages，是用来托管 GitHub 上静态网页的免费站点，那 GitHub Pages具体有哪些功能呢：

  • 有足够的免费空间（1G），资料自己管理，保存可靠；
  • 享受 GitHub 的便利，上面有很多大佬，眼界会开阔很多；
  • 可以使用很多现成的博客框架，搭建过程简单快速。

HEXO

Hexo 是一个简单、快速、强大的静态博客框架，出自台湾大学生tommy351之手。其实也可以用 Jekyll、Octopress 搭建个人博客，但是过程要繁琐许多。相比之下 利用Hexo环境搭建博客更轻便，更快捷，下面是其官网强调的四大特点：

  • 极速生成静态页面
  • 一键部署博客
  • 丰富的插件支持
  • 支持 Markdown

三、准备工作

3.1注册Github账号

按照Github官网注册地址

img1

👆这是注册的截图，记住用户名username是英文字母，（后面的username就代表你注册的用户名，后续不再解释）

与GitHub 建立好连接之后，就可以方便的使用它提供的Pages 服务，GitHub Pages分两种，一种是用自己注册的GitHub用户名建立的 username.github.io 这样的用户&组织站点，另一种是依附项目的Pages。

想建立个人博客是用的第一种，形如 username.github.io 这样的可访问的站点，每个用户名下面只能建立一个这样的博客。

3.2在Github建立自己的仓库 Repositories

img2

👆点击 New 新建一个仓库 Repositories

img3

👆可以选择 Public 和 Private 模式，可以添加 Add a README file 即一个可以解释你的博客是干什么的文件，可以选择一个 license 来确定你的仓库所遵循的协议，一般大家使用的是 MIT 协议。

更新解释：首先如果是您是想要使用Github Pages进行免费搭建，则选择 Public ，如果您选择 Private 功能，则如果使用Github Pages则需要付费（~~所以选择 Public ~~）图片是想试一试 Private 功能，看看能不能用Github Pages功能，发现并不可以，所以后面还是改成 Public 。 Private 改成 Public 功能，首先点击 setting ，然后往下翻找到 Danger Zone ，然后点击 Change visibility 选择 Make public 并输入仓库名进行确认即可。选择了 Public 功能之后，在 setting 界面，找到 GitHub Pages 标题下的 Source ，把 None 改成 main 即可。然后刷新页面，之后的设置就可以通过域名 username.github.io 访问啦！

img4

👆于是你可以看到这样的界面，其中 README.md 文件会显示出来，还有一个是 LICENSE 文件，还可以看到一个叫做 main 的方框，先记住这个main文件夹！

更新解释下为什么不是master而是main
GitHub首席执行官于2020年6月12日公开表示，GitHub正致力于将其服务中的 master 一词替换为 main 这样的中性词，以避免任何不必要的提及“奴隶制”。——摘自某新闻

如果您还不懂Github的基本使用，您可以看这篇文章：极简Github上手教程

3.3安装GIt软件

什么是Git？简单来说Git是开源的分布式版本控制系统，用于敏捷高效地处理项目。我们网站在本地搭建好了，需要使用Git同步到GitHub上。

首先安装git去官网下载Git软件最新的安装包exe文件（Windows系统），如果您无法访问，我这里下载了 git release 2.30.0.2-64-bit ，点我下载2.30.0版本，本人使用的git就是这个版本。安装就不用教了…，不过还是提醒下，Git可以安装在非系统盘，即D盘等…

现在的机子基本都是 64位 的，选择 64位 的安装包，下载后安装，在命令行里输入 git 测试是否安装成功，若安装失败，参看其他详细的Git安装教程：点我查看教程

3.4Git和Github账号绑定

安装成功后，需要将您的Git与GitHub帐号绑定，这里建议您先确定在哪里放你的博客文件，先建一个文件夹，然后到这个文件夹底下，鼠标右击打开Git Bash：

img5

👆鼠标右键点击 Git Bash Here

img6

👆然后会弹出上图所示的窗口，然后就要设置 user.name 和 user.email ，即 你的Github用户名 和 你的Github注册邮箱 ，操作如下：

1
2
git config --global user.name "你的GitHub用户名(your Github username)"
git config --global user.email "你的GitHub注册邮箱(your Github register email)"

示例 (For example)

1
2
git config --global user.name "h****t"
git config --global user.email "h****t@gmail.com"

生成SSH密钥文件：

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱(your Github register email)"

示例 (For example)

1
ssh-keygen -t rsa -C "h****t@gmail.com"

然后直接三个回车即可，默认不需要设置密码

img7

👆然后我们要找到这个文件夹，一般在 C:\Users\管理员\.ssh，然后进入.ssh 的文件夹中，找到id_rsa.pub密钥，可以使用 Notepad++ 或者 Sublime 软件打开编辑，将里面的内容全部复制，复制其中的SSH key

img8

👆然后打开GitHub_Settings_keys 页面，新建 NEW SSH Key ，Title为标题，任意填即可，将刚刚复制的 id_rsa.pub 内容粘贴进去，最后点击 Add SSH key 。然后就会生成一个公钥。

在Git Bash中检测GitHub公钥设置是否成功，输入：

1
ssh git@github.com

输入之后若出现下面的

1
Hi h****t! You've successfully authenticated, but GitHub does not provide shell access.Connection to github.com closed.

则GitHub和git连接成功。这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

如果您是想在本地管理和切换多个 Github 账号，可以查看这个教程：点我查看教程
但是本人为了图方便（事实证明这样也可行的），可以在 .ssh 文件夹中新建两个文件夹，分别命名为两个名字用以区分，直接把之前账号的 id_rsa.pub 密钥放在新建的其中一个文件夹①中，经过实践，发现这样密钥也可以成功连接到新的Github账户。如果要切换回另一个Github账户，则把 .ssh 文件夹的文件再放到 .ssh 下的新建的另一个文件夹②中，再把文件夹①中的文件全部取出放回 .ssh 文件夹中。这样就能轻易实现两个账号的博客进行切换。但是这里注意，因为切换了文件，一定要重新GIt Bash 连接到对应的相应的Github账户。

1
2
>git config --global user.name "另一个GitHub用户名"
git config --global user.email "另一个GitHub注册邮箱"

3.5安装软件

3.5.1安装Node.js

由于Hexo静态博客是基于Node.js，Node.js下载地址：点我下载

img9

👆如图所示，Node.js有两种版本，LTS 和 Current ，LTS是长期稳定版，Current是最新版，保险起见选择长期稳定版！然后进行安装即可。可以安装在非系统盘（如果您觉得你系统C盘空间很大无所谓…）

注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在命令行中输入 node -v、npm -v，测试两个是否都安装成功了：

如果不会环境变量安装可以查看这个教程：点我查看教程

img10

👆如果出现版本信息说明两个都安装成功，可以继续进行下一步！到这了，安装Hexo的环境已经全部搭建完成。为自己鼓个掌先👏

我们继续……

3.5.2npm的常用指令

我们先了解下npm的常用指令，后面会涉及到，不至于自己不理解。

安装模块（包）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//全局安装
npm install 模块名 -g

//本地安装
npm install 模块名

//一次性安装多个
npm install 模块1 模块2 模块n --save

//安装运行时依赖包
npm install 模块名 --save

//安装开发时依赖包
npm install 模块名 --save-dev
查看安装目录：
1
2
3
4
5
//查看本地安装的目录
npm root

//查看全局安装的目录
npm root -g
卸载模块（包）：
1
2
3
4
5
//卸载本地模块
npm uninstall 模块名

//卸载全局模块
npm uninstall -g 模块名
更新模块（包）:
1
2
3
4
5
//更新本地模块
npm update 模块名

//更新全局模块
npm update 模块名 -g
查看当前安装的模块（包）:
1
2
3
4
5
//查看本地模块
npm ls

//查看全局模块
npm ls -g
查看模块（包）的信息：
1
npm info 模块名

注意事项 ：加上-g命令后，会在全局安装，模块会被安装到全局路径上(在安装路径 C:/Program Files/nodejs/node_modules/npm/npmrc查看)，不加-g就会安装在博客根目录，就是自己保存博客文件的文件夹中。

  • npm install xxx ：本地安装，将模块下载到当前所在路径中。
  • save参数会在package文件中写入依赖。例如 npm install XXX –save 会在package.json的dependencies属性下添加XXX。下次直接使用 npm install 指令即可安装该模块。

3.5.3npm更新模块并同步到package.json中

这一小节有点Bug🤦‍：点我跳过这条🏀

这是根据npm官网给出教程做的：点我看更新本地安装包教程

（1）较麻烦的更新步骤，查看需要更新的版本

1
npm outdated

该命令会列出所有需要更新的项目，修改package.json中需要更新的包对应的版本号

1
2
npm update
npm install

由于npm update只能按照package.json中指定的版本号进行更新，太繁琐复杂，接下来使用插件更新！

（2）使用插件更新npm模块包

参考教程：ncu插件官方配置文档

全局安装 npm-check-updates 模块包

1
npm install -g npm-check-updates

查看需要更新的版本

1
npm-check-updates

或者直接简写为ncu，该命令会列出需要更新的包，更新

1
ncu -a

更新包的同时更新package.json文件
更新node_modules

1
npm install

🏀npm更新模块并同步到package.json中有Bug

四、安装Hexo

4.1Hexo下载安装

使用npm命令安装Hexo，输入：

1
npm install -g hexo-cli

这个安装时间较长耐心等待，安装完成后，初始化我们的博客。

4.2 部署Hexo

Hexo 的部署可采用如下方法，输入命令：

1
hexo init [文件名]

img11

👆如果您已经确定好在哪个文件夹，就可以直接在确定的文件夹下(打开到这个文件夹下)用命令hexo init即可，无需[文件名]，如果载加这文件名则会又生成一个文件夹！通过观察可以发现，输入hexo init命令之后会生成一系列文件。

4.3预览最初的博客效果

为了检测我们的博客的最初出厂设置的效果，分别按顺序输入以下三条命令：

1
2
3
hexo clean
hexo g
hexo s

这些命令在后面作介绍，完成后，打开浏览器输入地址：localhost:4000，即可看到网页最开始的出厂设置的样式！

那么此时我们就已经顺利完成网站的本地搭建了！👏~

4.4hexo博客常用命令解释

1
2
3
4
5
6
7
8
9
10
11
12
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动本地预览服务预览
hexo d == hexo deploy #部署到github发布到网络
hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

4.5推送网站至Github

由前面知道本地预览是hexo s，接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。而如果要推送至Github进行发布则需要hexo d或hexo deploy命令实现。

首先我们去博客根目录下，就是hexo init 命令下的目录，为搞清楚，有必要说明下：

  • 在blog根目录里的_config.yml称为站点配置文件
  • 进入根目录里的themes文件夹，里面也有个_config.yml文件，这个称为主题配置文件

下一步将我们的博客与GitHub关联起来，打开站点配置文件_config.yml，翻到最后进行修改：

1
2
3
4
deploy:
  type: git
  repository: 填写你的仓库所在的连接地址
  branch: main

示例（for example）

1
2
3
4
deploy:
  type: git
  repository: https://github.com/username/username.github.io
  branch: main

保存站点配置文件。其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库的main分支里（main分支是Github Pages默认识别的文件夹的意思）。

最后安装Git部署插件，在博客根目录下启动Git bash here输入命令：

1
npm install hexo-deployer-git --save　

如果您遇到hexo d之后，显示：

1
2
3
4
5
$ hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...

可以看下Github的关于这个问题的issue：https://github.com/hexojs/hexo/issues/4636
可以这样：

1
2
npm un hexo-deployer-git
npm i hexojs/hexo-deployer-git

安装好hexo-deployer-git插件之后，我们就可以试一下hexo d

1
2
3
4
5
6
7
8
9
10
11
$ hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
……
nothing to commit, working tree clean
Everything up-to-date
Branch 'master' set up to track remote branch 'main' from 'git@github.com:username/username.github.io.git'.
INFO  Deploy done: git

img12

👆使用hexo d部署完成之后，打开浏览器输入：username.github.io（username是你的Github用户名，后面不再做过多说明），可以查看到部署到Github上main分支的网页情况（因为main是Github Pages 默认识别的分支）

这里有必要说明下：如果输入域名之后，页面显示404，很有可能是因为Github设置的是Private, 需要将Pribate改成Public，Private改成Public功能：首先点击setting，然后往下翻找到Danger Zone，然后点击Change visibility选择Make public并输入仓库名进行确认即可。选择了Public功能之后，在setting界面，找到GitHub Pages标题下的Source，把None改成main即可。然后刷新页面，等待片刻就可以通过域域名username.github.io访问啦！

4.6自定义域名

如果不喜欢username.github.io的域名，如果你在某服务商购买了一个域名（非子域名），则如果我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。这里演示腾讯云

首先你需要自己购买一个域名，这个不再赘述，可以自行查找教程…

4.6.1解析自定义域名

如果你已经拥有一个域名，则登录到腾讯云，并进入：点我进入腾讯云 ，点击你的域名右边的解析

打开电脑的cmd ，并输入：

1
ping username.github.io

确定你的博客域名所在Github的真实ip地址

1
2
3
4
5
6
7
8
9
10
11
12
ping hizablet.github.io

正在 Ping username.github.io [185.***.111.153] 具有 32 字节的数据:
来自 185.***.111.153 的回复: 字节=32 时间=62ms TTL=49
来自 185.***.111.153 的回复: 字节=32 时间=67ms TTL=49
来自 185.***.111.153 的回复: 字节=32 时间=67ms TTL=49
来自 185.***.111.153 的回复: 字节=32 时间=72ms TTL=49

185.***.111.153 的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 62ms，最长 = 72ms，平均 = 67ms

记录下来：185.***.111.153，然后回到腾讯云的解析界面

img13

👆需要点击添加记录 并添加两个值：
值1：主机记录值可以为www或其他的英文，记录类型CNAME，线路类型默认，记录值username.github.io
值2：主机记录值@，记录类型A，线路类型默认，记录值185.***.111.153

4.6.2部署自定义域名

如果解析完毕（即添加了两个值之后）就需要回到GitHub部署自定义域名：

img14

首先到博客所在的仓库，点击Setttings，在Settings下的Options页面下，找到Github Pages目录下的Custom domain，在里面输入自定义的域名idiot.你的域名，然后点击Save即可。在浏览器中输入自定义的域名就可以跳转到username.github.io访问自己搭建的博客了。👏~

五、安装博客主题

5.1主题选择

前情回顾：我们在之前介绍了Github Pages和Hexo，并安装了Node.js和Hexo，并部署博客到自己的Github Pages。但是我们可能不是很喜欢默认的landscape主题，所以我们可以去挑选我们自己喜欢的主题。

hexo做了一个仓库awesome-hexo-themes，根据主题的star数进行排序，可以参考别人使用的主题，或者选择一个自己喜欢的主题。

这里选出了star数超过1k的主题（star更新日期：2021/2/9）

Name Description Star
iissnan/hexo-theme-next Elegant theme for Hexo. 15.5k
litten/hexo-theme-yilia 一个简洁优雅的hexo主题 A simple and elegant theme for hexo. 7.8k
theme-next/hexo-theme-next Elegant and powerful theme for Hexo. 6.3k
ppoffice/hexo-theme-icarus A simple, delicate, and modern theme for the static site generator Hexo. 4.3k
viosey/hexo-theme-material Material Design theme for hexo. 3.9k
blinkfox/hexo-theme-matery A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com/ 2.9k
yscoder/hexo-theme-indigo 一个Material Design风格的Hexo主题。 https://imys.net/ 2.7k
fluid-dev/hexo-theme-fluid 🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo 2.1k
probberechts/hexo-theme-cactus 🌵 A responsive, clean and simple theme for Hexo. 1.8k
pinggod/hexo-theme-apollo 🌅 a concise hexo theme 1.8k
jerryc127/hexo-theme-butterfly 🦋 A Hexo Theme: Butterfly 1.8k
LouisBarranqueiro/hexo-theme-tranquilpeak 💄 A gorgeous responsive theme for Hexo blog framework 1.7k
Molunerfinn/hexo-theme-melody 🎹A simple & beautiful & fast theme for Hexo. 1.3k
ahonn/hexo-theme-even 🚀 A super concise theme for Hexo 1.2k
fi3ework/hexo-theme-archer 🏹 A smart and modern theme for Hexo. 1.1k
ppoffice/hexo-theme-hueman A redesign of Alx’s wordpress theme Hueman, ported to Hexo. 1.1k
forsigner/fexo A minimalist design theme for hexo. 1.1k
wuchong/jacman Jacman is a fresh looking and responsive theme for Hexo with more features based on Pacman. 1k

如果想查看完整的所有主题，链接：https://github.com/FoxerLee/awesome-hexo-themes

想预览下主题的样式，点击相应的主题链接进入其仓库，然后，在仓库的右边有他的展示Demo链接，可以点击进行查看，看看自己喜不喜欢。

或者您也可以直接进入这里进行查看：https://hexo.io/themes/

我这里选择hexo-theme-next主题，因为Next主题的Star数目最多，这是其一，但是另外一个原因是如果遇到自己不能解决的问题可以方便在互联网上找到答案！

5.2Next主题安装与配置

官方文档：https://github.com/next-theme/hexo-theme-next

如果你要安装最新版本，则在博客根目录（就是你博客的文件夹），然后右键Git Bash Here，输入：

1
npm install hexo-theme-next@latest

则会在你的博客根目录的node_modules文件夹中有一个hexo-theme-next的文件夹，剪切这个文件夹，粘贴到博客根目录下的themes文件夹中，粘贴后，可以改下文件夹的名字，我是将文件夹名字命名为next_8.2.1，也可以命名其他的英文名字，后面配置对应就行！

然后打开博客根目录下的_config.yml站点配置文件，因为next_8.2.1文件夹下也由一个_config.yml主题配置文件，这里要注意区分下！

这里我把**站点配置文件_config.yml**代码解释下：

站点配置文件

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 这里可以写你的网站名字
subtitle: '写网站的子标题'
description: '描述'
keywords: 网站的关键词
author: 作者的名字
language: zh-CN #语言中文
timezone: 'Asia/shanghai' #时区选上海

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
#url: 你的解析的地址！
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next_8.2.1 #这里的文字一定要对应前面在themes文件夹下的文件夹名字，我是命名为next_8.2.1。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/username/username.github.io #这里是你的仓库地址
  branch: main #由于GitHub的master涉及种族歧视，默认分支已经改成了main

这里再强调下：如果你自己命名了文件夹的名字，在_config.yml主题配置文件中一定要匹配，就是如下：

1
theme: next_8.2.1 #这里的文字一定要对应前面在themes文件夹下的文件夹名字，我是命名为next_8.2.1。

这样就安装并且配置好了Next主题了！

六、Next主题配置

打开博客根文件夹的themes文件夹下的_config.yml主题配置文件，不是站点主题文件！

6.1风格配置

通过修改主题配置文件_config.yml的scheme字段，配置不同的风格

1
2
3
4
5
# Schemes
#scheme: Muse #Muse风格预览：https://theme-next.js.org/muse/
#scheme: Mist #Mist风格预览：https://theme-next.js.org/mist/
scheme: Pisces #Pisces风格预览：https://theme-next.js.org/pisces/
#scheme: Gemini #Gemini风格预览：https://theme-next.js.org/

我选的是Pisces风格…
配置夜间模式，如下：

1
2
# Dark Mode
darkmode: false #如果要开启即把false改成true即可

6.2站点信息设置

6.2.1网站Logo设置

通过修改主题配置文件_config.yml的favicon字段，配置网站logo

1
2
3
4
5
small: /images/favicon-16x16-next.png #在博客根目录下的图片
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json

6.2.2博客版权设置

通过修改主题配置文件_config.yml的Creative Commons 4.0 International License.字段，配置博客的版权设置

1
2
3
4
5
creative_commons:
  license: by-nc-sa #CC协议
  sidebar: true #在博客侧边显示
  post: true #在文章页面显示
  language: deed.zh

6.3菜单设置

通过修改主题配置文件_config.yml的menu字段，选定需要展示的菜单项。

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

其中，home代表主页，categories代表分类页，about代表关于页面，archives代表归档页，commonweal代表404页面（page not found时候显示的页面）。

6.3.1 添加about关于页面

新建about页面，即关于自己的博客的描述。

打开本地的博客根目录，右键Git Bash Here，输入：

1
hexo new page about

输入命令后，在博客根目录的source文件夹下会新生成一个新的文件夹about，在该文件夹下会有一个index.md文件，修改about/index.md这个文件：

1
2
3
4
5
6
7
8
---
title: about
date:
---
## 介绍下自己

我就是我，颜色不一样的烟火🎇
你可以在这里阅读我的生活=>[My life](https://username.github.io)

img15

👆about关于页面的效果

6.3.2添加tags标签页面

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found(或者跳转到添加的404页面)

添加标签页面的具体方法，在博客根目录下，右键Git Bash Here，输入如下命令：

1
hexo new page tags

为方便解释，后面的博客根目录路径均用root代替

设置页面类型，在上步新生成的root/source/tags/index.md中添加type: “tags”，index.md文件内容如下：

1
2
3
4
5
---
title: tags
date: 2021/2/9 00:00:00
type: "tags"
---

当要为某一篇文章添加标签，只需在root/source/_post目录下的具体文章的tags中添加标签即可，如：

1
2
3
4
5
6
---
title: 基于Hexo和Github搭建博客
date:
tags: [npm, hexo, github]
categories: 搭建博客
---

img16

👆tags标签页面的效果

6.3.3添加分类页面

添加分类页面的具体方法，在博客根目录下，右键Git Bash Here，输入如下命令：

1
hexo new page categories

输入命令后，在root/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件。

在上步新生成的root/source/categories/index.md中添加type: "categories"，index.md文件内容如下：

1
2
3
4
5
---
title: categories
date: 2021-02-10 00:00:00
type: "categories"
--

当要为某一篇文章添加分类，只需在root/source/_post目录下的具体文章的categories中添加分类即可，如：

1
2
3
4
5
6
---
title: 基于Hexo和Github搭建博客
date: 2021-02-09
tags: [npm, hexo, github] #这是标签
categories: 搭建博客 #这就是分类
---

img17

👆这就是categories分类页面的效果

6.3.4添加404页面

打开站点根目录，右键Git Bash Here输入：

1
hexo new page 404

之后在root/source/404/index.md文件中添加：

  • 第一种404是自定义型：
1
2
3
4
5
6
7
8
9
10
11
---
title: 404-找不到页面
date: 2016-05-21 18:53:59
comments: false
permalink: /404
---
<center>404 Not Found<center>
-------
<center>**对不起，您所访问的页面不存在或者已删除**
你可以**[点击此处](http://www.*****.com)**返回首页。
你也可以<a href="#" class="popup-trigger">**点击此处**</a>重新搜索结果。</center>
  • 第二种404是腾讯公益404界面，还是在root/source/404/index.md文件中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

6.5语言设置

如果想要博客主题显示为中文，需要在站点配置文件_config.yml中修改：

可以看代码解释进行相应的修改：点击定位到：站点配置文件

Tips：点我看如何实现定位跳转功能

6.6侧边栏设置

6.6.1头像设置

使用本地图片，在博客根目录的themes文件夹下的next_8.2.1/source/uploads/下放置头像文件avatar.gif，更改avatar，设置头像：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: false #是否设置头像是圆形边框
  # If true, the avatar will be rotated with the cursor.
  rotated: false #是否设置头像旋转

6.6.2设置社交账号

在NexT主题配置文件中找到social

1
2
3
4
5
6
7
8
9
10
11
social:
  #GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:youremail@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

6.6.3设置社交图标

1
2
3
4
social_icons: #社交图标
  enable: true
  icons_only: false #只显示社交图标
  transition: true

6.6.4添加友情链接

1
2
3
4
5
6
7
8
9
10
# Blog rolls
links_settings:
  icon: fa fa-link
  title: 友情链接
  # Available values: block | inline
  layout: block

links: #友情链接添加区域
  #Title: https://example.com
  blog: 添加链接！

6.6.5显示文章目录

1
2
3
4
5
6
7
8
9
10
toc: #目录
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

6.7footer网页底部设置

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
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  #since: 2020 #设定网站开始的年份

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false #图标是否动态
    # Change the color of icon, using Hex Code.
    color: "#ff0000" #改变图标颜色

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: #版权声明

  # Powered by Hexo & NexT
  powered: false #网站主题驱动是否显示

  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
  beian: #网站备案设置
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

6.8文章发布设置

6.8.1是否显示文章描述description

1
2
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

6.8.2是否显示阅读全文

1
2
3
# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

6.8.3文章元信息设置

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true #是否显示文字
  created_at: true #文章创建日期是否显示
  updated_at: #文章更新时间是否显示
    enable: false
    another_day: true
  categories: true #文章分类是否显示

6.8.4文章字数设置

1
2
3
4
5
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true #文章字数和阅读时长与更新时间换行隔开
  item_text_total: false #网页最后面显示站点字数和时间文字

6.8.5显示文章标签图标

1
2
 # Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

6.8.6文章赞赏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
#Donate (Sponsor) settings
#Front-matter variable (unsupport animation).
reward_settings:
  #If true, a donate button will be displayed in every article by default.
  enable: true #是否显示赞赏图标
  animation: false
  #comment: Buy me a coffee

reward: #赞赏图片设置
  wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

6.8.7文章末尾关注设置

1
2
3
4
5
6
7
#Subscribe through Telegram Channel, Twitter, etc.
#Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

6.8.8文章编辑设置

1
2
3
4
5
6
#Post edit
#Easily browse and edit blog source code online.
post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

6.9设置首页文章截断

  • 「首选」直接在文章你想要截断的部位添加<!-- more -->手动进行截断！
  • 「法二」在文章中的front-matter添加description，并提供文章摘录：
1
2
3
4
5
6
7
---
title: Windows下利用Hexo搭建个人博客
date: 2021-02-09 19:34:22
tags: [npm, hexo, github]
categories: 搭建博客
description: 你的文章描述
---
  • 「法三」安装auto_excerpt插件自动截断文章内容作为摘要，在NexT主题7.6.0版本之后，此功能被移除，可以自行安装第三方插件：
1
npm install hexo-excerpt --save

然后在站点配置文件_config.yml中设置：

1
2
3
4
5
excerpt:
  depth: 5
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

作出以上改动后，请先执行hexo clean

6.10其他设置

6.10.1代码块高亮设置

就是博客如果添加代码块的话，可以更好看点，具体设置：点我看具体设置

  • 首先去站点配置文件
1
2
3
4
5
6
7
8
9
10
11
12
highlight:
  enable: true #开启highlight
  line_number: true #是否显示行数
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false # highlight 的 css 文件中的类不添加 hljs-* 前缀
prismjs:
  enable: false #关闭ptismjs
  preprocess: true
  line_number: true
  tab_replace: ''
  • 然后去主题配置文件

可以去官网预览代码主题样式：点我查看样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock: #代码块设置样式
  #Code Highlight theme
  #All available themes: https://theme-next.js.org/highlight/
  theme: #highlight主题样式
    light: atom-one-dark
    dark: atom-one-dark
  prism:
    light: prism-dark
    dark: prism-dark
  #Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

6.10.2回到顶部设置

1
2
3
4
5
6
back2top:
  enable: true
  #Back to top in sidebar.
  sidebar: true #在侧边栏显示回到顶部
  #Scroll percent label in b2t button.
  scrollpercent: false #显示阅读进度百分比

6.10.3显示阅读进度条

1
2
3
4
5
6
#Reading progress bar
reading_progress:
  enable: true #是否开启阅读进度条
  position: top #设置阅读进度条的位置 top | bottom
  color: "#37c6c0" #设置进度条的颜色
  height: 3px #设置进度条的宽度

6.10.4开启书签功能

1
2
3
4
5
6
7
8
#Bookmark Support
bookmark:
  enable: true
  #设置标签图标的颜色
  color: "#222"
  #如果为auto，请在关闭页面或单击书签图标时保存阅读进度。
  #如果是manual的，则只能通过单击书签图标进行保存。
  save: auto

到这里博客就配置差不多啦！