Hexo 搭建静态博客并部署到 GitHub Pages 完整教程

欢迎来到我的博客！这是我的第一篇文章。
本博客使用 Hexo 搭建，主题采用了 zhaoo。

环境要求

在开始之前，请确保你的系统已安装以下软件：

快速建站

前期装备

1. 安装 Node.js（建议使用 LTS 版本）
2. 配置 Node.js 环境变量
3. 全局安装 Hexo 脚手架：

1

$ npm install hexo-cli -g

安装完成后，可以通过以下命令验证是否安装成功：

1

$ hexo -v

创建项目

1
2
3

$ hexo init MyBlog
$ cd MyBlog
$ npm install

初始化完成后，项目目录结构如下：

1
2
3
4
5
6
7
8

MyBlog/
├── _config.yml       # 站点配置文件
├── package.json      # 依赖配置
├── scaffolds/        # 文章模板目录
├── source/           # 资源文件目录
│   ├── _drafts/      # 草稿目录
│   └── _posts/       # 文章目录
└── themes/           # 主题目录

更多信息：写作

运行本地预览

1

$ hexo server

启动后访问 http://localhost:4000 即可预览博客效果。

也可以使用简写命令 hexo s

更多信息：服务器

生成静态文件

1

$ hexo generate

也可以使用简写命令 hexo g

执行后会在 public/ 目录下生成所有静态文件。

更多信息：生成文件

部署到远程站点

1

$ hexo deploy

也可以使用简写命令 hexo d

更多信息：部署

部署到 GitHub Pages

1. 创建 GitHub 仓库

在 GitHub 上创建一个名为 <你的用户名>.github.io 的仓库。

2. 安装部署插件

1

$ npm install hexo-deployer-git --save

3. 配置部署信息

修改 _config.yml 中的部署配置：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/<你的用户名>/<你的用户名>.github.io.git
  branch: main

4. 一键部署

1

$ hexo clean && hexo generate && hexo deploy

加入主题

安装 zhaoo 主题

1

$ git clone https://github.com/zhaoo/hexo-theme-zhaoo.git themes/zhaoo

启用主题

修改 Hexo 根目录下的 _config.yml 文件：

1

theme: zhaoo

主题配置

将主题目录下的 _config.yml 复制到根目录，重命名为 _config.zhaoo.yml，然后按需修改配置项，例如：

1
2
3
4
5
6
7
8

# 站点信息
subtitle: 我的个人博客
description: 记录技术与生活

# 社交链接
social:
  github: https://github.com/你的用户名
  email: your@email.com

具体使用方式：查看文档

常用命令速查

写作技巧

新建文章

1

$ hexo new "文章标题"

文章会自动创建在 source/_posts/ 目录下，文件名为 文章标题.md。

Front-matter 配置

每篇文章顶部的 YAML 配置块称为 Front-matter，常用字段如下：

1
2
3
4
5
6
7
8
9
10
11

---
title: 文章标题
date: 2021-12-04 11:22:50
tags:
  - 标签1
  - 标签2
categories:
  - 分类1
  - 子分类
cover: /images/cover.jpg   # 封面图片
---

摘要截断

在文章中添加 <!-- more --> 标记，该标记之前的内容将作为文章摘要显示在首页。

参考资料

• Hexo 官方文档
• zhaoo 主题文档
• GitHub Pages 文档