前言

如果你想快速拥有一个属于自己的博客，那么 Hexo 会是非常适合入门的选择。它是一个轻量、速度快、生态成熟的静态博客框架，配合 GitHub、Vercel平台，可以零成本完成发布。

一、这篇教程你将完成什么

学完这篇文章后，你可以完成以下事情：

1.安装 Hexo 所需环境
2.初始化一个全新的博客项目
3.本地预览博客效果
4.安装并配置主题
5.部署到 GitHub Pages
6.部署到 Vercel

二、环境准备

1. 安装 Node.js

Node.js 是 Hexo 的运行环境，必须先安装。
操作步骤：
1.打开 Node.js 官网(https://nodejs.org/en)
2.下载 LTS 稳定版
3.按默认选项完成安装
4.打开命令提示符验证版本

1
node -v

如果能正常输出版本号，就说明安装成功。

为了提升依赖安装速度，建议顺手切换 npm 镜像源：

1
npm config set registry https://registry.npmmirror.com

2. 安装 Git

Git 用于管理博客源码，也用于后续部署。

操作步骤：
1.打开 Git 官网下载页
2.按默认选项完成安装
3.安装后执行以下命令确认是否正常

1
git --version

3. 安装 Hexo CLI

环境准备完成后，安装 Hexo 命令行工具：

1
npm install -g hexo-cli

安装完成后，检查版本：

1
hexo -v

4. 配置 GitHub 账号信息

如果你打算部署到 GitHub Pages，建议先配置全局 Git 用户信息：

1
2
git config --global user.name <你的用户名>
git config --global user.email <你的邮箱>

查看是否配置成功：

1
git config -l

5. 配置 SSH 连接 GitHub

为了后续推送代码更方便，建议配置 SSH：

1
ssh-keygen -t rsa -C <你的邮箱>

一路回车后，打开用户目录下的 .ssh 文件夹，复制 id_rsa.pub 内容，添加到 GitHub：

头像 → Settings → SSH and GPG keys → New SSH key

添加完成后测试连接：

1
ssh -T git@github.com

首次连接时看到确认提示，输入 yes 即可。

三、新建 Hexo 项目

环境安装完成后，就可以正式创建博客了。

1. 初始化项目

在你想放置博客的位置打开终端，执行：

1
2
hexo init <项目名>
cd <项目名>

例如：

1
2
hexo init my-blog
cd my-blog

2. 安装依赖

1
npm i

安装完成后，一个基础的 Hexo 博客就已经创建好了。

四、本地预览博客

为了先确认博客能正常运行，建议先进行本地预览。

1. 生成静态文件

1
hexo generate

2. 启动本地服务

1
hexo server

浏览器打开：

http://localhost:4000/
如果页面能正常打开，就说明博客已经运行成功。

[!NOTE]
常用缩写命令也可以记一下：hexo cl、hexo g、hexo s。

五、了解基础目录结构

新手最容易迷糊的就是项目目录，下面这几个位置最常用：

_config.yml：Hexo 全局配置文件
source/_posts/：文章存放目录
themes/：主题目录
public/：生成后的静态文件目录
scaffolds/：文章模板目录
其中你最常接触的通常是：

1.写文章：source/_posts/
2.改站点信息：_config.yml
3.改主题样式：主题目录

六、安装与配置主题

默认主题能用，但不够好看。大多数人都会换成更适合博客展示的主题。

1. 选择主题

如果你想快速做出更完整的个人博客，推荐优先看成熟主题文档，例如：
reimu 主题

2. 安装主题

不同主题安装方式略有不同，一定要以该主题官方文档为准。
使用 npm

1
npm install hexo-theme-reimu --save

或直接克隆本仓库至 /themes 文件夹下并重命名为 reimu

1
git clone https://github.com/D-Sketon/hexo-theme-reimu.git

并修改 _config.yml 中的 theme

1
theme: reimu

3. 主题结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
source/
├── images/
│   └── favicon.ico        # 网站图标
├── _data/
│   ├── avatar/
│   │   └── avatar.webp    # 头像文件
│   ├── covers.yml         # 文章封面 URL 列表
│   └── covers/            # 文章封面文件夹
├── about/                 # 关于页面
│   └── index.md
├── friend/                # 友链页面
│   ├── index.md
│   └── _data.yml          # 友链数据
└── _posts/                # 文章文件夹
    └── xxxx.md

七、托管到 GitHub

1. 创建仓库

在 GitHub 创建一个仓库，仓库名格式必须为：

1
<用户名>.github.io

例如你的用户名是 xiaoming，仓库名就必须叫：

1
xiaoming.github.io

2. 安装部署插件

1
npm install hexo-deployer-git --save

3. 修改部署配置

打开根目录下的 _config.yml，添加或修改 deploy：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:<用户名>/<用户名>.github.io.git
  branch: main

4. 执行部署

1
2
3
hexo clean
hexo generate
hexo deploy

如果终端出现 Deploy done，说明部署成功。

稍等一会儿后，访问：

1
https://<用户名>.github.io

八、可选部署到 Vercel

1.登录 Vercel 官网(https://vercel.com/)
2.使用 GitHub 账号授权登录
3.导入你的 Hexo 仓库
4.点击部署
5.在后台绑定域名

说些什么吧！

giscus