Hexo 与 GitHub 搭建静态博客笔记

整理了一下 Hexo 搭建过程中的流程：

1. 环境搭建
2. Hexo 相关服务使用
3. 定制化主题

   1. 环境搭建

在使用 Hexo 和 GitHub 搭建静态博客的方案中，初步阶段需要使用到博客框架 Hexo 、代码托管服务平台 GitHub和分布式版本控制软件 git。环境搭建过程:

1. 安装 Hexo 框架 因为该框架是依赖于 Node.js ，因此在先需要安装 Node 之后，通过 npm 包管理命令进行安装 Hexo（需要注意除了通过 CMD 方式安装 Node 外，可以在 Node.js 链接中选择长期稳定版本进行导航安装）：

   # mac 通过 homebrew 进行安装
   $ brew install node
   
   # 检查是否安装正确，分别显示 node 和 npm 的版本
   $ node -v
   v12.18.2
   $ npm -v
   6.14.5
   # 安装 hexo 框架
   $ npm install -g hexo-cli
   
   # 检查 hexo 安装是否正确
   $ hexo -v
   
   # 为了部署的时候使用 git ，可以在这里安装上 hexo-deployer-git
   $ npm install --save hexo-deployer-git

   hexo -v 命令会显示 hexo 版本信息、系统信息以及其他依赖的版本信息

2. 安装 git 软件 安装方式同样可以通过 CMD 和安装程序导航两种方式：

   # homebrew 安装
   $ brew install git

2. Hexo 搭建博客

Hexo 搭建博客，包括的过程：

1. 初始化一个博客目录，该目录最后会生成博客框架需要的基础内容

   # 创建并进入一个文件目录
   $ mkdir Blog && cd Blog
   
   # 初始化服务
   $ hexo init

2. 启动服务 主要是用于预览博客效果，使用的命令为 hexo s 或者 hexo server。其他选项参数使用说明：

   -p <port_num> # 设置端口
   -i <ip_address> # 设置默认的 IP 地址，不重写的情况下，默认是 0.0.0.0

3. 创建 post 生成一个 <post_name> 的 post 文件，可以通过命令 hexo new “<post_name>” 生成一个 markdown 文件；也可以通过直接在通过一般管理文件的方式，可以直接在 source 目录下的 _posts 目录中管理——即直接在 source/_posts 下创建、编辑以及删除等操作 post 文件

4. 生成静态文件 要以前端的方式展示出博客，可以生成静态文件这样可以部署到相关服务器上，以方便网页访问。生成静态文件命令是 hexo generate ，或者使用 hexo g。推荐在生成之前进行清除数据（设置的 public_dir 目录）和数据库，需要使用命令 hexo clean。默认生成的内容是在一个 public 目录中，如果需要调整到其他目录需要在 _config.yml 文件中 Directory 部分中修改 public_dir 对应的值即可调整

5. 部署 需要注意部署到 GitHub 之前需要设置好仓库，之后才能部署

   • 创建 GitHub 仓库时，其名称一个可以用于访问的地址，例如：<name>.github.io 的仓库是可以直接访问的，其中 <name> 是可以任意取（但是建议是直接使用自己的 GitHub 的用户名称^1），但 github.io 必须加上

   • 修改配置信息 需要在 _config.yml 中修改 deploy 部分信息，更多信息可以参考 官方文档部署说明

     # Deployment
     ## Docs: https://hexo.io/docs/deployment.html
     deploy:
       type: git
       repo: <远程仓库链接>
       branch: <git 管理的分支>

   • 使用 hexo d 或者 hexo deployment 进行部署。此外可以直接使用一条命令完成生成静态文件和部署，即 hexo generate --deploy 或者 hexo deploy --generate

3. 定制化主题

通常情况下都是依赖于其他相对应的主题，在进行优化调整。这里主要说明怎么样使用主题，以及相关配置修改。一般在页面 Themes | Hexo 中筛选使用的主题之后：

1. 在 Blog 文件夹中使用 git 进行 clone repo： git clone <git_url> themes/<theme_name>，通过该命令对应的主题 repo 会在 themes 目录下创建一个对应的主题[^2]
2. 修改主题配置，在 _config.yml 文件中修改 theme 对应的属性值，例如 theme: icarus 使用的就是 icarus 主题
3. 后续步骤完成生成静态文件和部署过程即可

参考

主要是因为后面文件引用会存在某些问题，用户名是被当作根目录来使用，因此在使用内部引用 CSS 和 JS 文件时可以方便使用<name>.github.io/<other_info>。如果需要解决掉因为链接引用是否使用相对链接，可以调整 _config.yml 中 Writing 部分中的 relative_link 设置为 true

[^2]: 主题 repo 作为独立的 submodule 管理

如果主题是直接克隆 repo 到本地的情况下，那么需要添加 submodule 的方式让第三方插件作为 submodule 和个人文件保持独立： git submodule add <github_link> themes/<theme_name>

[^3]: 部署过程提示需要配置 git 全局用户名

这个提示信息是因为使用的 hexo 部署工具没有识别到用户名和邮箱，只需要修改 .deploy_git/.git/config 文件信息即可，并不需要真正的部署全局信息。将以下信息添加到 config 中即可：

[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true
	ignorecase = true
	precomposeunicode = true
# 下面是需要添加上的信息
[user]
	name = <user_name>
	email = <user_email>