Hello World！用Hexo+Butterfly搭建个人博客

前言

本文实际上并非教程，而是记录了我这个小白从头开始搭建个人博客的全过程。其中可能踩了不少坑，也认识了很多新事物。我会在文章中总结搭建博客的经验，如果需要寻找教程，官方的肯定更加详细。除了官方网站，一些大佬的个人博客也是我的参考教程，我会在后续内容中提供一些我当时参考的博客链接。

为什么我要搭建这个博客呢？主要是我在浏览了大学室友和老司机班上的同学搭建的博客后，发现有必要养成一个记录学习经历的习惯，在此前也恰好使用vuepress写作的学科竞赛团队的网站，正好利用起来，估摸着hexo原理也差不多，butterfly也恰好是我喜欢的主题，于是从23年的12月开始搭建我的个人博客。

安装各组件

安装Git

可视化操作，直接点下一步下一步。

使用以下命令进行验证：

1
git -v

安装Node.js

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

使用以下命令进行验证：

1
node -v

安装Hexo

首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 HericBlog 的文件夹，创建完后，先不要点进去，在现在的目录鼠标右键，选择 Git Bash Here，然后依次输入如下命令：

1
2
3
4
5
6
7
8
# hexo框架的安装
npm install -g hexo-cli

# 等上一个命令完成后，在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>

npm install  # 安装博客所需要的依赖文件

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

我们来运行一下看看，命令行依次输入以下命令进行本地验证：

1
hexo g && hexo s

浏览器中打开 http://localhost:4000 或者 127.0.0.1:4000，可以看到一个网页，说明 Hexo 博客已经成功在本地运行。

清除缓存：

1
hexo clean

生成静态文件（也可简写为 hexo g）：

1
hexo generate

启动服务器（也可简写为 hexo s）：

1
hexo server

博客的配置

因为后续不会采用原生主题，所以在theme的地方直接把主题改为butterfly：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

其他配置我会在butterfly的config文件内修改，这里我做的方法和官方不太一样，官方会建议把“在 hexo 的根目錄創建一個文件 _config.butterfly.yml，並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。( 注意: 複製的是主題的 _config.yml ，而不是 hexo 的 _config.yml)”，因为“Hexo會自動合併主題中的 _config.yml 和 _config.butterfly.yml 裏的配置，如果存在同名配置，會使用 _config.butterfly.yml 的配置，其優先度較高”。但是我尝试之后发现config文件仍然是读取的主题目录里面的“_config.butterfly.yml”，于是就没有继续深究下去，“能用就行”。

网站基础配置

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词。
author 您的名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

以下是我的配置：

1
2
3
4
5
6
7
8
9
10
11
12
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Du的小破站
subtitle: '我的空间'
description: '一个鸽子而已，我也不知道会多久更新新内容。'
keywords:
author: HericDu
language: zh-CN
timezone: 'Asia/Shanghai'

主题的配置

安装butterfly

我使用npm安装，在Hexo根目录里：

1
npm install hexo-theme-butterfly

通过 npm 命令安装的主题并不会在 themes 里生成主题文件夹以及主题代码文件，而是在 node_modules 里生成。

安装插件

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

导航栏菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Menu 目錄
menu:
  首页: / || fa fa-home
  # 分类: /categories/ || fa fa-folder-open
  分类 || fa fa-folder-open:
    # Datacom: /categories/Datacom/ || fa fa-sitemap
    # Wlan: /categories/Wlan/ || fa fa-rss-square
    Cloud: /categories/Cloud/ || fa fa-cloud
    Security: /categories/Security/ || fa fa-unlock-alt
    Operation: /categories/Operation/ || fa fa-laptop
    Other: /categories/Other || fa fa-bars
    Summary: /categories/ || fa fa-home
  标签: /tags/ || fa fa-tags
  归档: /archives/ || fa fa-archive
  工具 || fa fa-wrench:
    华为info-Finder: https://info.support.huawei.com/info-finder/encyclopedia/zh/index.html
    IP-AS号查询: https://whois.ipip.net/
    IP信息查询: https://ipinfo.io/
    在线工具集合: https://itool.co/
    网络工程师导航: https://www.tcpany.com/
  友情链接: /link/ || fa fa-link
  关于: /about/ || fa fa-heart

标签页

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page tags
  3. 你会找到 source/tags/index.md 这个文件
  4. 修改这个文件：
  5. 记得添加 type: “tags”
1
2
3
4
5
6
7
8
9
title: Hello World！用Hexo+Butterfly搭建个人博客
date: 2023-12-21
updated:
tags: 
    - hexo
    - cloud
    - butterfly
categories: Cloud
cover: /img/Cover/20231220.png

分类页

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page categories
  3. 你会找到 source/categories/index.md 这个文件
  4. 修改这个文件：
  5. 记得添加 type: “categories”

友情链接

创建友情链接页面

  1. 前往你的 Hexo 博客的根目录
  2. 输入 hexo new page link
  3. 你会找到 source/link/index.md 这个文件
  4. 修改这个文件：
  5. 记得添加 type: “link”

