Hexo 博客搭建 & 美化教程

本网站是用 Hexo + GitHub 部署的，用的是 butterfly 主题。

优点： 完全免费（所以我才用的这个🤣)，静态站点，轻量快速，可按需求自由定制改造；托管在 GitHub，安全省心；迁移方便……
不足： 发文不便，依赖本地环境；更适合个人博客使用（其实也还好，写文章得用 markdown 语法，不会也没关系，有 Typora 编辑器就行）。

按照上面的教程搭建就行，大致是让你配置 node.js, git, 然后安装 Hexo , 更换 butterfly 主题, 再部署到 github 上。

各种教程都让你用 git bash 打开你的 blog 文件夹，但现在 powershell 也可以（至少我的电脑上能这样用）。

基本命令

预览：

hexo s

实现”预览” 。启动一个本地的 Web 服务器（http://localhost:4000/），让你预览内容，CTRL+C 退出。

三剑客（每次改动都要执行这 3 个命令重新部署网站）：

hexo clean
hexo g
hexo d

写博客：

hexo new post <博客名>

生成一个 .md 文件在 blog\source\_posts 文件夹中，写完后再执行一遍三剑客即可。

开始美化

butterfly 主题的初步美化，可以参考作者文档：https://butterfly.js.org/

核心配置文件：

修改站点配置文件为 _config.yml，路径为 blog\_config.yml
修改主题配置文件为 _config.butterfly.yml，路径为 blog\themes\butterfly\_config.yml

Front-matter

Front-matter 是 markdown 文件最上方以 --- 分隔的区域，用于配置文章。

写法解释:

title【必需】页面标题
date【必需】页面创建日期
type【必需】标签、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块 (默认 true)
top_img【可选】页面顶部图片
aside【可选】显示侧边栏 (默认 true)

网站资料

修改站点配置文件 _config.yml：

参数	描述
`title`	网站标题
`subtitle`	副标题
`description`	网站描述
`author`	你的名字
`language`	建议设成 `zh-CN`

头像

在主题配置文件中找到 avatar：

avatar:
  img: /assets/head.jpg
  effect: false # true则会一直转圈

背景

修改主题配置文件 _config.butterfly.yml：

# 图片格式 url(http://xxxxxx.com/xxx.jpg)
background: url(https://your_image_url/img/dm1.png)

导航菜单栏

修改主题配置文件 _config.butterfly.yml：

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

文章设置

封面与置顶

置顶： 在文章 front-matter 添加 sticky: 1。
封面： 在 front-matter 添加 cover: 图片地址。

文章版权

修改主题配置文件 _config.butterfly.yml：

post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

本地搜索

安装依赖：

npm install hexo-generator-search --save

站点配置 _config.yml：

search:
  path: search.xml
  field: post
  content: true

主题配置 _config.butterfly.yml：
```
local_search:
  enable: true
```

Hexo主题美化-第一期

Hexo 博客搭建 & 美化教程

基本命令

开始美化

Front-matter

网站资料

头像

背景

导航菜单栏

文章设置

封面与置顶

文章版权

本地搜索