hexo搭建博客记录

<font face="楷体">这是一次hexo搭建博客并引入archer主题的使用记录。
环境准备

首先是hexo工具的安装使用，这个工具是依赖于nodejs的一个命令行工具，并且各种使用也依赖于node生态，所以需要先进行node的安装配置，具体参考这里。
而后使用node的包管理工具，或npm，或pnpm，抑或cnpm都行，执行全局安装命令下载hexo，必须是全局安装，否则无法使用hexo：

1. $ npm install hexo -g
2. $ hexo -v
3. hexo-cli: 4.3.2
4. os: linux 6.11.0-19-generic Ubuntu 24.10 24.10 (Oracular Oriole)
5. node: 20.16.0

复制代码

安装完成后，可以输出hexo版本来检查是否安装和配置完成，安装完成以后，就可以使用hexo工具来操作了，对于hexo的应用，都源自于这个命令行工具，下面是hexo工具的一些使用命令：

1. # 创建一个hexo博客文件夹，名为test
2. $ hexo init test
3. # 在博客文件夹中执行，
4. # 创建一篇名为test的markdown文章，可在source/_posts下找到
5. $ hexo new test
6. # 将现有_posts中的md文章进行转化，生成对应html格式的文章在public文件夹
7. $ hexo generate
8. # 删除public文件夹
9. $ hexo clean
10. # 利用node来启动服务器，预览博客效果，这需要在hexo generate之后进行
11. $ hexo server
12. # 部署本地博客文章都对应服务器
13. $ hexo deploy

复制代码

hexo命令有缩写使用，上面的都是完整命令，hexo有自己的官网，很多使用，可以在官方文档去进行需要的检索，不过国内访问可能比较麻烦，记得科学一下。
哈吉咩

首先就是初始化，创建一个blogs项目文件夹，进行我们需要的配置自定义。

1. $ hexo init blogs
2. $ cd blogs && ls
3. _config.landscape.yml<%- partial('utterances') %>  _config.yml<%- partial('utterances') %>  node_modules<%- partial('utterances') %>  package.json<%- partial('utterances') %>  scaffolds<%- partial('utterances') %>  source<%- partial('utterances') %>  themes<%- partial('utterances') %>  yarn.lock
4. $ ls source/_posts/
5. hello-world.md
6. $ hexo g
7. INFO<%- partial('utterances') %>  Validating config
8. INFO<%- partial('utterances') %>  Start processing
9. INFO<%- partial('utterances') %>  Files loaded in 267 ms
10. INFO<%- partial('utterances') %>  Generated: archives/index.html
11. INFO<%- partial('utterances') %>  Generated: archives/2025/index.html
12. INFO<%- partial('utterances') %>  Generated: archives/2025/04/index.html
13. INFO<%- partial('utterances') %>  Generated: index.html
14. INFO<%- partial('utterances') %>  Generated: css/style.css
15. INFO<%- partial('utterances') %>  Generated: fancybox/jquery.fancybox.min.css
16. INFO<%- partial('utterances') %>  Generated: js/jquery-3.6.4.min.js
17. INFO<%- partial('utterances') %>  Generated: fancybox/jquery.fancybox.min.js
18. INFO<%- partial('utterances') %>  Generated: js/script.js
19. INFO<%- partial('utterances') %>  Generated: 2025/04/06/hello-world/index.html
20. INFO<%- partial('utterances') %>  Generated: css/images/banner.jpg
21. INFO<%- partial('utterances') %>  11 files generated in 348 ms
22. $ ls public
23. 2025<%- partial('utterances') %>  archives<%- partial('utterances') %>  css<%- partial('utterances') %>  fancybox<%- partial('utterances') %>  index.html<%- partial('utterances') %>  js

复制代码

如上，简单介绍项目结构和重要的markdown文章所在source文件夹以及博客展示以及部署需要的public文件夹，创建一下文章进行一下演示：
1. 新增一篇post：

在blogs下执行：

1. $ hexo new test

复制代码

然后用需要的编辑器来编辑source/_posts/test.md即可：

