更换Mac环境后想着换一个好看的主题，并且鉴于今年8月份 GithubPage 国内不开全局不能访问以及博客访问速度的问题，准备先把博客搭到 GithubPage上用 CDN 加速看看效果，再考虑要不要搬到VPS上。

本地环境搭建

安装 Hexo 之前需要先安装 Node.js 和 Git，Mac 下使用 Homebrew 安装。

安装 Node.js

在终端运行

1

brew install node

安装成功后可用node -v和npm -v命令，查看 node 和 npm 版本，比如

1
2
3
4
5

➜  [/Users/lintstar] node -v
v14.11.0

➜  [/Users/lintstar] npm -v
6.14.8

安装 Git

在终端运行

1

brew install git

安装成功后可用git version命令，查看 git 版本

1
2

➜  [/Users/lintstar] git version
git version 2.24.3 (Apple Git-128)

安装 Hexo

Hexo 使用 npm 安装，在终端运行

1

sudo npm install -g hexo-cli

安装成功后显示路径

1
2
3
4
5

➜  [/Users/lintstar] sudo npm install -g hexo-cli
Password:
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
+ [email protected]
added 61 packages from 318 contributors in 82.652s

Hexo初始化

创建存储博客的文件夹/Users/lintstar/Blog, 进入此文件夹

1

cd ~/Blog

执行命令初始化本地博客，下载一系列文件

1

hexo init

安装过程会出现警告：

执行下述命令安装 npm

1

sudo npm install

生成静态文件

1

hexo g

开启 hexo 服务器

1

hexo s

通过http://localhost:4000即可在本地查看博客:

图床配置

环境：Typora + Picgo + 七牛云

Typora

偏好设置

Picgo

下载安装picgo：

配置各项参数：

注意访问网址不要漏写https://否则会遇到下面这个坑：

设置好后粘贴图片上传时，会发现上传的图片不能正确引用到markdown中：

而正确引用的姿势是这样的：

七牛云图床开启HTTPS

HTTPS证书申请

ohttps.com

• 免费证书类型：DV 域名型
• 免费证书品牌：Let’s Encrypt
• 免费通配符证书：支持
• 易操作性：简单
• 证书有效期： 90天
• 自动更新：支持
• 自动部署： 支持

ohttps.com提供了类似于acme.sh的功能，不过提供了友好的管理界面，可申请Let’s Encrypt免费通配符类型证书，还提供了证书吊销、到期前提醒、自动更新、自动部署功能。另外比acme.sh增加了一些非常实用的功能，主要包括可自动部署至阿里云、腾讯云、七牛云的负载均衡、内容分发CDN、SSL证书列表等，并可自动部署至多个nginx容器中。如果有在证书更新后自动部署至多个不同节点的需求，强烈推荐大家使用ohttps.com申请和管理Let’s Encrypt颁发的免费HTTPS证书。

首先先通过DNS验证申请证书：

成功后这两个文件是七牛云开启HTTPS需要用的

证书部署到七牛云SSL

登录七牛云打开密钥管理页面：https://portal.qiniu.com/user/key

将证书部署到七牛云SSL

七牛云设置HTTPS证书

在这里开启HTTPS 导入本地证书内容和私钥文件即可

Github 关联

关联后可以将博客推送到 Github 仓库，之后只需要更新文章后同步仓库。

GithubPage

登录 github 新建一个仓库

这里仓库名一定要用用户名.github.io ，这样生成的 GithubPage 就是本来的仓库不需要加路径就可以直接访问，否则就会是：

1

https://lintstar.github.io/lintstar

仓库必须是公开的，否则不免费

建错了可以直接在Settings中删除：

GitHub中用于管理的默认分支为 master，为了避免联想奴隶制，2020年10月1日之后，新创建的仓库默认分支都将使用main。

在仓库的 Settings 下面设置 GitHub Pages，并设置已经解析好的自定义域名

解析设置如下：

且点击lintstar.github.io即可重定向至lintstar.top.

通过 www.lintstar.top 访问成功：

配置 SSH Key

为避免每次更新博客都需要输入 Github 用户名和密码，将 SSH key 添加到 GitHub 中。

