前言

在我这次搭建博客的过程中，学到了很多新东西，查找网页教程的过程中看到很多大佬的博客，在浏览他们博文的同时，了解了一些新的概念和名词，非常感谢～
整个搭建的方案经历了几次转折，我最初在什么都不懂的情况下使用的是 Hexo 提供的一键部署方案，最后采取了自动化部署的方案。
欢迎到俺の小屋观光 []_(￣▽￣)* 乾杯~~~

概述

两种部署方式

小白版：直接利用 hexo 框架的 hexo init && hexo clean && hexo deploy
进阶版：利用 Github Actions 实现自动化部署（hexo generate 生成的 ./public 文件夹直接生成在 Github 托管的虚拟机上，本地调试的时候可以用 hexo server）

主题选择

搭建过程中接触过的几个主题：

字体选择

知识要点

Git 基础命令（fork / clone / add / commit / push / fetch / merge / update / remote add / status / log / pull）和 Git 高级用法（submodule）以及 Git 工具（gitk / git-gui）
Github 提供的几项服务：Github Pages / Github Actions
域名 / IP地址 / DNS解析三者之间的关系、A记录 / CNAME记录 / NS记录的编写
网页编程： HTML / CSS / JavaScript / Node.js（包管理工具：npm） / EJS 框架 / YAML（.yml文件）
Shell / Bash 脚本（echo 输出 / sed 工具）
CDN 加速（jsdelivr）

搭建前的准备

一个域名：zqchen.me（注册商是 GoDaddy，目前给我提供 DNS解析服务的也是这家注册商，由于最终解析到的服务器属于Github，架设在美国，故解析不需要国内备案）
搞清楚 DNS服务提供商要求你输入的A记录、CNAME记录、NS记录是什么；如何填写这几个记录，使得在浏览器上输入我们的域名敲一个回车就可以直接访问到我们托管在 Github Pages 上的页面

小白版方案

Github Pages 官网介绍搭建的 Tutorial + Hexo 官网参考手册在 Github Pages 上的一键部署方案（hexo init && hexo clean && hexo generate && hexo server 后在默认的 localhost:4000 上查看本地未部署的静态页面的解析效果，这个效果和最终发布在 Github Pages上联网访问的效果是一致的）

最初做法

最初我的方法是这样的，这也是网上大多数教程的方法：hexo 框架生成渲染后的静态页面，将此页面通过 hexo 提供的命令hexo deploy 一键部署到 Github Pages 个人主页：zhuoqun-chen.github.io 上，并且修改 setting，使得 https://zhuoqun-chen.github.io/ 可以使用新的域名 https://zqchen.me/，接下来在 DNS解析那里添加1个 CNAME 记录（zqchen.me --> zhuoqun-chen.github.io）和4个A记录（zqchen --> 185.162.118.10），就可以了。（参考资料：配置 GitHub Pages 站点的自定义域）

改进做法

后来我觉得把博客直接搭建在 https://zhuoqun-chen.github.io/ 下有点不妥，因为我想留着这个域名以后发布一些简历或者个人介绍什么的，那么就想把博客项目单独新建一个仓库 zqchen.me，在这个仓库里设置 main 分支为 Github Page。

事实上，Github Pages 服务分为两种：

个人或组织及企业账户的主页
每个项目的展示页面，也即每个仓库的展示页面

Github 给每个账号提供的域名就是 username.github.io，情况1就要求用户新建一个仓库名必须是 username.github.io，这个仓库建好后在 setting 里开启 Github Pages 服务，默认的域名就是 https://username.github.io

对于情况2，仓库名可以随便起，但是设定该仓库的某个分支为 Github Pages 后，默认的域名是 https://username.github.io/repo/

Github 还要求对项目仓库自定义域名时必须在 CNAME记录中让域名指向 username.github.io，而不能是 username.github.io/repo，同时要在setting里面写入自定义域名，假如这个域名被别人的仓库给写到他的setting里了，Github就不允许你写入你的setting里了（这是一个坑~ 在GitHub Pages 官方文档里有写到）