1. ---
2. title: test
3. date: 2025-04-06 17:20:57
4. tags:
5. ---
7. <font face="楷体">
9. 这里是摘要。
13. ## 标题1
15. *这是第一段落，我斜了*
17. > 引用
19. * 列表项1
20. * 列表项2
22. ### 子标题1.1
24. [这是菜鸟教程网站](https://www.runoob.com/)
27. <%- partial('utterances') %>  <%- partial('utterances') %>  <img src="https://img2024.cnblogs.com/blog/2263862/202504/2263862-20250406155226402-1286469402.png" width="600">
30. 

复制代码

如上，hexo创建的文章都会带有一个头部信息进行区分，其下才是个人编辑，上面这份既有正经markdown语法，也用了html语法来进行编辑，因为渲染引擎支持，所以完全可以使用html语法，另外html也能更精准地进行表达和样式设计。

还有一件事，要在md文章中引入图片，需要在source中创建images文件夹，才能如上面那样本地引入。

2.本地预览：

进行本地预览需要生成对应html文本，而后应用hexo改造的node内置服务器的启动：

1. $ hexo g && hexo s
2. INFO<%- partial('utterances') %>  Validating config
3. INFO<%- partial('utterances') %>  Start processing
4. INFO<%- partial('utterances') %>  Files loaded in 145 ms
5. INFO<%- partial('utterances') %>  Generated: 2025/04/06/test/index.html
6. INFO<%- partial('utterances') %>  Generated: 2025/04/06/hello-world/index.html
7. INFO<%- partial('utterances') %>  Generated: archives/index.html
8. INFO<%- partial('utterances') %>  Generated: archives/2025/index.html
9. INFO<%- partial('utterances') %>  Generated: archives/2025/04/index.html
10. INFO<%- partial('utterances') %>  Generated: index.html
11. INFO<%- partial('utterances') %>  Generated: images/alian.png
12. INFO<%- partial('utterances') %>  7 files generated in 38 ms
13. INFO<%- partial('utterances') %>  Validating config
14. INFO<%- partial('utterances') %>  Start processing
15. INFO<%- partial('utterances') %>  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

复制代码

如上，访问http://localhost:4000/即可得到：

3. 部署到github：

其实在此之前，可以部署到gitee的，不过它势利眼，需要开会员才能部署了，所以只能部署到github了。首先创建一个github-page的公开仓库，该仓库需要以username.github.io的形式进行命名(因为命名问题导致最后访问不通，这往往是第一大错误所在)。
修改blogs项目配置文件_config.yml文件：

1. # Deployment
2. ## Docs: https://hexo.io/docs/one-command-deployment
3. deploy:
4. <%- partial('utterances') %>  type: git
5. <%- partial('utterances') %>  repo: https://github.com/Jack-samu/Jack-samu.github.io.git
6. <%- partial('utterances') %>  branch: main

复制代码

如上修改，然后执行hexo d来调动git将本地blogs的public文件夹下文件全部提交到username.github.io仓库中(这里记得提前准备git工具)，只要中间没有问题，就可以通过https://username.github.io访问上面博客了(记得科学)。

为了方便提交，可以创建ssh公钥秘钥对，将公钥丢给github从而创建一份ssh连接，这样提交会方便很多，只不过这样就不能用科学了，提交的时候。

要做的就这样，编辑markdown，然后生成html，而后提交一下，完了。
应用archer主题

hexo自带的landscape主题委实太丑，很多不堪用，所以去hexo主题库，找一份需要的来进行主题修改。我选的是archer主题，很多主题都有对应的操作文档在其代码仓，可以按部就班跟着操作的，archer也一样。
这个主题是响应式设计，所以针对手机和电脑PC访问都能有比较合适的布局，访问起来不会很难受，
1. 快速上手

github上下载themes代码：

1. $ git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1

复制代码

配置_config.yml，应用archer主题：

1. theme: archer

复制代码

安装侧边栏索引依赖：

1. $ npm install hexo-generator-json-content

复制代码

_config.yml添加配置，应用jsonContent：

1. jsonContent:
2. <%- partial('utterances') %>  meta: true
3. <%- partial('utterances') %>  pages: false
4. <%- partial('utterances') %>  posts:
5. <%- partial('utterances') %>  <%- partial('utterances') %>  title: true
6. <%- partial('utterances') %>  <%- partial('utterances') %>  date: true
7. <%- partial('utterances') %>  <%- partial('utterances') %>  path: true
8. <%- partial('utterances') %>  <%- partial('utterances') %>  text: false
9. <%- partial('utterances') %>  <%- partial('utterances') %>  raw: false
10. <%- partial('utterances') %>  <%- partial('utterances') %>  content: false
11. <%- partial('utterances') %>  <%- partial('utterances') %>  slug: false
12. <%- partial('utterances') %>  <%- partial('utterances') %>  updated: false
13. <%- partial('utterances') %>  <%- partial('utterances') %>  comments: false
14. <%- partial('utterances') %>  <%- partial('utterances') %>  link: false
15. <%- partial('utterances') %>  <%- partial('utterances') %>  permalink: true
16. <%- partial('utterances') %>  <%- partial('utterances') %>  excerpt: false
17. <%- partial('utterances') %>  <%- partial('utterances') %>  categories: true
18. <%- partial('utterances') %>  <%- partial('utterances') %>  tags: true

复制代码

2. 配置_config.archer.yml

blogs路径添加_config.archer.yml配置文件，在这里针对archer进行相应功能配置，
启用字数统计

1. $ npm install hexo-wordcount

复制代码

_config.archer.yml中添加：

1. reading_info: true

复制代码

配置自我介绍页面

1. hexo new page "about"

复制代码

在source/about/index.md中进行个人介绍页面的编辑：

1. ---
2. title: about
3. date: 2025-03-04 17:20:12
4. ---
6. ## 这是我的第一版的博客，就目前而言，还是处于不断地积累做加法阶段，请多指教!!!
8. 

复制代码

简简单单的介绍。
配置404:
直接在source中创建404.md，不用在_posts里面创建，简单编辑：

1. ---
2. layout: 404
3. title: "404"
4. description: "何もありません。"
5. ---

复制代码

为了让404页面不用那么单调，所以又配置了一下背景图片：

1. _404_image: /intro/404.jpg

复制代码

intro文件夹在themes/archer/source/intro中，因为配置的是_config.archer.yml配置文件，所以上面配置中的相对路径就是直接/intro/404.jpg。
启用mermaid支持
现在很多时候coder画图都是使用mermaid进行渲染，因为它支持笔者编辑markdown从而由工具渲染成各种流程图和图标。先安装依赖：

1. $ npm install hexo-filter-mermaid-diagrams --save

复制代码

配置_config.archer.yml：

1. # Mermaid Chart: https://github.com/knsv/mermaid
2. mermaid:
3. <%- partial('utterances') %>  enable: true
4. <%- partial('utterances') %>  # Version number '8' is for the latest '8.x' version of Mermaid.
5. <%- partial('utterances') %>  version: 8.11.0
6. <%- partial('utterances') %>  theme: dark
7. <%- partial('utterances') %>  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
8. <%- partial('utterances') %>  options:

复制代码

然后随便找一个mermaid代码来进行一下测试就行，这里是测试通过的。
启用LaTex数学公式支持
有时候单纯的markdown并不足以进行公式方面的复杂渲染，所以需要对LaTeX进行支持，不过这个需要先引入一个外部pandoc工具：

1. $ sudo apt install pandoc

复制代码

因为使用的ubuntu，所以直接apt安装就完了，而后引入hexo中latex实现依赖：

1. $ npm install hexo-renderer-pandoc --save

复制代码

配置_config.archer.yml：

1. math:
2. <%- partial('utterances') %>  mathjax:
3. <%- partial('utterances') %>  <%- partial('utterances') %>  enable: true
4. <%- partial('utterances') %>  <%- partial('utterances') %>  version: 3.2.0

复制代码

目录支持
配置_config.archer.yml开启对目录的支持：

1. toc: true

复制代码

可惜它这个目录的生成有点问题，后面再改改吧。
archer主题功能添加

在前面进行配置一通后，基本就算ok能用的状态了，不过还是有不少需要自定义一下的，比如说评论功能，它就还需要搞一波。
utterance实现评论功能

之前利用gitalk来进行了评论功能的实现，不过后来发现，很多人说它有问题，出现过各种安全事故，全因它需要利用一个代码仓提供issues存放，这一个个issue就是对应文章的评论存放处，但是gitalk要的权限太多，导致容易被恶意修改。
先简单介绍一下hexo中利用utterance来实现评论功能的步骤：
1. 创建评论信息存储需要的github仓库：
登录github账号随便创建一个公开仓库
2.为仓库安装utterances应用：
进入该utterances安装页面，进行应用安装，配置为上面仓库专用即可
3. 获取utterance配置：
进入utterance官网
跟随页面指示，填入对应github仓库信息、issue-label和个人theme以及What to Comment等字段
完成后，复制生成的js代码。
4.利用生成的代码创建utterance.ejs：
在layout/_partials文件夹中创建utterances.ejs文件，将上面复制的js代码粘贴进去；
在页面布局代码中进行上面utterances.ejs组件引入，通常是这样样式：

1. <%- partial('utterances') %>  

复制代码

5.调整评论所用代码仓，添加邮箱通知：
进入到评论仓库中，
上面是正经hexo引入utterance的一个流程，但在archer中不用那么麻烦，实际要做的也就是创建评论仓库和为仓库安装utterances应用以及配置archer而已。archer主题中已经给引入了utterances的模板和使用，只需要在_config.archer.yml进行对应配置就好：

1. # ========== Comment ========== ## Fill in the field to enable the corresponding comment plugin# If you want to add other comment plugin, edit in "custom.ejs"comment:...<%- partial('utterances') %>  # utteranc site: https://utteranc.es/<%- partial('utterances') %>  utteranc_repo:<%- partial('utterances') %>  "Jack-samu/comment"<%- partial('utterances') %>  utteranc_label: "Comment"<%- partial('utterances') %>  utteranc_theme: "github-light"<%- partial('utterances') %>  utteranc_issue_term: "title"

复制代码

然后先进行一下本地测试：

1. $ hexo clean && hexo g
2. $ hexo s

复制代码

随便打开一个页面，下面这种效果就算成了：

搞定以后，还要对应部署到github-page中：

1. $ hexo d

复制代码

剩下的就是在comment仓库中开启邮件通知了，仓库[settings]-[Notifications]中进行对应设置，设定好消息通知的邮箱和对应触发通知的消息。
小改动

在使用的时候有发现，archer主题目录生成不是很准确，会自带一个列表数字在目录中，和自己编辑的目录不太一致，所以需要修改一下，删掉这里自带的列表数字。
关于布局方面的修改，需要在archer文件夹的layout中，这里是专门进行布局的，而现在就给改一下layout.ejs：

1. <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  ><%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  CATALOG<%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  <%- partial('utterances') %>  

复制代码

原有的列表展示中list_number给设置为false即可，不需要它的数字标记。
在hexo中，文章头部的Front-matter有很多设置，可以慢慢研究。


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！