一、视频教程

即将发布

二、环境部署

1.Node

下载地址：https://nodejs.cn/download/
安装说明：安装位置随意，其余直接点击 Next

验证安装：使用终端指令 node -v 和 npm -v 验证

2.Git

下载地址：https://git-scm.com/
安装说明：安装位置随意，其余直接点击 Next

验证安装：使用终端指令 git --version 验证

3.Hexo

在命令行窗口输入以下命令：

1
npm install hexo-cli -g

终端打开方式：使用 Win+R 打开运行窗口，输入 cmd 即可打开终端

三、创建博客

1.创建文件夹

在任意位置创建一个存放 HEXO 系统的文件夹并打开

2.打开Git

在空白处右键，点击Git Bash Here

3.创建博客

输入hexo init 初始化博客

4.部署信息

在每次部署前，建议使用hexo clean命令清除缓存

输入hexo g生成静态文件

输入hexo s部署到本地

四、更换主题

1.下载主题文件

1
npm install --save hexo-theme-fluid

2.应用主题

在主目录下的 _config.yml 修改主题选项

theme: fluid

3.文件修改

将主题目录下的 _config.yml 位置在 /node_modules/hexo-theme-fluid/

在 hexo 的根目录创建一个文件 _config.fluid.yml，并把主題目录的 _config.yml 内容复制到 _config.fluid.yml 去

4.文件配置

请到 官方文档 查看细则配置说明

1.下载主题文件

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.应用主题

在主目录下的 _config.yml 修改主题选项

theme: butterfly

3.安装插件

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

4.文件修改

将主题目录下的 _config.yml 位置在 /themes/butterfly/

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主題目录的 _config.yml 内容复制到 _config.butterfly.yml 去

5.文件配置

请到 官方文档 查看细则配置说明

五、新建内容

开启权限

打开创建目录权限（当新建文章时会生成一个文章目录，便于图片分类）

1
post_asset_folder: true

新建文章

1
$ hexo new [layout] <title>

创建文章时可省略 layout 选项，默认使用 post

layout 路径
post source/_posts
page source
draft source/_drafts

页内图片

更新图片后可能无法显示，建议使用hexo clean命令清除缓存再进行查看

将 test.png 图片放置在文章文件夹下，文章引用图片的方式如下：

1
<center>{% asset_img test.png 图片标题 %}</center>

六、服务器部署

若文件发生更新，则需要使用hexo clean指令清除缓存后，再使用hexo g指令来重新生成public文件夹

将主目录下生成好的 public 文件夹打包上传至 服务器/虚拟主机/云空间 即可，详细步骤请观看视频说明

文本版服务器部署教程：/2025/07/12/网页项目部署教程/