友情链接添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- class_name: 个人链接
  class_desc: 一些我认识的大佬们
  link_list:
    - name: davidpenn
      link: https://davidpenn888.github.io/
      avatar: /img/link/davidpenn.png
      descr: 我的室友

    - name: 一个鸽子精的博客
      link: https://tuba.liquanxi.site/
      avatar: /img/link/liquanxi.jpg
      descr: 灵创2019队长

    - name: 问谛居
      link: https://www.wd-ljt.com/
      avatar: /img/link/wendiju.png
      descr: CTF2020队长

    - name: 忘忧草の小破站
      link: https://owo.wyc.rest/
      avatar: https://owo.wyc.rest/img/avatar.webp
      descr: 老司机班里的大佬

- class_name: 学校实验竞赛团队链接
  class_desc: 一些SWPU的校内团队
  link_list:
    - name: 灵创新媒
      link: https://learn.lcxm.site/
      avatar: /img/link/lcxm.png
      descr: 数字媒体技术团队
    - name: NSSCTF
      link: https://www.nssctf.cn
      avatar: /img/link/nssctf.png
      descr: NSSCTF是SWPU南充校区的CTF团队

404页面

1
2
3
4
# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

代码块配置

1
2
3
4
5
6
7
8
9
# Code Blocks (代碼相關)
# --------------------------------------

highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: false # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: 400 # unit: px
code_word_wrap: false

本地搜索功能

安装插件：

1
npm install hexo-generator-search --save

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

1
2
3
4
5
6
# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

博客的部署

推到github仓库

前言

作为一名大学生，我对开发并没有投入太多的精力，每次看到代码都会感到头疼。除了开发，还有很多与代码管理和托管相关的事情，我对 Git 工具的用途一无所知，甚至一度以为 GitHub 是一个博客类的网站。直到学院的学科竞赛团队让我管理他们的网站后，我才从一位高年级学长的介绍中了解到这些东西。

git简介

git是个分布式版本管理工具，与集中式版本管理工具svn相反。

git安装

远程仓库有很多，比如github，国内的码云，局域网自建git服务器，托管在其他地方的服务器，本文以github为例。

在github上创建好账户，创建好仓库，要注意仓库的权限是公开还是私密。

git客户端安装后，如何和远程仓库，如github连接呢？本文使用SSH。

1
2
用户名
git config --global user.name "注册名"
1
2
邮箱
git config --global user.email "注册邮箱"

生成SSH

1
2
生成SSH
ssh-keygen -t rsa -C "自己的邮箱"

SSH文件存放在C:/User/用户/.ssh下，id_rsa为私钥，id_rsa.pub为公钥。

在github->账户->setting，选择SSH and GPGkeys，New SSH key，自定义一个title，然后粘贴从公钥文件中拷贝的key。

1
2
测试SSH连接
ssh -T git@github.com

至此，本地git客户端和远程github建立了联系。

仓库

在把文件推送到远程仓库之前，先要了解本地仓库这个概念，此外还有add，commit，push等概念，本文不再赘述。
基本流程:add->commit->push。
git bash中执行命令，将该文件夹初始化为一个仓库：

1
git init

结束以后在文件夹下面会出现一个隐藏的文件夹.git，没有的话，设置一下文件夹选项，显示隐藏文件

add

使用命令进行add：

1
git add 文件夹1/ 文件夹2/

注意:add有多种形式，可以add某个文件，某个文件夹，或直接add当前仓库下所有文件：

1
2
3
git add 单个文件
git add 文件夹1/ 文件夹2/ ……多个文件夹之间空格隔开
git add .

commit

1
git commit -m “注释”

push

1
git push -u origin master

总结：如何推送文件至远程？

  1. 建立本地仓库
  2. 与远程建立连接，测试
  3. init命令初始化仓库
  4. 手动拷贝文件，并执行add命令
  5. commit命令
  6. push命令

部署到对象存储

为什么选择oss

首先购买域名，服务器，或者虚拟主机。我是在主机公园上买的虚拟主机，加上域名，一年200+；

其次我的博客并不会有很多人来看，浏览量并不会很高；

再一个我的网站是静态页面，不会有很复杂的架构；

我没必要专门买个云服务器来部署我的网站，正好对象存储有静态网站托管的功能，于是“一拍即合”。

部署到oss

我仍然使用的是手动把hexo生成的静态文件上传到oss中。

1
hexo g

  1. 每次执行hexo g命令时，hexo都会遍历主题文件中的source目录，这里的source主要包括css，fonts，js等文件，建立索引。

  2. 根据索引会把主题文件生成到public文件中，此时public文件是一个由html，js，css等内容制作的博客，也就是网页的根目录。

  3. 通过部署，hexo d 将 public 文件夹的内容以 git 方式 push 到 github 的指定项目的指定分支，由 github 进行显示。当然，也可以部署到自己的域名上。

各家对象存储的对比