缺点及弊端

想要更新博客必须在同一台本地电脑上，一旦电脑丢失或损坏个人博客也就不复存在了（因为 hexo deploy 只是把 public 文件夹下的所有内容给覆写到 zhuoqun-chen/zhuoqun-chen.github.io 仓库的唯一的 main 分支上，Github 上并不存在博客的主题配置文件、各个 .md 源文件等，而仅有渲染后的各个静态文件 html、脚本文件 .js、图片 .jpg/.png。）
因为缺少搭建环境，无法在移动端（手机、iPad）或者其他电脑上随心所欲的写博文并上传让其他人看到。

进阶版方案

在参考了很多教程，对这一套流程都很熟悉了之后，我采取了 journey-ad 大佬现在的这个方案：生成站点内容的源文件同站点文件本身分离，分别来维护，后者的生成并上传采用的是 Github Actions 服务。

方案架构

内容、主题、配置文件、图片等单独维护，由 Hexo 生成的站点文件单独维护
博客使用的主题设置成子模块：在本地只用 hexo init 生成必要的几个文件和文件夹，而部署就不采用 hexo 的一键部署了，接着在 themes/ 下引入主题文件夹 hexo-theme-geek 作为这个博客仓库的子模块 submodule，在本地使用还需 git submodule init && git submodule update 等等
博客项目单独建立一个仓库名 zqchen.me，并创建两个分支
- main 分支包含：内容及模板（scaffolds 和 source 文件夹）、站点配置文件（_config.yml）、主题（themes 文件夹）、其他（package.json）等资源
- gh-pages 分支则包含：由 GitHub Actions 自动化生成的静态文件（即对应本地执行 hexo generate 生成的 public 文件夹的所有内容，实际上一系列 actions 后的目标就是在 GitHub 托管的虚拟机上运行 hexo init、hexo genreate 操作，并把在其上生成的 public 文件夹以及我们自己写的 CNAME 文件重新上传到 zqchen.me 仓库的 gh-paghes 分支上，而能够引起一系列动作的源头，我们在 .github/workflow/deploy.yml 中设定为 main 分支有了新的 push ，即每当我们执行 git push origin main 时，就会自动引发 deploy.yml 所指定的 Github Actions 动作流。）

具体实施

Github新建远程仓库 zqchen.me，在默认分支 main 下新建一个 gh-pages 分支，在 setting 里设置 gh-pages 分支使用 Github Pages 服务
本地电脑 hexo init，生成 node_modules/ | scaffolds/ | themes/ | source/ | package.json | _config.yml
在 themes/ 文件夹下引入 submodule 主题 hexo-theme-geek，此时会多出来 .gitsubmodule 和 themes/hexo-theme-geek/ 文件夹
修改站点配置文件 _config.yml：修改基本信息 | 取消使用 highlight | 主题 landscape --> hexo-theme-geek
新建 .github/workflows/deploy.yml 动作流指令文件，编写相应的自动化部署操作流程
将以上涉及到的全部文件和文件夹刨除 node_modules/ 之外全部 git commit && git push origin main，由于 push 操作引发了 deploy.yml，会自动执行一系列操作，站点静态页面和 CNAME文件最终被远端自动上传到 gh-pages 分支
在浏览器中输入 zqchen.me，联网访问成功

方案优势

速度快：git push 到远端仓库后，执行动作流的虚拟机和仓库服务器本身都在美国，所以远端之间上传和下载的速度都很快，真正做到了 git push “一键部署”
可以在手机或者iPad设备上登录网页版的 Github，直接新建一个 .md 文件并撰写内容，commit 之后，重新访问网站后就可以看到加入新博文的网站了，无需电脑的参与。最大的优势在于，即使电脑损毁，生成博客所需的所有内容依然存储在远端，随时可以执行 git clone 后恢复。

