敬请期待
本教程使用 Hexo框架+butterfly主题+Github page部署 进行网站搭建

准备工作

Github

1、访问Github进行账号注册
2、注册之后创建一个仓库

Hexo

安装前提：

安装Git

  • Windows: 下载并安装git
  • Mac: 使用 Homebrew，MacPorts
  • Linux(Ubuntu，Debian): sudo apt-get install git-core
  • Linux(Fedora，Red Hat，CentOS): sudo yum install git-core

Mac用户
如果在编译时可能会遇到问题，请先到 App Store 安装 Xcode，完成后启动并进入 Preferences->Download->Command Line Tools->install 安装命令行工具

Windows用户
对于中国大陆地区的用户，可以前往淘宝 Git for Windows 镜像 下载 git 安装包

安装Node.js
Node.js 为大多数平台提供了官方的安装程序，对于中国大陆地区的用户，可以前往淘宝 Node.js 镜像 下载

其他安装方法：

  • Windows: 通过 nvs或者 nvm 安装
  • Mac: 使用 Homebrew，MacPorts
  • Linux:(DEB/RPM-based): 从 NodeSource 安装
  • 其他: 使用响应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导

对于Mac和Linux同样建议使用 nvs 和 nvm，以避免可能会出现的权限问题

安装Hexo
所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo

1
npm install -g hexo-cli

初始化博客项目

新建一个文件夹，在该文件夹根目录打开cmd，使用 hexo-cli 初始化博客项目

1
hexo init

继续安装 butterfly 主题

此方法只支持 Hexo 5.0.0 以上版本
通过npm安装并不会在themes文件夹下生成主题文件夹，而是在node_modules下生成

1
npm install hexo-theme-butterfly --save

升级方法：在博客项目目录下，运行 npm update hexo-theme-butterfly

稳定版
在博客项目根目录

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

测试版

测试版可能存在bug，追求稳定的请安装稳定版

如果想要安装比较新的dev分支，可以

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

升级方法：在主题目录下，进行 git pull

稳定版
在博客项目根目录

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

测试版

测试版可能存在bug，追求稳定的请安装稳定版

如果想要安装比较新的dev分支，可以

1
git clone -b dev https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

升级方法：在主题目录下，进行 git pull

应用主题

修改 博客项目根目录下的 _config.yml(后面讲称作站点配置文件)，把主题改为 butterfly

1
theme: butterfly

如果你是使用npm安装的butterfly主题，建议将node_modules>hexo-theme-butterfly>_config.yml复制到博客项目根目录并重命名为_config.butterfly.yml(后面将称作主题配置文件),修改 _config.butterfly.yml 配置文件会同步到主题文件夹中的配置文件，这样可以避免后续因升级主题带来的配置数据丢失

如果你没有pug以及stylus的渲染器，请下载安装：

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

升级建议

升级完成后，请到Github的Releases
里面有标注文件的内容（如有），请根据实际情况更新你的配置内容

接着一键三连

1
2
3
hexo cl
hexo g
hexo s

就可以在浏览器中访问http://localhost:4000浏览刚搭建的博客网站

网站基本信息

在 _config.yml 中设置网站基本信息

1
2
3
4
5
6
7
8
# Site
title: 冉蓝の博客
subtitle: '记录学习|分享生活'
description: '我尝试初始化你，但你像是一个const变量，一经赋值就无法再次改变'
keywords: 博客
author: Rlan
language: zh-CN
timezone: ''

在 _config.butterfly.yml 中设置页脚信息

1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2023
  custom_text: Hi,  welcome  to  my  <a href="https://butterfly.js.org/">  blog</a>!
  copyright: true # Copyright of theme and framework
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词，支持多个
author 网站作者
language 网站使用的语言
timezone 网站时区，默认使用您电脑的时区

其中 description 主要用于SEO，告诉搜索引擎一个关于网站的简单描述，通常建议在其中包含网站的关键词。

页脚参数

参数 描述
since 网站建立年份
suctom_text 自定义文本
copyright true 展示 Hexo 和 butterfly 版权信息，false 不展示

网站副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
    startDelay: 300
    typeSpeed: 150
    backSpeed: 50
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  loop: true
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 记录学习 | 分享生活

顶部头像＆标题

在 _config.butterfly.yml

1
2
3
4
nav:
  logo: /img/nav_icon.png
  display_title: true
  fixed: true # fixed navigation bar

顶部导航栏

在 _config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Menu 目錄
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tag
  分类: /categories/ || fas fa-folder-open
  娱乐||fas fa-list:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
    相册: /gallery/ || fas fa-images
  分享||fas fa-list:
    网站: /website/ || fas fa-globe
  心愿单: /wish/ || fas fa-star
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

格式为：/目录/ || 图标类名
因内置了 fontawesome 图标，可以在官网中找到对应图标类名并使用
如希望不展示图标可以不填图标类名

顶部图

如果不希望展示顶部图，可以在 _config.butterfly.yml 中配置: disable_top_img: true

顶部图的获取顺序，如果都没有配置，则不显示顶部图。
1、页面顶部图的获取顺序：
各自配置的 top_img > 配置文件 default_top_img
2、文章页面顶部图的获取顺序：
各自配置的 top_img > cover > 配置文件的 default_top_img

配置中的值：

配置 解释
index_img 主页的 top_img
default_top_img 默认的 top_img，当页面的top_img没有配置时，会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面的默认 top_img
tag_per_img tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img category 子页面默认的 top_img
category_per_img category子页面的 top_img，可配置每个 category 的 top_img

其他页面的(tags/categories/自建页面) 和 文章页的，请到对应的 md 页面设置中的 top_img front_matter top_img
以上所有的 top_img 可配置以下值：

3.2.0以下版本的配置只支持

  • 留空，true 和 false-显示默认的颜色
  • img链接-显示所配置的图片
配置的值 效果
留空 显示默认的 top_img (如有)，否则显示默认的颜色（文章页top_img留空的话，会显示 cover 的值）
img链接 图片的链接，显示所配置的图片
颜色（HEX值 - #0000FFRGB值 - rgb（0，0，255，135）颜色单词 - orange渐变色 - linear-gradient（ 2deg， #E0B10FF 9%， #44F3D100 <>%）） 对应的颜色
transparent 透明
false 不显示 top_img

tag_per_img 和 是 3.2.0 新增的内容，可对 tag 和 category 进行单独的配置 category_per_img
并不推荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度