云厂商 优点 缺点
腾讯云 腾讯这个厂商最主要的是有通讯社交账号的绑定，在登录的时候直接点击qq头像就可以登录；对于对象存储而言，相比其他厂商，一个存储桶有多个域名信息可选择，比其他网站多一个静态网站的域名，将静态网站上传后，可以直接通过对象存储的静态网站域名进行访问；在功能方面，腾讯云的对象存储多了很多数据处理的功能，例如图片文档，媒体语音等文件的处理，但是目前还用不上这些功能。 暂时还没有体会到有什么致命的缺点，是一个中等偏上的对象存储服务。
华为云 总体来说界面ui跟加简介，整齐，和自家企业级产品的web界面风格相似，其他功能差距不大。 在访问对象存储的域名信息的时候，只有直接访问对象存储桶的域名，如果开启了静态网站托管，此时访问对象存储的域名则是直接下载html文件，不会跳转到静态网站的首页，只有在绑定了已经在管局备案的域名之后，才能通过cdn访问静态网站的首页。（题外话）其实我本开始选择的是华为对象存储作为我的静态网站部署目的地，但是由于，部分流程的审核过于严格，费用成本过于奇特，比如使用cdn必须要购买资源包或者账户余额高于1000元，这我实在忍受不了，于是我换到了阿里云。在费用上最好购买一个对象存储的存储资源包，除此之外cdn的资源包，尤其是下行流量方面，等级划分不如腾讯云阿里云丰富，比如在下行流量中，没有设置50g或者100g的小型流量包，最低也是500g的流量包，需要80多元。
阿里云 其实和腾讯云大同小异，只是在部分界面布局上有小的差异。 访问域名同华为云，需绑定备案域名能访问静态网站。

优化方案

图床方案

前言

最初，我并没有打算使用图床，因为我个人的博客图片可能不是很多。然而，一次机缘巧合，我的高中班主任找到我，说想给高中同学们展示一下我大学里的美好风景。本来我打算通过微信压缩包发一些图片给班主任，但当时我正在从头到尾搭建我的博客，于是我下定决心使用图床。

一开始，我在网上找了一些免费的公开图床，但使用体验并不是特别好。如果不充值，会有很多限制，比如图片的大小、数量等等。因此，我又将目标转向了阿里云的对象存储。
Markdown 语法处理图片返回的是一个 URL 链接。

如果上传的是本地图片，则会显示文件的本地路径，既然是本地路径，分享文件时就显得极不方便了。它需要将文章中的图片一并发送，接受者还要配置本地环境与发送者图片路径一致才可看到，或者根据自己的目录，修改文章中图片路径。如果使用的是图床工具显示的是外链，可以「随时随地」查看，并不需一并发送图片，也无需自行配置本地环境。
或许上面说的过于抽象，我们设想这样一个场景：
你在 Typora 里写好一篇图文文章（为了显示差异，这篇图文采用本地图片和图床链接两种形式），然后发送这个 .md 文件给协作者进行编辑修改。
必定不久你的协作者就会一脸疑惑，说 Ta 根本就看不到第一张图片，因为在 Ta 那里，是没有图片的。

图床工具PicGo

有了图床，我们可以将图片（或 GIF 等）返回一个 URL 链接，而不需要专门编辑、存放、管理众多杂乱无章的图片，直接复制，粘到 Markdown 编辑器里就能显示出来。嗯挺好，但不舒服。
一篇文章，尤其是教程文章，势必会用大量图片，一张张上传、复制、粘贴，不断切换应用和浏览器，不仅繁琐的流程让人烦，打断的思路更难以寻回。
此时就需要一款图片上传工具了，支持全平台的有 PicGo、仅限 macOS 系统的有 uPic。
PicGo 支持 Markdown、HTML、URL、UBB 和 Custom 五种格式的链接，对于 Markdown 写作者而言，最常用的就是 Markdown 格式，当然也支持自定义 Custom 。

懒加载方案

前言

事实上，我最初并不想采用图片懒加载的方案。然而，在测试过程中，每次强制刷新都会重新加载图片，最多一次将会消耗 100 多兆的流量。我登录阿里云的后台查看，发现每天的成本将近一块钱，这与之前部署学科竞赛团队的网站时，几个月才花费几毛钱形成了鲜明的对比。如此巨大的费用差距让我实在无法忍受，于是我开始寻找图片懒加载的方案。

新增hexo-lazyload-image模块

1
npm install hexo-lazyload-image --save

在_config.yml增加配置

1
2
3
4
5
6
7
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: post # site/post
  loadingImg: /img/friend_404.gif
  preloadRatio: 1 #设置懒加载的范围

CDN源的本地化

由于部分第三方 CDN 服务不稳定，随时可能被封锁，导致网站加载时部分第三方 JavaScript、字体等无法加载，从而出现网站无法打开的情况。我花费了很长时间研究这个问题，但一直找不到原因。这些第三方 JavaScript 非常不稳定，有时速度很快，但有时使用不同运营商的网络速度也会不同，这让我感到非常困惑。最终，我找到了问题的根源，并立即开始寻找解决方案。在官方教程中，我找到了答案，需要更改“_config.butterfly.yml”中的 CDN 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: local
  # Add version number to url, true or false
  version: false

由于更改了第三方的cdn为local，意味着我需要将所有可能用到的资源保存到本地：

1
2
# when set it to local, you need to install hexo-butterfly-extjs
npm install hexo-butterfly-extjs