Hexo
⭐零基础搭建Hexo个人博客！
⭐本文主题以Butterfly为例！
⭐Hexo官网：Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
安装
安装Node.js
- Hexo基于Node.js运行
npm安装Hexo
- 全局安装 hexo-cli
npm install -g hexo-cli使用
快速使用
代码语言：shell复制# 进入项目目录
cd <项目名>
# 安装项目依赖
npm install --registry=https://registry.npm.taobao.org
# 预览项目
hexo s- 访问 http://localhost:4000 出现以下页面
- 这是Hexo的默认主题
image-20221214230200510- 下面是常见的一些基础命令
- 要速成的可直接跳过
生成项目
- 初始化hexo项目
hexo init <项目名>- 安装依赖
# 进入项目目录
cd <项目名>
# 安装依赖包
npm install
# 下载速度慢可使用淘宝镜像加速
npm install --registry=https://registry.npm.taobao.org项目目录
代码语言：txt复制.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes- _config.yml：Hexo配置文件夹
- package.json：依赖信息
- scaffolds：模板文件夹
- 当您新建文章时，Hexo 会根据 scaffold 来建立文件。
- Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
- source：资源文件夹是存放用户资源的地方。除
_posts文件夹之外，开头命名为_(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到public文件夹，而其他文件会被拷贝过去。 - themes：主题文件夹
基本配置
- 可配置参数很多推荐大家去官网配置页查看
- 官网配置：配置 | Hexo
- 下面讲解一些基础的配置
# Site
title: 雪人的小屋 # 标题
subtitle: '无 限 进 步 ！' # 子标题
description: '希望我的分享能帮助到大家' # 描述
keywords:
author: LonelySnowman # 作者
language: zh-CN # 语言配置
# 简体中文：zh-CN
timezone: 'Asia/Shanghai' # 时区配置
# 纽约：America/New_York 日本：Japan 上海：Asia/Shanghai常见命令
代码语言：shell复制hexo init # 初始化项目
hexo g # 生成静态文件
hexo clean # 清楚静态文件
hexo d # 推送静态文件至 git远程仓库
hexo s # 本地预览项目主题
- 官网主题页面：Themes | Hexo
- 在主题页面任意挑选一款主题
- 根据其官方配置一步步搭建即可
- 本文以Butterfly主题为例
- Butterfly主题官网：Butterfly - A Simple and Card UI Design theme for Hexo
安装主题
- Butterfly版本：4.5.1
# -- 在Hexo项目根目录下
# -- 选择任意一种方式安装即可
# github 安装
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# gitee 安装
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
# npm 安装
npm i hexo-theme-butterfly- 在themes文件夹下出现butterfly文件夹
- 其中
_config.yml为主题配置文件夹 - 注意：配置中的路径均以 主题问价夹中的source为根目录
修改Hexo配置
代码语言：yaml复制# Hexo的 _config.yml 修改主题
theme: butterfly安装依赖
代码语言：shell复制# butterfly使用需要安装 pug 以及 stylus 的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save简单美化
- 以下仅讲解一些基础配置 全面的配置官方文档写的很详细明了
首页面基础配置
代码语言：yaml复制# Hexo根目录下的 _config.yml 配置文件
# Site
title: 雪人的小屋 # 博客标题
subtitle: '无 限 进 步 ！' # 子标题 展示到title下方 打字动画显示
description: '希望我的分享能帮助到大家' # 侧边栏作者下方显示的描述
keywords:
author: LonelySnowman # 作者名
language: zh-CN # 语言配置
timezone: 'Asia/Shanghai' # 时区配置 展示subtitle
代码语言：yaml复制subtitle:
# 开启subtitle
enable: true
# 打字动画展示
effect: true
# Effect Speed Options (打字效果速度參數)
startDelay: 300 # 动画开始延迟 ms
typeSpeed: 150 # 打字速度 ms
backSpeed: 50 # 回到初始状态的速度 ms
loop: true # 循环打字
source: false
sub:展示封面
代码语言：yaml复制# 配置中的路径均以 主题问价夹中的source为根目录
index_img: /img/404.jpg顶部子页面选项
代码语言：yaml复制menu:
首页: / || fas fa-home
归档: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fas fa-list:
音乐: /music/ || fas fa-music
电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart- 更多美化配置请前往对应主题官方文档查看
预览页面
代码语言：shell复制# 生成静态文件
hexo g
# 预览页面
hexo s部署
- 推荐大家使用 GitHub Pages部署
- 当然也可以使用其他多种方法 Vercel，Gitee，Nginx...
安装依赖
代码语言：shell复制npm install hexo-deployer-git --save更改配置
代码语言：yaml复制# 更改
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
# 注意这里的分支
# 看看自己Github使用的分支模板 是 master 还是 main
branch: main 新建仓库
- 在GitHub上新建仓库
- 仓库名：用户名.github.io
# 上传静态文件
hexo d访问
- 访问 https://用户名.github.io
- 就可以看到自己的博客啦！
近日将博客从Django Vue更改为了Hexo，自己写的主题水平还是差了很多，暂时也没有精力去维护
