GitHub Pages + Hexo 博客搭建指南

GitHub Pages + Hexo 博客搭建指南

最近整理了一份 Hexo 博客从零搭建的教程,从工具准备到文章发布,一条龙走完。如果你也想拥有一个属于自己的博客站,这篇应该能帮你省不少时间。

一、准备工作

搭建 Hexo 博客需要两个基础工具。

1. Node.js

下载地址: nodejs.org

![Node.js 安装界面,勾选了核心组件和 PATH 选项](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-1.png)

安装时保持默认选项即可,核心组件会自动勾选:

  • Node.js runtime(运行时)
  • corepack manager(包管理器)
  • npm(Node 包管理工具)
  • PATH 环境变量配置

新手建议一路 Next 到底,保留 “Add to PATH” 选项方便后续全局使用 Node 命令。

![命令行验证 node -v 和 npm -v](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-2.png)

安装完成后在命令行验证:

1
2
node -v
npm -v

![验证结果](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-3.png)

2. Git

下载地址: git-scm.com镜像下载

进来之后选择自己合适的版本即可,这里提供了两种类型的 Git:

  • 独立安装程序(Standalone Installer): 32 位和 64 位 Git for Windows 的安装程序。独立安装程序是一种简便的方式,将 Git for Windows 直接安装到计算机上,使其成为系统的一部分。
  • 便携版(Portable): 32 位和 64 位 Git for Windows 的便携式版本,也被称为”存储在可移动设备上的版本”。便携版可以在没有安装过程的情况下直接运行,非常适合携带在便携式存储设备(如 USB 闪存驱动器)中使用,方便在不同计算机之间使用 Git。

一般选择 64 位的安装包即可。注意避开带有 rc0rc1 字样的预发布候选版本。

![选择 Git 版本](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-4.png)

安装完成。

![Git 安装完成](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-5.png)## 二、下载 Hexo 并完成本地部署

工具装好后,打开 Git Bash,开始安装 Hexo:

1
2
# 全局安装 Hexo CLI
npm install hexo-cli -g

![安装 Hexo CLI](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-6.png)

在想安装 Blog 的位置打开 CMD,初始化博客项目:

1
2
3
4
5
6
# 初始化博客项目
hexo init blog

# 进入目录并安装依赖
cd blog
npm install

![hexo init 执行过程](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-7.png)

执行完这几步,本地博客就已经搭建完成了。运行 hexo server 后访问 http://localhost:4000/ 即可在本地预览效果。

![Hexo 本地预览](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-8.png)

![Hexo 默认首页](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-9.png)

三、部署到 GitHub Pages

想让别人也能访问你的博客,需要把它部署到线上。这里用 GitHub Pages 免费托管。

3.1 创建 GitHub 仓库

  1. 注册/登录 GitHub
  2. 点击右上角的 Create new → “New repository” 进入新建仓库页面
  3. 仓库名填入:你的用户名.github.io(例如 zhangsan.github.io
  4. 勾选 Public
  5. 拉到下面点击 Create repository

![创建 GitHub 仓库](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-10.png)

这里提示”仓库已存在”是因为我之前已经创建过了,第一次创建不会有这个提示。

3.2 配置 _config.yml

进入之前的 Blog 文件夹,打开 _config.yml,拉到最下面,将 deploy 配置替换为:

1
2
3
4
deploy:
type: git
repository: https://github.com/你的用户名/你的用户名.github.io
branch: main

注意: 缩进格式要严格——每行前面两个空格不能删,每个冒号后面一个空格也不能删!

![编辑 _config.yml](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-11.png)

3.3 安装部署工具并上传

回到 Blog 文件夹打开 Git Bash:

1
2
3
4
5
# 安装自动部署发布工具
npm install hexo-deployer-git --save

# 清理缓存、生成静态文件、部署
hexo clean && hexo g && hexo d

第一次使用 Git 需要先配置用户信息:

1
2
git config --global user.email "你的邮箱"
git config --global user.name "你的名字"

然后在弹出的窗口内登录 GitHub 完成验证,博客就正式上线了。

![安装 hexo-deployer-git](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-12.png)

![部署过程](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-13.png)

![部署完成](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-14.png)

![部署结果](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-15.png)

![部署确认](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-16.png)

访问 https://你的用户名.github.io 就能看到自己的博客了。

![博客上线](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-17.png)

四、发布文章

日常写文章也很简单:

1
hexo new "文章名"

![hexo new 命令](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-18.png)

这会在 source/_posts/ 目录下生成一个 Markdown 文件。用编辑器打开,修改标题、日期、标签等信息即可。

小提示: 标签前面要加一个空格,否则会报错!

![编辑文章 Markdown](Hexo个人博客搭建全流程指南.assets/GitHub Pages + Hexo 博客搭建指南-19.png)

五、总结

Hexo + GitHub Pages 的组合是搭建个人博客性价比最高的方案之一——免费、轻量、维护成本低。整个过程可以概括为:

步骤 操作
安装 Node.js + Git 下载安装,验证版本
安装 Hexo npm install hexo-cli -g + hexo init
创建仓库 用户名.github.io,公开仓库
配置部署 修改 _config.yml,安装 hexo-deployer-git
上线 hexo clean && hexo g && hexo d
发文 hexo new "标题",编辑内容

把上面这些走一遍,你就拥有了一个完全属于自己的博客站。如果想折腾主题、自定义域名、添加评论系统,那就是后话了——留到下一篇再聊。