Hexo 博客搭建 & 美化教程

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

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

教程推荐： hexo + github + butterfly 搭建你的个人博客保姆级教程（无需云服务器）

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

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

基本命令

预览：

1
hexo s

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

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

1
2
3
hexo clean
hexo g
hexo d

写博客：

1
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：

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

背景

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

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

导航菜单栏

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

1
2
3
4
5
6
7
8
9
10
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：

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

本地搜索

  1. 安装依赖：

    1
    npm install hexo-generator-search --save

  2. 站点配置 _config.yml：

    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      content: true

  3. 主题配置 _config.butterfly.yml：

    local_search:
  enable: true