Hexo 是一个快速、简洁且高效的博客框架，基于 Node.js 开发，支持 Markdown 编写文章，支持主题和插件扩展，可以快速搭建一个博客网站。Hexo 的社区活跃，不仅有很多优秀的主题和插件可供选择，而且可以在此基础上满足更多的个性化需求

Butterfly 是一个简介、优雅的主题，支持多种配置、插件和功能，适合个人站点使用。

hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。

Hexo 安装

安装 Hexo 及 Butterfly 主题

全局安装 Hexo

1
2
npm install -g hexo-cli
hexo -v # 查看 hexo 版本号

初始化个人博客，此操作后你的个人博客将成为你的默认博客目录，之后所有 hexo 命令都默认在该目录执行。

1
2
3
hexo init {博客名称}
cd {博客名称}
npm i

博客内容：

  • source：页面与文章目录，内部的 _posts 用于存放文章，可以看到里面已经有了一个 hello-world.md。
  • themes：主题目录
  • public：静态网页文件目录
  • _config.yml：博客信息配置文件

在 Hexo 项目中安装 Butterfly 主题，在项目根目录执行下面命令会将 Butterfly 主题下载到 themes/butterfly 目录下

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

修改 Hexo 项目的 _config.yml 文件，将 theme 配置项修改为 butterfly

1
theme: butterfly

如果没有 pug 以及 stylus 的渲染器，需要安装

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

后续升级建议：为了减少升级主题带来的不便，建议将主题配置文件 themes/butterfly/_config.yml 复制一份到 hexo 的根目录并重命名为 _config.butterfly.yml，之后所有的主题相关配置都在 _config.butterfly.yml 中修改即可

注意：

复制的是主题的 _config.yml，而不是 hexo 的 _config.yml

不要把主题目录的 _config.yml 删掉

Hexo 会自动合并主题中的 _config.yml 文件和根目录下的 _config.butterfly.yml 主题配置内容，且 _config.butterfly.yml 主题文件配置优先级更高

Hexo 部署

Hexo 常用命令

  • 生成静态网页到 public 目录
1
hexo generate & hexo g
  • 启动本地预览服务器（实时更新）（https 不可用）
1
hexo server & hexo s

打开浏览器访问 http://localhost:4000/，即可查看 Hexo 博客网站。

  • 部署服务器到远端
1
hexo deploy & hexo d
  • 新建文章到 source/_posts 目录（可以手动新建，但注意 Markdown 头部声明）
1
hexo new {文章名称}
  • 新建页面到 source 目录
1
hexo new page {页面名称}
  • 清除 hexo 博客目录缓存与 public 目录，用于修复未知问题
1
hexo clear & hexo c

配置博客信息

前面讲到 _config.yml 文件用于配置博客信息，这里我们打开 _config.yml，仅对于我们关心的内容进行讲解，详细内容见官方文档 _config.yml

1
2
3
4
5
6
7
8
# Site
title: Hexo                                        # 博客标题: Jamhus Tao's Blog
subtitle: ''                                    # 博客副标题，可缺省
description: ''                                    # 博客描述，显示在作者下方
keywords:                                        # 关键词
author: John Doe                                # 作者: Jamhus Tao
language: en                                    # 语言: zh-CN
timezone: ''                                    # 时区: 'Asia/Shanghai'

创建 Github 仓库

配置 Hexo 的方式其实有两种，一种是使用个人服务器，另一种是使用 Github 提供的免费服务，这里主要介绍后者的部署过程。

  • 首先新建一个名为 {用户名}.github.io 的仓库
  • 配置 git 工具与 github 建立可信任连接

配置自定义域名（可选）

  • 如果觉得 xxx.github.io 太 low 了，可以花钱购买自定义域名，购买域名可以到 阿里云 等平台，一般的域名大概每年几十元。
  • 打开平台的域名解析界面，添加 CNAME 记录，全部指向你的 xxx.github.io。
  • 打开 github 仓库，将 Setting-Pages-Custom domain 设置为你购买的域名。
  • 在本地博客目录下的 source 目录创建 CNAME 文件（没有后缀名），使用记事本打开，写入你购买的域名。

部署个人站点

在 hexo 的 _config.yml 找到 URL 和 Deployment 配置。在 url 写上个人站点，如果配置了自定义域名则写上购买的域名，不然写上 xxx.github.io。在 deploy.type 写上 git，后面还得加上 repository 和 branch 配置

1
2
3
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://{username}.github.io
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'                                                       # 部署方式: sftp / git
  repository: https://github.com/{username}/{username}.github.io    # 仓库地址
  branch: gh-pages                                                  # 仓库分支

注：SFTP 用于推送至个人服务器

开始部署

第一次需要安装 git 部署方式依赖

1
npm install hexo-deployer-git --save  # 首先安装 git 部署方式依赖

再执行部署

1
2
3
# 每次最好运行这三个
# 清空缓存与静态文件；重新生成静态文件；开始部署站点
hexo c & hexo g & hexo d

现在使用浏览器打开 {username}.github.io，可以看到和本地运行时相同的界面。

注：将站点部署到 Github 后不会立即生效属于正常现象，Github 需要将代码仓库中的文件部署到自己的服务器上

之后每次部署站点，都需要用到这些命令。不同的是，如果修改了网站配置，最好运行 hexo clean 命令；日常上传文章不需要运行该命令