记录使用 Hexo 框架 + GitHub Pages 搭建个人博客并进行自定义美化相关的内容。

博客搭建

安装 Git 和 Node.js

Git 官网 和 Node.js 官网 下载对应版本进行安装。安装完成后 Win+R 输入 cmd 打开命令提示符，输入 git --version 验证 Git 是否安装成功；输入 node -v 和 npm -v 验证 Node.js 是否安装成功。

GitHub 新建仓库

GitHub 新建仓库，仓库名为 xxx.github.io，亦即博客地址。注意：xxx 必须为 GitHub 用户名。

配置 Git

即连接 Git 与 GitHub。任意位置右键 Git Bash Here，依次完成下列步骤。

配置用户名及邮箱：

1
2
git config --global user.name "xxx"
git config --global user.email "email"

生成 SSH 公钥：

1
ssh-keygen -t rsa -C "email"

一路回车，将生成的 SSH 公钥，即用户目录下 .ssh/id_rsa.pub 中的内容复制，打开 GitHub -> Settings -> SSH and GPG keys -> New SSH key 粘贴：

验证是否配置成功：

1
ssh -T git@github.com

安装 Hexo

在合适的位置新建一个文件夹（如 Blog）存放博客本地文件，以下所有操作均在此文件夹下进行。进入该文件夹右键 Git Bash Here，依次完成下列步骤。

安装 Hexo：

1
npm install hexo-cli -g

验证是否安装成功：

1
hexo -v

初始化博客

在博客文件夹下右键 Git Bash Here，hexo init 初始化博客，npm install 安装必要组件，博客基本搭建完成。此时 hexo g 生成静态网页，hexo s 本地预览，打开浏览器访问 localhost:4000 即可预览博客，ctrl + c 退出。

博客部署配置

打开站点配置文件，即博客根目录下的 _config.yml ，翻到最后修改部署配置内容：

1
2
3
4
deploy:
  type: git
  repository: GitHub 仓库地址
  branch: master

右键 Git Bash Here 安装部署插件：

1
npm install hexo-deployer-git --save

此时即可使用 hexo d 进行部署。

写作流程

  1. hexo n "文章名字" 新建文章。
  2. 在博客文件夹 source/_posts 目录下找到相应生成的 md 文件，使用 Markdown 语法完成文章的撰写。
  3. hexo g 生成静态网页
  4. hexo s 打开浏览器本地预览（非必须）
  5. hexo d 部署

常见命令

1
2
3
4
5
hexo n "文章名字"  # 新建博客文章
hexo clean  # 清楚缓存文件和已生成的静态文件（更换主题后不生效时可运行该命令）
hexo g  # 生成静态网页
hexo s  # 本地预览
hexo d  # 部署

强烈建议阅读 Hexo 中文文档

绑定域名

通过 阿里云 或 腾讯云 购买域名，进入域名控制台，添加解析记录。Win+R 输入 cmd 打开命令提示符，输入ping xxx.github.io，记录 ip 后按下图填写两条解析记录。

在本地博客文件夹的 source 文件夹下创建 CNAME 文件，注意：无后缀名，里面填写购买的域名，比如：xxx.com

在博客 GitHub 仓库下 Settings -> GitHub Pages -> Custom domain 里填上购买的域名即可。

修改主题

GitHub 搜索 hexo theme 或在 Hexo 主题 中选择喜欢的主题并根据主题对应文档进行配置。个人推荐：NexT 和 Chic

NexT 主题美化

NexT 文档

归档页面不分页

hexo-generator-archive

文章置顶

hexo-generator-index

文章加密

hexo-blog-encrypt

修改文章永久链接

hexo-abbrlink

添加评论系统 Waline

Waline

Hexo NexT Waline

添加夜间模式切换

Hexo NexT Darkmode

字体修改

Google Fonts 已支持思源宋体！

网站字体优化方案

添加本文结束

在主题配置文件 _config.next.yml 中取消注释：

1
2
custom_file_path:
  postBodyEnd: source/_data/post-body-end.njk