检查本地是否包含 SSH Key

终端执行

1

ls -a ~/.ssh

检查 SSH key 是否存在：如果没有文件id_rsa.pub或id_dsa.pub 需要生成一个。

生成新的 SSH Key

终端执行

1

ssh-keygen -t rsa -C "[email protected]"

注意将邮箱是注册 Github 时使用的邮箱地址。一路选择默认后会在路径~/.ssh下生成id_rsa.pub和id_dsa.pub两个文件。

将 SSH Key 添加到 Github 中

执行命令

1

cat ~/.ssh/id_rsa.pub

复制里面的 SSH key 信息. 浏览器打开 GitHub 网站，进入Github -> Settings -> SSH and GPG keys -> New SSH key

验证连接是否成功：

1

ssh -T [email protected]

连接成功

本地博客文件上传至 Github

首先在本地博客根目录 /Blog 下的 _config.yml 配置 deploy

1
2
3
4
5
6

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repository: https://github.com/lintstar/lintstar.github.io
  branch: main

注意分支已经变成了 main ，repository 为仓库 lintstar.github.io 的URL

然后在 Blog 目录下安装 hexo 插件 hexo-deployer-git

1

sudo npm install hexo-deployer-git --save

接着需要配置一下身份标识

1
2

git config --global user.email "[email protected]"
git config --global user.name "lintstar"

否则会报错：

最后在 Blog 目录运行

1
2
3
4
5
6
7
8
9
10
11
12
13

hexo clean
hexo generate
hexo deploy

# 简化后
hexo g
hexo d

# 可以一键生成静态文件并部署
hexo d -g

# 生成静态文件并本地预览
hexo s -g

访问 www.lintstar.top :

如果出现 404 建议先检查一下 Github Page 的 Settings 自定义域名

此时仓库下是这样的：

解决Hexo clean导致CNAME文件被删问题

执行 hexo clean 后发现页面404

对比上面的图可以发现 CNAME文件被清除了

原因

原因是整个public文件夹是执行 hexo g 后生成的，若执行 hexo clean 会把整个 public 连同 CNAME 文件夹删掉，在重新执行 hexo g 后生成的 public 文件夹里肯定没有我们手动添加的 CNAME 文件

解决办法

把 CNAME 文件放在 source 文件夹下，而不是 public 文件夹。在执行 hexo g 命令时，会把 source 文件夹下的 CNAME 文件原原本本地复制到 public 文件夹下，即使执行 hexo clean 后，下次重新编译还是会复制过去，这样就解决了问题。

CNAME 内容为自定义的域名：

其实还有很多其他的文件如果想编译后放在 public 文件夹下，都可以先放 source 文件夹下，在 hexo g 编译后就会复制到 public 文件夹下。

博客个性化

hexo 有很多好看的主题 以及各种各样的插件可以用来丰富博客

另外一些基本配置可以在_config.yml中进行修改，如博客名、作者名等，另外如果采用了别的主题，在主题文件夹中也会有一个_config.yml文件，可以在里面进行主题的一些修改。

Hexo 官方配置DOC ：https://hexo.io/zh-tw/docs/configuration.html

设置博客主题

主题配置 Butterfly 项目地址：https://github.com/jerryc127/hexo-theme-butterfly

安装 Butterfly

在博客根目录下运行：

1

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

应用主题

修改博客配置文件_config.yml，把主題改为butterfly

1

theme: butterfly

安装依赖插件

1

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

配置 _config.butterfly.yml

此方法只支持 Hexo 5.0.0 以上版本，建议使用。

如果已经在 source/_data/ 创建了 butterfly.yml，请记得删除掉。

把主题文件夹中的 _config.yml 复制到 Hexo 根目录下，同时重新命名为 _config.butterfly.yml。

以后只需要在 _config.butterfly.yml进行配置就行。

Hexo会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

Butterfly 主题配置

主题美化相关

官方配置文档：https://demo.jerryc.me/posts/dc584b87

开启归档标签等顶部栏

博客根目录运行

1
2
3
4
5
6
7
8

# 标签页
hexo new page tags
# 分类页
hexo new page categories
# 友链
hexo new page link
# 关于
hexo new page about

