Hexo + NexT + Github搭建个人博客
文章目录
- 一、 安装
- 二、配置相关项
- NexT config
- 更新主题
- 主题样式
- 本地实时预览
- 常用命令
- 三、主题设置
- 1.侧边栏
- 2.页脚
- 3.帖子
- 发布字数统计
- 4.自定义
- 自定义页面
- Hexo 的默认页面
- 自定义 404 页
- 自定义样式
- 5.杂项
- 搜索服务
- 四、第三方插件
- NexT 自带插件
- 评论系统
- 阅读和访问人数统计
- 五、部署到GitHub Pages
- 六、小技巧
- 在 PowerShell 上通过自定义命令来简化目录导航
- 参考文档
零成本搭建博客，下面就介绍一下我的搭建过程以及一些踩过的坑。参考样式：点击访问
零成本搭建博客，国内访问也没问题，下面就介绍一下我的搭建过程以及一些踩过的坑。参考样式：点击访问
一、 安装
-
安装 Hexo
-
安装 NexT 主题
npm install hexo-theme-next -
在 Hexo config 中把主题改为 NexT
theme: next
二、配置相关项
NexT config
因为我是用 npm 安装的主题，所以需要将他的配置文件单独拉取出来，这也是官方推荐的，可以根据下面这篇文章去配置
#config-next-yml
现在我们得到了 NexT 主题的配置文件 _config.next.yml 了
更新主题
npm install hexo-theme-next@latest
主题样式
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
drakmode # 深色模式
现在可以看我们的站点了 hexo clean && hexo s
本地实时预览
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
<!-- more --> - 手动断开文章，使得首页不显示文章全文
发布字数统计
-
安装
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.自定义
自定义页面
-
先创建一个页面
cd [your-site] # 进到站点中 hexo new page [page-name] # 创建页面 -
在文件开头的 YAML 块（用于写入配置）中添加配置
-
通过主题的配置文件将你所创建的页面路由写入菜单menu，图标在 font awesome 中找
# 标签 --- title: Tags date: 2014-12-22 12:39:04 type: tags ---
Hexo 的默认页面
- 《标签》页：记得加
type: tags，它的配置项在tagcloud - 《分类》页：加上
type: categories即可
自定义 404 页
-
确保禁用
relative_link -
新建 404 页
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:
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的储存库
-
在项目目录底下安装插件用于一键部署
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 的配置文件 -
添加以下内容
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配置参考博客