在 source/_data/post-body-end.njk 中添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:16px;">-------------　　　　本 文 结 束　<i class="fa fa-flag"></i>　感 谢 阅 读　　　　-------------</div>
    {% endif %}
</div>

修改文章内超链接颜色

在主题配置文件 _config.next.yml 中取消注释：

1
2
custom_file_path:
  style: source/_data/styles.styl

在 source/_data/styles.styl 中添加以下内容：

1
2
3
4
5
6
7
8
.post-body a[target][rel][href] {
    color: #0593d3;
    border-bottom: none;
    &:hover {
        color: #fc6423;
        text-decoration: underline;
    }
}

修改侧边栏背景及文字颜色

在主题配置文件 _config.next.yml 中取消注释：

1
2
custom_file_path:
  style: source/_data/styles.styl

在 source/_data/styles.styl 中添加以下内容：

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
.sidebar {
  background:url(https://...);	
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
  bottom: 0;
  if (not hexo-config('back2top.sidebar')) {
    box-shadow: inset 0 2px 6px black;
  }
  position: fixed;
  top: 0;
  transition: all $transition-ease-out;
  width: $sidebar-desktop;
  z-index: $zindex-2;

  a {
	border-bottom-color: #FFFFFF;
	color: #FFFFFF;
    &:hover {
	  border-bottom-color: $FFFFFF;
	  color: #FFFFFF;
    }
  }
}

.sidebar-nav li {
    color: #FFFFFF;
}

Chic 主题美化

Chic 文档

归档页面不分页

hexo-generator-archive

文章加密

hexo-blog-encrypt

修改文章永久链接

hexo-abbrlink

添加评论系统 Waline

Waline

在 themes\Chic\layout\_plugins 中新建 waline.ejs 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
  <!-- ... -->
  <script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v2/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script>
    Waline.init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app 修改此处',
    });
  </script>
</body>

在 themes\Chic\layout\post.ejs 文件中添加：

1
2
3
4
<% if (theme.waline.enable) { %>
    <div id="waline"></div>
    <%- partial('_plugins/waline') %>
<% } %>

在主题 _config.yml 中添加配置：

1
2
waline:
  enable: true

如果需要在 page 页添加评论，类似的可以在 themes\Chic\layout\page.ejs 文件中添加：

1
2
3
4
<% if (theme.waline.enable) { %>
    <div id="waline"></div>
    <%- partial('_plugins/waline') %>
<% } %>

字体修改

Google Fonts 已支持思源宋体！

在 themes\Chic\layout\_partial\head.ejs 中插入 Google Fonts 生成的代码并修改 themes\Chic\source\css\font.styl 文件中的 font-family

中文 & 自定义图标 & 不蒜子统计 & 博客年份 & 样式修改

Chic 主题

标签云美化

在 themes\Chic\source\js 下新建 codecopy.js，添加如下代码：

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
$(function () {
    // tags 隨機大小 顔色
    var list = document.querySelectorAll(".tag-cloud-tags a");
    if ($(window).width() > 768) {
        Array.prototype.forEach.call(list, (item, index) => {
            item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"; //15 ~ 35
            item.style.color =
                "rgb(" +
                Math.floor(Math.random() * 201) +
                ", " +
                Math.floor(Math.random() * 201) +
                ", " +
                Math.floor(Math.random() * 201) +
                ")"; // 0,0,0 -> 200,200,200
        });
    } else {
        Array.prototype.forEach.call(list, (item, index) => {
            item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"; //15 ~ 28
            item.style.color =
                "rgb(" +
                Math.floor(Math.random() * 201) +
                ", " +
                Math.floor(Math.random() * 201) +
                ", " +
                Math.floor(Math.random() * 201) +
                ")"; // 0,0,0 -> 200,200,200
        });
    }
})

在主题 _config.yml 中引入：

1
2
3
scripts:
  - https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
  - /js/codecopy.js

字数统计

hexo-word-counter

Fancybox 查看图片

cactus 使用上 fancybox 图片放大

参考