缺点及弊端

但是这个方案有一个缺点，就是单独更新 main 分支但更新的内容并不是 markdown 文章，例如只是更新一下 README.md，commit 并 push 之后仍然会启动 actions 工作流重新生成一次同样的站点文件，虽然说由于前后的 public 文件夹一模一样，执行peaceiris/actions-gh-pages@v3 后并不会把虚拟机上的 public 覆写到 gh-pages 分支上，但这样做依然会浪费远端虚拟机的一些资源。（当然对于使用者的我们而言还是很方便的b（￣▽￣）d）

结语

欢迎到俺の小屋观光 []_(￣▽￣)*

用到的 Git 命令

git fetch + git merge
git update
git submodule add
git status
git add .
git checkout
git commit -a / -m
git revert 版本回退

用到的Github Actions

github_token 权限的设置以及把 token 添加到某个仓库中

actions/checkout@master --> actions/checkout@v2
peaceiris/actions-gh-pages@v3
actions/create-release@v1

一些新玩意儿

ruby / SpingBoot / rail
Cloudflare
xml / svg 图片
Web 字体简介: TTF, OTF, WOFF, EOT & SVG
Typescript
图床：Booru Project 及其衍生的 Danbooru、Moebooru 等等（Booru是什么？）

NSFW网站（逃）

rule34.xxx
gelbooru.com

图标网站

提供图标的网站 Icons8
制作自己的 favicon（favicon制作-在线工具）

参考来源

官方参考

Git - Book
Git - 子模块
Hexo 官方文档 ---- Hexo官方参考手册里的变量和辅助函数需要仔细看看，因为主题源代码里写有很多这样的语句和变量，最开始看代码的时候我根本看不懂。
GitHub Pages 官方文档
GitHub Actions 官方文档

大佬的博客

DIYgod
jouney-ad（live2D看板娘、CPlayer和DPlayer播放器）
阮一峰的网络日志（YAML 语言教程、GitHub Actions 入门教程）

Hexo 部署方案

使用hexo，如果换了电脑怎么更新博客？----简写版：两分支部署Hexo ，此方案的梳理：hexo博客同步管理及迁移说明：这个方案没有用到 Github Actions，但总的来说和我目前的方案是一致的，同属于“一个仓库的两个分支分别负责内容和站点”方案
Hexo+GitHub Actions 完美打造个人博客
Hexo：语雀云端写作，Github Actions持续集成 ---- 涉及到Github_TOKENS的使用
如何将你的github仓库部署到github pages（github.io博客）
Hexo 使用 Github Actions 自动更新 - 简书

Git 命令 / Github Pages / Github Actions

JS / Node.js

npm

HTML

div里常用的class命名

Linux

Hexo博客基础配置

常见问题

Hexo常见问题解决方案

主题和字体

Hexo主题开发----强烈推荐，该文章讲的是制作一个完整的主题的全过程，涉及到很多代码方面的东西
hexo博客next主题添加自定义字体comic neue
Hexo 自定义字体
hexo博客的背景设置----强烈推荐，添加各种美化的小部件的步骤很齐全
教你定制Hexo的landscape打造自己的主题
【个人博客搭建系列二】hexo框架中自定义博客页面主题

全面总结Hexo博客部署解决方案

前言

概述

两种部署方式

主题选择

字体选择

知识要点

搭建前的准备

小白版方案

最初做法

改进做法

缺点及弊端

进阶版方案

方案架构

具体实施

方案优势

缺点及弊端

结语

用到的 Git 命令

用到的Github Actions

一些新玩意儿

NSFW网站（逃）

图标网站

参考来源

官方参考

大佬的博客

Hexo 部署方案

Git 命令 / Github Pages / Github Actions

JS / Node.js

npm

HTML

Linux

Hexo博客基础配置

常见问题

主题和字体

个性化及性能优化

猜你喜欢