Hexo + NexT + Github搭建个人博客

文章目录

• [一、 安装](#一、 安装)
• 二、配置相关项
• • [NexT config](#NexT config)
  • 更新主题
  • 主题样式
  • 本地实时预览
  • 常用命令
• 三、主题设置
• • 1.侧边栏
  • 2.页脚
  • 3.帖子
  • • 发布字数统计
  • 4.自定义
  • • 自定义页面
    • [Hexo 的默认页面](#Hexo 的默认页面)
    • [自定义 404 页](#自定义 404 页)
    • 自定义样式
  • 5.杂项
  • • 搜索服务
• 四、第三方插件
• • [NexT 自带插件](#NexT 自带插件)
  • 评论系统
  • • 阅读和访问人数统计
• [五、部署到GitHub Pages](#五、部署到GitHub Pages)
• 六、小技巧
• • • • [在 PowerShell 上通过自定义命令来简化目录导航](#在 PowerShell 上通过自定义命令来简化目录导航)
• 参考文档

---

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

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

一、 安装

1. 安装 Hexo

2. 安装 NexT 主题

   npm install hexo-theme-next

3. 在 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 --> - 手动断开文章，使得首页不显示文章全文

发布字数统计

1. 安装

   npm install hexo-word-counter
   hexo clean

2. Hexo config: symbols_count_time

3. NexT config:

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

4.自定义

自定义页面

1. 先创建一个页面

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

2. 在文件开头的 YAML 块（用于写入配置）中添加配置

3. 通过主题的配置文件将你所创建的页面路由写入菜单menu，图标在 font awesome 中找

   # 标签
   ---
   title: Tags
   date: 2014-12-22 12:39:04
   type: tags
   ---

Hexo 的默认页面

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

自定义 404 页

1. 确保禁用 relative_link

2. 新建 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 - 代码块相关设置

搜索服务

1. npm install hexo-generator-searchdb安装

2. Hexo config:

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

3. Next cofig:

   local_search:
     enable: true

四、第三方插件

官方插件库

NexT 自带插件

pajx - 加速访问网页

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

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

lazyload - 延迟图片加载

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

quicklink - 加快访问速度

pace - 进度条

评论系统

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

Waline官方文档

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

1. 安装

2. 在 NexT config 中找到并启用 utterances

阅读和访问人数统计

参考这篇博客

五、部署到GitHub Pages

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

1. 建立名为 <username>.github.io的储存库

2. 在项目目录底下安装插件用于一键部署

   npm install hexo-deployer-git --save

3. 在 Hexo config 下添加以下配置

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

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

六、小技巧

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

效果：

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

2. 添加以下内容

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

3. 上面的 order 可以改成自己想要的指令，路径根据自己的工作区来设置

4. 完成后保存并关闭文件，使用 . $PROFILE 应用一下配置

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

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

参考文档

NexT 主题官方文档

Hexo 官方文档

utterances配置参考博客