Github Pages + Hexo 搭建个人博客

一、Hexo

Hexo 安装和基本使用

# 准备工作：安装NodeJS
# 全局安装Hexo
npm install -g hexo-cli

# 初始化Hexo项目
hexo init hexo-blog
cd hexo-blog

# 查看目录结构
tree -L 1
.
├── _config.landscape.yml	
├── _config.yml	# 配置，比如之后在该文件配置github账号
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source	# source/_posts 存放博客文件（Markdown格式）
└── themes	# 更改博客主题皮肤

# 常用Hexo命令
hexo init [folder]	# 初始化
hexo new [layout] <title>	# 新建文章
hexo generate	# 生成静态文件，根目录生成public文件夹
hexo server	# 启动本地服务器，http://localhost:4000/
hexo deploy	# 部署到远程 (hexo -g d 生成静态文件并部署)
hexo clean	# 清除缓存文件 (db.json) 和已生成的静态文件 (public)

更换主题

官网提供了多种可选主题 Themes | Hexo

选择某个主题下载压缩包，以 Fluid 主题为例，在 GitHub 中下载 Releases 包并解压，重命名为 fluid 放在 themes 目录下。

更改 _config.yml

theme: fluid  # 指定主题
language: zh-CN  # 指定主题显示语言

新建文章

# 新建
hexo new my-blog	# hexo new post my-blog 指定layout

# 查看变化
tree source/_posts                                                       
source/_posts
├── hello-world.md
└── my-blog.md

# 写入内容后本地测试
hexo s

通过 new 命令可以在 source/_posts 文件夹下创建相应的 Markdown 文件。

通常需要在文章中插入图片，为了更规律的管理文章的图片，为每篇文章准备相对应的资源文件夹，将 _config.yml 文件中的 post_asset_folder 选项设为 true 后，创建新文章时自动创建一个同名资源文件夹。

为了使用 Markdown 引用图片，继续改动 _config.yml。

post_asset_folder: true  
marked:  
  prependRoot: true  
  postAsset: true

之后可以在文章中直接通过 ![](xxx.jpg) 引用对应的图片。

通过更改主题的 _config.yml 文件可以实现个性化，比如改变主页某处的文字、增加阅读量记录、增加评论功能等，可以根据主题相应的文档进行更改。可以注册 LeanCloud，使用其统计服务等功能。

二、Github Pages

在 Hexo 项目中安装 hexo-deployer-git 包。

npm install hexo-deployer-git --save

新建仓库，仓库名格式为 <用户名>.github.io ；在 _config.yml 中配置 GitHub 的相关信息。token 可以在 github 的 Settings/Developer Settings 中生成。

deploy:
  type: git
  repository: git@github.com:kaysonyu/kaysonyu.github.io.git
  branch: master
  token: xxx

部署到 github

hexo -g d

其他相关：Netlify，Vercel，CF Pages

参考：

1. Hexo 中文文档
2. GitHub Pages + Hexo搭建个人博客网站，史上最全教程_hexo博客-CSDN博客
3. 配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)