Hexo

⭐零基础搭建Hexo个人博客！

⭐本文主题以Butterfly为例！

⭐Hexo官网：Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

安装Node.js

• Hexo基于Node.js运行

npm安装Hexo

• 全局安装 hexo-cli

npm install -g hexo-cli

使用

快速使用

# 进入项目目录
cd <项目名>
# 安装项目依赖
npm install --registry=https://registry.npm.taobao.org
# 预览项目
hexo s

• 访问 http://localhost:4000 出现以下页面
• 这是Hexo的默认主题

• 下面是常见的一些基础命令
• 要速成的可直接跳过

生成项目

• 初始化hexo项目

hexo init <项目名>

• 安装依赖

# 进入项目目录
cd <项目名>
# 安装依赖包
npm install
# 下载速度慢可使用淘宝镜像加速
npm install --registry=https://registry.npm.taobao.org

项目目录

.
├── _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

常见命令

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配置

# Hexo的 _config.yml 修改主题
theme: butterfly

安装依赖

# butterfly使用需要安装 pug 以及 stylus 的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save

简单美化

• 以下仅讲解一些基础配置 全面的配置官方文档写的很详细明了

首页面基础配置

# Hexo根目录下的 _config.yml 配置文件
# Site
title: 雪人的小屋 # 博客标题
subtitle: '无 限 进 步 ！' # 子标题 展示到title下方 打字动画显示
description: '希望我的分享能帮助到大家' # 侧边栏作者下方显示的描述
keywords:
author: LonelySnowman # 作者名
language: zh-CN	# 语言配置
timezone: 'Asia/Shanghai' # 时区配置 

展示subtitle

subtitle:
    # 开启subtitle
    enable: true
    # 打字动画展示
    effect: true 
    # Effect Speed Options (打字效果速度參數)
    startDelay: 300 # 动画开始延迟 ms
    typeSpeed: 150 # 打字速度 ms
    backSpeed: 50 # 回到初始状态的速度 ms
    loop: true # 循环打字
    source: false
    sub:

展示封面

# 配置中的路径均以 主题问价夹中的source为根目录
index_img: /img/404.jpg

顶部子页面选项

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

• 更多美化配置请前往对应主题官方文档查看

预览页面

# 生成静态文件
hexo g
# 预览页面
hexo s

部署

• 推荐大家使用 GitHub Pages部署
• 当然也可以使用其他多种方法 Vercel，Gitee，Nginx…

安装依赖

npm install hexo-deployer-git --save

更改配置

# 更改
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，自己写的主题水平还是差了很多，暂时也没有精力去维护😣。

欢迎大家一起交流：雪人的小屋 - 无 限 进 步 ！ (snowhouse.space)（我的博客）