Hexo搭建博客笔记1-本地运行

Hexo搭建博客笔记1-本地运行

1.条件与环境

1.1 前提条件

软件/账号 是否必须
Git客户端 [下载] Y
Node.js [下载] Y
VSCode [下载] N（推荐）

1.2 安装环境

平台/软件 版本
操作系统 Windows 10 企业版 22H2 19045.4046 64位
Git 2.31.1.windows.1
Node.js 20.15.1
VSCode 1.92.2

2.步骤

2.1 安装Hexo

打开git-bash终端，执行命令：

1
npm install -g hexo-cli

安装后执行下列命令检查是否安装成功：

1
hexo -v

能显示版本hexo-cli版本号等信息则表示安装成功：
image

2.2 新建项目

初始化项目（blog-hexo为项目名，可根据自己的需求进行命名）：

1
hexo init blog-hexo

image

启动项目：

1
2
cd blog-hexo
hexo cl && hexo s

image
image

打开浏览器、地址栏输入：http://localhost:4000/
显示如下页面信息则表示成功：
image

2.3 修改主题为anzhiyu

先在终端窗口中按Ctrl+C关闭运行中的程序。
注：可以使用git-bash终端、也可以使用VScode中的终端窗口；如无特别说明，则命令均在项目根目录下执行。

2.3.1 下载主题

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

image

2.3.2 安装pug以及stylus的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

image

2.3.3 应用主题

运行VSCode、打开项目根目录，修改 hexo 配置文件_config.yml 第99行，把主题改为anzhiyu：
image
将themes/amzhiyu/_config.yml复制1份、重命名为_config.anzhiyu.yml，然后将_config.anzhiyu.yml移至项目根目录下：
image

再次启动项目：

1
hexo server

image

打开浏览器、地址栏输入：http://localhost:4000/
显示如下页面信息则表示主题应用成功：
image

2.4 个性化设置

修改标题、副标题和邮箱等个人资料

编辑_config.yml中# Site部分内容
image

注：以下设置均基于anzhiyu主题

修改菜单

_config.anzhiyu.yml中的menu部分即页面顶部的菜单信息，根据实际情况进行修改即可：
image
Tips：选中所有带#的内容，按快捷键Ctrl+/ 快速去除所有#(即注释符)

注：修改配置文件后需要重启项目生效
image

生成分类页

执行命令：

1
hexo new page categories

image

编辑source/categories/index.md文件：
image
原文件内容：

1
2
3
4
---
title: categories
date: 2024-08-23 12:13:58
---

修改为：

1
2
3
4
5
6
7
---
title: 分类
date: 2024-08-23 12:13:58
type: "categories"
aside: false
top_img: false
---

生成标签页

执行命令：

1
hexo new page tags

image

编辑source/tags/index.md文件：
image

原文件内容：

1
2
3
4
5
---
title: tags
date: 2024-08-23 12:05:32
---

修改为：

1
2
3
4
5
6
7
---
title: 标签
date: 2024-08-23 12:05:32
type: "tags"
comments: false
top_img: false
---

配置新建页面模板

编辑scaffolds/page.md文件：
image

原文件内容：

1
2
3
4
---
title: {{ title }}
date: {{ date }}
---

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img:  #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

配置新建博文模板

编辑scaffolds/post.md文件：
image

原文件内容：

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶，数字越大越靠前
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover: https://image.joy666.top/file/81aa91888bde89e5d413e.jpg #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
toc: #【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number: #【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章作者链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---

<!-- <div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div> -->

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

# {{ title }}

# 参考资料
```

```

生成关于页

执行命令：

1
hexo new page about

image