效果：

导航图标自定义

Butterfly 支持 font-awesome v5 图标

在 https://fontawesome.com/icons?d=gallery 获取图标名添加到相应位置即可：

1
2
3
4
5
6
7
8
9
10

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heartbeat
  JAY || fas fa-headphones-alt:
     - Music || https://y.qq.com/n/yqq/singer/0025NhlN2yWrP4.html || fas fa-music
     - Songs || /songs/ || far fa-calendar-alt 

效果：

更换站点图标 page favicon和背景图片头像

制作32x32尺寸的 favicon 后放到 /Blog/themes/butterfly/source/plogo 目录下

• 不要把个人需要的文件/图片放在主题source文件夹里，因为在升级主题的过程中，可能会把文件覆盖删除了。
• 在Hexo根目录的source文件夹里，创建一个文件夹来放置个人文件/图片。文件夹不能命名为css、js和img
• 引用文件直接为/文件夹名称/文件名

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

效果：

hexo clean 会清除缓存文件 db.json 和已生成的静态文件 public 所以不要放到 /public/img 目录下

添加多个 subtitle 轮换打字效果

效果：

添加搜索功能

采用本地搜索，安装插件 hexo-generator-search

1

sudo npm install hexo-generator-search --save

在配置文件中设置：

开启字数统计

安装插件 hexo-wordcount

1

sudo npm install hexo-wordcount --save

在配置文件中设置：

效果：( 本地预览统计不准确呐 )

开启Snackbar 弹窗

1
2
3
4
5
6
7
8
9

# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

效果：( 引自官方文档 )

添加 RSS 订阅

安装插件 hexo-generator-feed

1

sudo npm install hexo-generator-feed --save

然后在_config.yml最下面添加：

1
2
3
4
5
6
7

plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

设置主题配置文件_confog.butterfly.yml

最后执行命令即可

1

hexo clean && hexo g && hexo s

底部添加备案信息

底部开启背景图

效果：

底部修改By为小爱心

路径在：/Blog/themes/Butterfly/layout/includes/footer.pug

将 By 替换成以下内容：

1

<i style="color:#FF6A6A" class="fa fa-heartbeat"></i>

#FF6A6A 颜色代码可以在 HTML颜色代码 这里替换哦

效果:

文章相关

文章固定链接格式

Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成 404，而且 URL 层级很深，不利于分享和搜索引擎收录。

先安装 hexo-abbrlink 插件：

1

sudo npm install hexo-abbrlink --save

修改配置文件：_config.yml

1

permalink: /:year/:month/:abbrlink.html

效果：

标题前添加闪电

1
2
3
4
5
6

# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f0e7'
  title-prefix-icon-color: '#FBE347'

#FBE347 颜色代码可以在 HTML颜色代码 这里替换哦

效果：

文章内容加密

安装插件：hexo-blog-encrypt

1

npm install --save hexo-blog-encrypt

文章头加上 password 和 message (optional):

1
2
3
4
5
6
7
8
9
10
11
12

title: 打造专属 Cobalt Strike
tags:
  - CobaltStrike
  - 后渗透
  - ServerChan
categories:
  - Tools
cover: 'https://******.webp'
abbrlink: d200c39
password: ******
message: 您有新主机上线啦！请注意查收~ <br> 召唤神龙 Ladon 强化 Cobalt Strike
date: 2020-11-20 23:49:59

文章的头部如下图所示位置添加:

1

<meta name="referrer" content="no-referrer"/>

这行 html 代码解决了加密后无法加载网络图片的问题

效果：

主题更新

1. 备份博客所有文件
2. 进入博客主题目录
3. 保存 layout/includes/footer.pug 和 source/css/_layout/footer.styl
4. 执行 git pull 拉取更新
5. 将第二步保存的两个配置文件覆盖到相应位置
6. 依照主题目录下的 _config.yml 手动更新博客根目录的 _config.butterfly.yml
7. 把备份文件中主题 /source 目录下的 /cover /img 和 /plogo 覆盖到新的主题/source 目录下
8. 重新 hexo clean && hexo g && hexo d

FROM : lintstar.top , Author: 离沫凌天๓