静态博客网站HEXO搭建
一、视频教程
即将发布
二、环境部署
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
文件夹打包上传至 服务器/虚拟主机/云空间 即可,详细步骤请观看视频说明