一 下载环境

Git（版本控制）：

Node（Node.js运行环境）：

npm（包管理器）：

  • 如何查看自己当前使用版本：npm -v
  • npm：11.12.1
  • 在安装node的时候应该会自动安装

二 博客安装

新建一个文件夹，在这个文件夹下使用cmd命令：

  1. 安装Hexo：npm install hexo-cli -g，安装完成后可以输入hexo version来查看对应的hexo版本。
  2. 初始化博客：hexo init blog；
  3. 进入刚刚创建好的blog文件夹：cd blog
  4. 安装依赖：npm install；
  5. 本地预览博客：hexo server，看到下面图片代表已经完成最基础的博客搭建。默认的链接是：http://localhost:4000/。

最后运行终端的位置应该在blog文件夹下！

三 博客基础配置

1
2
3
4
5
6
7
8
# Site
title: Freeda博客
subtitle: '个人博客'
description: '虽然没什么人访问'
keywords: 博客,其他描述
author: 李佟勇
language: zh-CN
timezone: ''
1
url: https://blog.freedash.top

四 Butterfly主题

1 安装Butterfly主题

在之前创建好的blog文件夹下面运行cmd，然后输入命令npm install hexo-theme-butterfly进行安装，运行命令以最终官方文档为准，后面可能会更改。

如果使用npm报错的话，可以使用git命令：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly：

1
theme: butterfly

2 新建页面

2.1 新建一篇文章

1
2
hexo new HexoConfig
hexo new 需要新建的文章

格式为：

1
2
3
4
5
6
7
---
title: 此博客的配置

date: 2026-05-31 16:04:29

tags:
---

2.2 创建一个标签页

https://butterfly.js.org/posts/dc584b87/

hexo new page tags

1
2
3
4
5
---
title: 标签页
date: 2026-05-31 16:24:14
type: 'tags'
---

可以通过http://localhost:4000/tags/来进行访问。

2.3 创建一个分类的页面

https://butterfly.js.org/posts/dc584b87/

hexo new page categories

1
2
3
4
5
---
title: 类别
date: 2026-05-31 16:29:00
type: 'categories'
---

2.4 创建一个友情链接

https://butterfly.js.org/posts/dc584b87/

hexo new page link

1
2
3
4
5
---
title: 友情链接
date: 2026-05-31 16:31:33
type: 'link'
---

在 Hexo 根目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.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
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

2.5 新建一个子页面

https://butterfly.js.org/posts/dc584b87/

hexo n page xxxxx，这里创建一个About页面：hexo n page about

使用http://localhost:4000/about/即可访问。

2.6 404页面配置

主题内置了一个简单的 404 页面，可在设置中开启

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: '页面没有找到'
  background:

在修改主题配置前，可以把主题中的_config.yml复制到blog根目录，并改名为_config.butterfly.yml，直接在新的文件里面配置即可，会可以生效。

可以通过http://localhost:4000/404.html进行访问

3 主题配置

3.1 导航

1
2
3
4
5
6
7
8
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  链接||fas fa-list:
    友情链接: /link/ || fas fa-link
    关于: /about/ || fas fa-heart

3.2 代码块

根据官方网站进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
code_blocks:
  # Code block theme: darker / pale night / light / ocean / false
  theme: light
  macStyle: true
  # Code block height limit (unit: px)
  height_limit: 50
  word_wrap: false

  # Toolbar
  copy: true
  language: true
  # true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
  shrink: false
  fullpage: true

3.3 社交图标

1
2
3
4
social:
  # fab fa-github: https://github.com/xxxxx || Github || '#24292e'
  fas fa-solid fa-blog: https://blog.freedash.top || blog || '#1e3050'
  fas fa-envelope: mailto:lty9211@163.com || Email || '#4a7dbe'

3.4 头像

1
2
3
avatar:
  img: /img/avatar.jpg
  effect: false

3.5 搜索

这里使用本地搜索。

  1. 你需要安装 hexo-generator-searchdb 或者 hexo-generator-search，根据它的文档去做相应配置

  2. 把主题配置文件中 search 的 use 配置为 local_search

  3. 然后在_config.yml中添加：

    1
    2
    3
    search:
      path: search.xml
      field: post

  4. 最后把博客输出的文件删掉hexo clean再重新生成即可。

3.6 评论系统

这里出了点问题。

其他的配置太快了，就参照butterfly进行配置吧，都挺简单的！

四 Github托管博客资源文件

新建仓库改为私有，这里个人比较喜欢使用Github Dsektop软件来进行代码推送。

这里不是所有东西都要上传，因为还有些插件什么的，根本不需要，所有需要使用.gitignore文件来进行屏蔽一些文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.vscode/
/.idea/
.deploy_git*/
.idea
themes/butterfly/.git
MyHexoBlog/

在其他电脑上面只需要安装Git、Node、还有npm install，然后hexo g、hexo s即可！