Hexo + NexT + Github搭建个人博客

发表于 2025-01-18 分类于博客阅读次数：本文字数： 1.5k 阅读时长 ≈ 5 分钟

零成本搭建博客，国内访问也没问题，下面就介绍一下我的搭建过程以及一些踩过的坑。参考样式：点击访问

一、安装

安装 Hexo
安装 NexT 主题
1
npm install hexo-theme-next
在 Hexo config 中把主题改为 NexT

theme: next

二、配置相关项

NexT config

因为我是用 npm 安装的主题，所以需要将他的配置文件单独拉取出来，这也是官方推荐的，可以根据下面这篇文章去配置

#config-next-yml

现在我们得到了 NexT 主题的配置文件 _config.next.yml 了

更新主题

1	npm install hexo-theme-next@latest

主题样式

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
drakmode # 深色模式

现在可以看我们的站点了 hexo clean && hexo s

本地实时预览

1 2	hexo g -w hexo generate --watch

常用命令

hexo new <title>  # 新建文章
hexo new page <"page name">   # 建立新页面
hexo clean # 清除缓存文件
hexo list <type>  # 列出所有路由
hexo s  # 启动
hexo clean && hexo d  # 部署

三、主题设置

下面我仅用相关参数表示对应功能，大家在 NexT 配置文件中 Ctrl + F 即可找到它们。

1.侧边栏

toc - 侧边栏目录

favicon - 站点 icon，放 \source 目录下即可，因为我想要把 \source\images 用于存放帖子的图片

custom_logo - 头像， \source

creative_commons - CC 许可证，中文为 zh-hans

menu - 配置菜单项，就是主页、归档那些什么的显示

avatar - 更换侧边栏头像

social - 侧边栏社交链接

links - 友链

2.页脚

powered - 由 Hexo & NexT.Gemini 强力驱动

reward - 打赏

follow_me - 文章底部社交链接

3.帖子

tag_icon - 将正文底部的标签左边的#替换为icon

 - 手动断开文章，使得首页不显示文章全文

发布字数统计

安装

1 2	npm install hexo-word-counter hexo clean

Hexo config: symbols_count_time

NexT config:

symbols_count_time:
  symbols: true  # 帖子字数
  time: true  # 阅读时间
  total_symbols: true  # 站点总字数
  total_time: true  # 站点总阅读时长
  awl: 4  # 平均字长（以单词为单位的字符数）
  wpm: 275  # 每分钟的平均字数

4.自定义

自定义页面

先创建一个页面

1 2	cd [your-site] # 进到站点中 hexo new page [page-name] # 创建页面

在文件开头的 YAML 块（用于写入配置）中添加配置
通过主题的配置文件将你所创建的页面路由写入菜单menu，图标在 font awesome 中找
1
2
3
4
5
6
# 标签
---
title: Tags
date: 2014-12-22 12:39:04
type: tags
---

Hexo 的默认页面

《标签》页：记得加type: tags，它的配置项在 tagcloud
《分类》页：加上 type: categories 即可

自定义 404 页

确保禁用 relative_link
新建 404 页
1
2
cd hexo-site
hexo new page 404
用户是否可以重定向到 404 页面取决于网站托管服务或 Web 服务器的设置，而不是 Hexo。例如，如果使用 Nginx 作为服务器，则还需要在 nginx.conf 文件中配置 404 页面。

自定义样式

自定义文件
与数据文件一样，您可以将所有自定义布局或样式放置存放在 source/_data 中，并在NexT config 中把 custom_file_path 中的注释打开相应的注释打开。

动态背景的配置，由于感觉有点占内存后面我给取消掉了

5.杂项

reading_progress - 顶部阅读进度加载条

back2top - 返回顶部按钮

bookmark - 书签（保存用户阅读进度）

github_banner - 右上角的 GitHub 标签

font - 更换字体

pace - 页面加载期间顶部的进度条

codeblock - 代码块相关设置

搜索服务

npm install hexo-generator-searchdb安装

Hexo config:

search:
  path: search.xml
  field: post
  content: true
  format: html

Next cofig:
1
2
local_search:
enable: true

四、第三方插件

官方插件库

NexT 自带插件

pajx - 加速访问网页

fancybox - 查看图片（更多自定义）

mediumzoom - 查看图片（仅查看，这两个不能同时开）

lazyload - 延迟图片加载

pangu - 在中文和英文数字间加个空格

quicklink - 加快访问速度

pace - 进度条

评论系统

我选择 ~~Waline~~ ，~~非常好用~~ ，不用登录也可以评论，注意一个就是那边的 serverURL 记得填成 Domains 旁的网址，也有 NexT 主题的插件，可以点击进去配置。

Waline官方文档

Waline用 Vercel 部署非常方便，但是奈何被墙国内无法访问😭（白嫖党泪目）最终还是改用了utterances，屈服了，Waline等以后有自己服务器再配置吧（可能）

安装
在 NexT config 中找到并启用 utterances

阅读和访问人数统计

参考这篇博客

五、部署到GitHub Pages

可以看 Hexo 官方文档配合食用

建立名为 <username>.github.io的储存库
在项目目录底下安装插件用于一键部署
1
npm install hexo-deployer-git --save

在 Hexo config 下添加以下配置

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  branch: gh-pages

执行 hexo clean && hexo d，即可配置成功

六、小技巧

在 PowerShell 上通过自定义命令来简化目录导航

效果：

notepad.exe $PROFILE 打开 pwsh 的配置文件

添加以下内容

1
2
3

function order {
    Set-Location -Path "your path"
}

上面的 order 可以改成自己想要的指令，路径根据自己的工作区来设置
完成后保存并关闭文件，使用 . $PROFILE 应用一下配置

最后来说一下正常写文章的流程：

cmd + r 打开 PowerShell（我习惯是这样）
cd 到项目目录
hexo new "文章名称"
typora .\source\_posts\title.md 打开我们的文章
hexo clean && hexo d （也可以先 hexo g && hexo s 本地预览下）

参考文档

NexT 主题官方文档

Hexo 官方文档

utterances配置参考博客

有很多我想完成而未完成的功能，暂时先这样吧~

TBD

配置 404 页面

一、 安装