前言

不记得在哪里看到的一句话：“个人博客的尽头是GitHub Page”。

之前在服务器上折腾前后端分离式的博客，风格仿照hexo-theme-butterfly主题，因为有服务器，很方便添加评论、聊天室等功能。动态博客可以在网页端编辑文章，搭建博客学到了很多东西，但是本人的核心需求仅有：

  • markdown笔记

这一项，近期服务器到期，于是回归了静态博客，一直没有总结静态博客的整体配置，今天记录一下。

GitHub为每个账户提供了一个GitHub Page，通过上传静态页面到username.github.io仓库，来展示个人经历等信息。

这个静态页面仓库允许上传多个页面文件，于是便有了基于GitHub Page的个人博客。

配置环境

参考hexo文档操作。

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

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

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往 安装 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，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，以避免可能会出现的权限问题。

Windows 用户

使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

For Mac / Linux 用户

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误，请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限

Linux

如果您使用 Snap 来安装 Node.js，在 初始化 博客时您可能需要手动在目标文件夹中执行 npm install。

hexo框架

本博客基于hexo框架，使用如下命令快速启动：

bash
1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

使用hexo server或者简写的hexo s启动服务进行测试，使用如下代码部署服务：

bash
1
2
3
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
hexo generate #生成
hexo deploy #部署

首次部署前，需要修改config文件，配置github仓库地址

yaml
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

butterfly主题

本博客使用的主题是hexo-theme-butterfly，在themes/文件夹中clone仓库，npm环境参考github。

参考butterfly中文文档对具体配置进行修改，例如导航栏设置、社交信息、右下角按钮等等。

魔改主题

网页样式有多种方式来改变，如果config文件提供了可配置的变量，直接修改即可，例如本博客渐变背景对应config文件的代码为：

yaml
1
2
3
4
5
6
7
8
9
background: 'linear-gradient(90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%)'

或者引入外部css与js文件，相关config代码如下：

yaml
1
2
3
4
5
6
7
8
9
10
11
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/background.css">
    # - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    - <link rel="stylesheet" href="/css/custom.css">
    - <script src="/live2d-widget/autoload.js"></script>
  bottom:
    # - <script src="xxxx"></script>

本博客标题样式（转动小风车）即通过上述方法修改，相关css代码如下：

css
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    -webkit-animation: ccc 1.6s linear infinite ;
    animation: ccc 1.6s linear infinite ;
}
@-webkit-keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
@keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

#content-inner.layout h1::before {
    color: #5ec1e0 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #57c850 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #a9e000 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #ffbf00 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #fb7061 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #ef50a8 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

定位元素

可以查看hexo-theme-butterfly仓库找示例。

更简单的方法是利用谷歌浏览器F12，使用检查功能查看元素标签类别等信息，定位元素后编写相应的css或js代码即可。

自动部署

每次使用Hexo框架写博客时，每次都要经历清除、生成、部署流程，GitHub Page仓库中为生成的html、css、js等文件，本地markdown文件则上传到github作为备份，可以使用Github Actions可以实现自动化工作流。

参考利用 Github Actions 自动部署 Hexo博客

评论

修改_config.butterfly.yml如下部分来配置评论

yaml
1
2
3
4
5
6
7
8
9
10
11
12
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use:
    - gitalk
    - Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
参数 解释
use 使用的评论（请注意，最多支持两个，如果不需要请留空）
注意：双评论不能是 Disqus 和 Disqusjs 一起，由于其共用同一个 ID，会出错
text 是否显示评论服务商的名字
lazyload 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）
count 是否在文章顶部显示评论数
livere、Giscus 和 utterances 不支持评论数显示
card_post_count 是否在首页文章卡片显示评论数
gitalk、livere 、Giscus 和 utterances 不支持评论数显示

遵循 gitalk的指示去获取你的 github Oauth 应用的 client id 和 secret 值。以及查看它的相关配置説明。

然后修改 主题配置文件:

yaml
1
2
3
4
5
6
7
gitalk:
  client_id:
  client_secret:
  repo:
  owner:
  admin:
  option:

遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。

然后修改 主题配置文件:

yaml
1
2
3
4
5
6
7
8
valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

参考资料