编辑source/about/index.md文件：type属性填写"about"、其他属性按需填写：
image
新建source/_data/about.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
- class_name: 关于页
  subtitle: 生活明朗，万物可爱✨
  avatarImg: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.0/img/avatar.webp
  avatarSkills:
    left:
      - 🤖️ 数码科技爱好者
      - 🔍 分享与热心帮助
      - 🏠 智能家居小能手
      - 🔨 设计开发一条龙
    right:
      - 专修交互与设计 🤝
      - 脚踏实地行动派 🏃
      - 团队小组发动机 🧱
      - 壮汉人狠话不多 💢
  name: 陈志伟
  description: 是一名 前端工程师、学生、独立开发者、博主
  aboutsiteTips:
    tips: 追求
    title1: 源于
    title2: 热爱而去 感受
    word:
      - 学习
      - 生活
      - 程序
      - 体验
  helloAbout: Hello there!
  skillsTips:
    tips: 技能
    title: 开启创造力
  careers:
    tips: 生涯
    title: 无限进步
    list:
      - desc: EDU,软件工程专业
        color: "#357ef5"
      - desc: EDU,软件工程专业
        color: "#357ef5"
      - desc: EDU,软件工程专业
        color: "#357ef5"
    img: https://bu.dusays.com/2023/04/21/644287166329b.png
  statistic:
    link: /archives
    text: 文章隧道
    cover: https://bu.dusays.com/2023/05/01/644f4b037b930.jpg
  map:
    title: 我现在住在
    StrengthenTitle: 中国，长沙市
    background: https://bu.dusays.com/2023/07/05/64a4c61cb20ef.jpg
    backgroundDark: https://bu.dusays.com/2023/07/05/64a4c63495ac5.jpg
  selfInfo:
    selfInfoTips1: 生于
    selfInfoContentYear: 2002
    selfInfoTips2: 湖南信息学院
    selfInfoContent2: 软件工程
    selfInfoTips3: 现在职业
    selfInfoContent3: 大三学生👨‍🎓
  personalities:
    author_name: 执政官
    personality_type: ESFJ-A
    photo_url: https://bu.dusays.com/2023/07/05/64a4c63495ac5.jpg
    personality_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/ESFJ-A.svg
    name_url: https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC
  maxim:
    maxim_tips: 座右铭
    maxim_top: 生活明朗，
    maxim_bottom: 万物可爱。
  buff:
    buff_tips: 特长
    buff_top: 脑回路新奇的 酸菜鱼
    buff_bottom: 二次元指数 MAX
  game:
    game_tips: 爱好游戏
    game_title: 原神
    game_uid: "UID: 125766904"
    game_bg: https://bu.dusays.com/2023/04/22/64433bf26e25d.webp
  comic:
    comic_tips: 爱好番剧
    comic_title: 追番
    comic_list:
      - name: 约定的梦幻岛
        href: https://www.bilibili.com/bangumi/media/md5267750/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
        cover: https://bu.dusays.com/2023/05/27/647166c44b414.webp
      - name: 咒术回战
        href: https://www.bilibili.com/bangumi/media/md28229899/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
        cover: https://bu.dusays.com/2023/05/24/646db4398832e.webp
      - name: 紫罗兰永恒花园
        href: https://www.bilibili.com/bangumi/media/md8892/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
        cover: https://bu.dusays.com/2023/05/24/646db43983d99.webp
      - name: 鬼灭之刃
        href: https://www.bilibili.com/bangumi/media/md22718131/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
        cover: https://bu.dusays.com/2023/05/24/646db439856a0.webp
      - name: JOJO的奇妙冒险 黄金之风
        href: https://www.bilibili.com/bangumi/media/md135652/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
        cover: https://bu.dusays.com/2023/05/30/64760e38d651a.webp
  like:
    like_tips: 关注偏好
    like_title: 数码科技
    like_bg: https://bu.dusays.com/2022/12/06/638f5f05ce1f7.jpg
    like_bottom: 手机、电脑软硬件
  music:
    music_tips: 音乐偏好
    music_title: 许嵩、民谣、华语流行
    music_bg: https://p2.music.126.net/Mrg1i7DwcwjWBvQPIMt_Mg==/79164837213438.jpg
    music_link: /music
  reward_list:
    - name: 海阔蓝
      amount: 8.8
      datatime: 2023-03-28
    - name: LK66
      amount: 66.6
      datatime: 2023-03-24
    - name: 张时貳
      amount: 6.6
      datatime: 2023-01-22
    - name: ZeroAf
      amount: 9.9
      datatime: 2022-12-14
    - name: LuckyWangXi
      amount: 6.6
      datatime: 2022-12-14
    - name: 刀中日月长
      amount: 10
      datatime: 2022-11-16
    - name: 鹿啵包
      amount: 10
      datatime: 2022-11-08
    - name: 疾速k
      amount: 50
      datatime: 2022-09-20
    - name: 伴舟先生大霖子
      amount: 4.03
      datatime: 2022-10-27
      suffix: 贝壳
    - name: Magica_0x0
      amount: 3.36
      datatime: 2022-10-07
      suffix: 贝壳
    - name: 名字就是要短像这样
      amount: 3.36
      datatime: 2022-08-25
      suffix: 贝壳
    - name: Leviathan520
      amount: 1.34
      datatime: 2022-08-23
      suffix: 贝壳
    - name: 托马斯
      amount: 10
      datatime: 2022-08-19
    - name: 哇是猫猫欸
      amount: 1.34
      datatime: 2022-08-19
      suffix: 贝壳

Tips：修改后无需重启项目，刷新页面即可看到修改后的内容

更多设置详情请查阅安知鱼主题官方文档：【点击直达】

2.5 博文编写

执行命令：

1
hexo new 这是一篇新的博文

其中“这是一篇新的博文”为博文标题，按需修改。
image
Tips：也可以不通过命令进行创建、而是直接在source/_posts/ 目录下新建.md文件（注意：此时需要在文件最前面手动添加博文模板内容并进行相应修改）

将在source/_posts/目录下出现 这是一篇新的博文.md文件，博文内容直接编辑该文件即可（Markdown语法）：
image
Tips：新建博文和修改博文内容均无需重启项目，刷新页面即可看到最新内容

命令汇总

1
2
3
4
启动项目：hexo server
新建页面：hexo new page 页面名
新建博文：hexo new 博文标题
清除本地缓存：hexo clean

参考资料