随着静态博客技术的发展,越来越多的开发者选择使用静态网站生成器来搭建个人博客。其中,Hexo 是目前最流行的博客框架之一,它基于 Node.js 构建,能够快速生成静态网页,并且可以通过 GitHub Pages 免费部署到互联网上,让你的个人博客能够被全球用户访问。

本文将从零开始,详细介绍如何搭建一个 Hexo 博客并部署到 GitHub Pages,同时讲解博客的基本使用、配置及优化方法,全程步骤清晰、细节拉满,即使是新手也能轻松跟随操作。

准备工作

在正式开始搭建博客之前,有几个注意事项需要提前了解,这能帮助你避免操作过程中出现不必要的错误,提高搭建效率:

  1. 输入命令时要保证拼写准确,建议切换为 英文输入法,避免中文符号导致命令执行失败;

  2. 文中出现的 “用户名” 和 “邮箱” 需要替换为自己的 GitHub 账户信息,切勿直接复制示例;

  3. 所有 Git 操作建议使用 Git Bash,兼容性更好、操作更便捷;

  4. 若第一次接触 Node.js、Git 或 Hexo,建议严格按照步骤操作,不要跳步骤。

环境搭建

Hexo 运行依赖 Node.js 环境,同时部署需要 Git,因此需要先安装这两个工具,下载地址均为官方地址,安全可靠,下载后一路点击 Next即可完成安装,无需额外配置。

工具下载地址

验证安装

安装完成后,按 Win + R 打开运行窗口,输入 cmd 并回车,打开命令提示符窗口,依次输入以下三条命令,验证安装是否成功:

1
2
3
node -v
npm -v
git --version

若分别显示类似以下版本号,说明安装成功:

1
2
3
v18.x.x  # Node.js 版本
9.x.x # npm 版本(Node.js 自带)
git version 2.x.x # Git 版本

若出现“不是内部或外部命令”的提示,可重新运行安装包再次安装。

连接 GitHub

首先需要注册一个 GitHub 账号(未注册可直接访问 GitHub 官网 注册,填写用户名、邮箱、密码并完成邮箱验证即可)。注册完成后,需配置 Git 与 GitHub 的连接,全程在 Git Bash 中操作,分为4个步骤。

  1. 配置 Git 用户信息

在任意文件夹右键 → Git Bash Here,输入以下两条命令(替换为自己的 GitHub 用户名和邮箱):

1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub邮箱"

示例:

1
2
git config --global user.name "shanchuann"
git config --global user.email "example@email.com"

输入完成后无需额外确认,直接进行下一步。

  1. 创建 SSH 密钥

SSH 密钥用于 Git 与 GitHub 之间的身份验证,避免每次操作都输入账号密码。在 Git Bash 中输入以下命令(替换为自己的 GitHub 邮箱):

1
ssh-keygen -t rsa -C "GitHub邮箱"

示例:

1
ssh-keygen -t rsa -C "example@email.com"

输入命令后,后续出现的所有提示均一路回车,系统会自动在指定目录生成 SSH 密钥文件。

  1. 添加 SSH 密钥到 GitHub

首先找到生成的密钥文件:进入目录 C:\Users\用户名.ssh(.ssh 是隐藏文件夹,需设置显示隐藏文件),找到 id_rsa.pub 文件,用记事本打开并复制全部内容(不要遗漏字符、不要添加多余空格/换行)。

然后进入 GitHub,按以下步骤操作:

  1. 点击右上角头像、Settings;

  2. 左侧菜单栏找到 SSH and GPG keys;

  3. 点击右上角 New SSH key;

  4. Title 填写任意名称(如“Hexo key”),粘贴刚刚复制的内容;

  5. 点击 Add SSH key,完成添加。

  6. 测试连接

在 Git Bash 中输入以下命令,测试 Git 与 GitHub 是否连接成功:

1
ssh -T git@github.com

第一次输入会提示:Are you sure you want to continue connecting,输入 yes 并回车。

若出现 Hi username! You’ve successfully authenticated(username 是你的 GitHub 用户名),说明连接成功;若报错,可检查密钥复制是否完整、添加是否正确,重新操作即可。

创建 GitHub Pages 仓库

连接 GitHub 成功后,需要创建一个用于部署博客的仓库,仓库名称有固定格式,必须严格填写:

  1. 登录 GitHub,点击右上角 New repository;

  2. Repository name 填写 用户名.github.io(替换为自己的 GitHub 用户名),示例:shanchuann.github.io(名称错误会导致博客无法访问,务必核对);

  3. 勾选 Initialize this repository with a README(自动创建 README 文件,方便后续管理);

  4. 其他设置保持默认,点击 Create repository,完成仓库创建。

仓库创建成功后,自动生成博客地址:https://用户名.github.io(示例:https://shanchuann.github.io),可先记录该地址,后续部署后使用。

本地安装 Hexo

首先创建一个文件夹用于存放博客(名称自定义,建议简洁易记,如 Hexo-Blog),进入该文件夹后,右键 → Git Bash Here,开始安装和初始化 Hexo。

  1. 安装 Hexo

在 Git Bash 中输入以下命令,全局安装 Hexo 脚手架工具:

1
npm install -g hexo-cli

Mac 用户需添加 sudo(输入命令后需输入电脑密码验证):

1
sudo npm install -g hexo-cli

安装完成后,Hexo CLI 即可正常使用。

  1. 初始化博客

在博客目录(Hexo-Blog)的 Git Bash 中,依次输入以下两条命令:

1
2
hexo init
npm install

Hexo 会自动下载博客基础文件和依赖,生成完整的博客项目结构。

  1. 本地预览

输入以下两条命令,启动本地服务器,预览博客效果:

1
2
hexo g
hexo s

服务器启动成功后,浏览器访问 http://localhost:4000,若能看到 Hexo 默认页面,说明本地博客安装成功。

部署 Hexo 到 GitHub Pages

本地预览无误后,即可将博客部署到 GitHub Pages,让互联网用户访问,步骤如下:

  1. 安装部署插件

在 Git Bash 中输入以下命令,安装 Hexo 部署插件(用于将本地文件推送到 GitHub 仓库):

1
npm install hexo-deployer-git --save
  1. 修改配置文件

打开博客目录中的 _config.yml 文件(Hexo 全局配置文件,可用记事本或代码编辑器打开),向下滑动找到 deploy 部分,修改为以下格式(替换为自己的 GitHub 用户名):

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

示例:

1
2
3
4
deploy:
type: git
repository: git@github.com:shanchuann/shanchuann.github.io.git
branch: main

注意:配置文件中,冒号后必须有一个空格,否则配置无法生效。修改完成后保存并关闭文件。

  1. 部署博客

在 Git Bash 中输入以下命令,开始部署:

1
hexo d

部署过程可能需要几分钟(取决于网络速度),部署完成后,等待 3-5 分钟让 GitHub 更新页面,然后打开浏览器,输入之前记录的博客地址 https://用户名.github.io,若能看到与本地预览一致的页面,说明部署成功。

绑定自定义域名(可选)

若希望博客拥有个性化域名(而非默认的 用户名.github.io),可进行域名绑定,该步骤为可选操作,不影响博客正常使用。

  1. 购买域名

在域名服务商处购买域名,推荐服务商:Namesilo、阿里云、腾讯云,购买过程按提示操作即可,域名后缀可选择 .com、.cn 等。

  1. 设置 DNS 解析

登录域名服务商后台,找到 DNS 解析设置,添加一条 CNAME 记录,记录值填写你的 GitHub Pages 地址(用户名.github.io),例如将 www.example.com 指向 shanchuann.github.io(具体操作可参考服务商帮助文档)。

  1. 创建 CNAME 文件

进入博客目录的 source 文件夹,创建一个名为 CNAME 的文件(无后缀名),用记事本打开,内容填写你的自定义域名(例如 www.example.com),保存并关闭。

  1. 重新部署并开启 HTTPS

在 Git Bash 中依次输入以下命令,重新部署博客,使域名设置生效:

1
2
3
hexo clean
hexo g
hexo d

部署完成后,登录 GitHub 博客仓库,点击 Settings → 找到 GitHub Pages → 勾选 Enforce HTTPS,等待几分钟后,HTTPS 即可生效,访问博客会显示安全锁图标。

发布博客文章

博客搭建完成后,可通过以下步骤发布文章:

  1. 新建文章

在 Git Bash 中输入以下命令,新建一篇文章(替换“文章标题”为自己的标题):

1
hexo new "文章标题"

示例:

1
hexo new "Hexo 搭建教程总结"

文章文件会自动生成在 source/_posts 文件夹中,格式为 Markdown(例如 Hexo-搭建教程总结.md)。

  1. 编写文章

用 Markdown 编辑器打开生成的文章文件,按以下结构编写(Front-matter 配置 + 正文):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: Hello World # 文章标题
date: 2026-03-14 # 发布日期
categories: # 文章分类
- Diary
tags: # 文章标签
- Hexo
- Blog
---

# 摘要
这里填写文章摘要,简要介绍文章内容。

<!--more-->

# 正文
这里填写文章正文,支持 Markdown 语法(标题、段落、图片、链接、代码块等)。

说明: 是摘要分隔符,只有摘要会显示在博客首页,点击文章标题可查看完整正文。

  1. 发布文章

文章编写完成后,在 Git Bash 中输入以下命令,发布到博客:

1
2
hexo g
hexo d

等待几分钟后,刷新博客页面,即可看到刚刚发布的文章。

博客配置

Hexo 博客的所有配置都集中在 _config.yml 文件中,修改该文件可自定义博客样式和功能,常用配置项如下(注意:冒号后必须有空格):

  • title:网站名称(如“我的技术博客”);

  • author:作者名称;

  • description:网站描述(用于搜索引擎收录);

  • language:网站语言(设置为 zh-CN 即为中文);

  • theme:博客主题(后续会讲解更换方法)。

修改完成后,保存文件,输入 hexo g 和 hexo d 重新部署,配置即可生效。

更换主题

Hexo 支持大量免费主题,默认主题较为简洁,可更换为更美观的主题(如 NexT、Butterfly),Butterfly 主题颜值高、功能全,且对新手友好,以下以安装 Butterfly 主题为例,步骤如下:

  1. 下载主题

在 Git Bash 中输入以下命令,进入博客根目录后,将 Butterfly 主题下载到博客的 themes 文件夹中(推荐稳定版,若国内访问 GitHub 较慢,可使用 Gitee 镜像地址):

1
2
3
4
# 稳定版(推荐)
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# 国内镜像版(GitHub访问慢时使用)
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

下载完成后,可在博客根目录的 themes 文件夹中看到 butterfly 文件夹,即为主题文件。

1
git clone https://github.com/iissnan/hexo-theme-next themes/next
  1. 安装主题依赖

Butterfly 主题正常运行需要依赖额外插件,在 Git Bash 中输入以下命令安装依赖,确保主题功能正常:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 修改主题配置

打开博客根目录中的 _config.yml 文件(Hexo 全局配置文件),找到 theme 配置项,将其改为 butterfly,保存并关闭文件:

打开 _config.yml 文件,找到 theme 配置项,将其改为 butterfly:

1
theme: butterfly
  1. 重新部署

输入以下命令,清除本地缓存、重新生成静态文件并部署博客,即可看到 Butterfly 新主题:

1
2
3
hexo clean
hexo g
hexo d

Butterfly 主题支持丰富的自定义配置(如导航栏、侧边栏、配色等),可打开 themes/butterfly/_config.yml 文件(主题专属配置文件)进行个性化修改,具体配置可参考 Butterfly 主题官方文档。更换其他主题的流程类似:先下载主题到 themes 文件夹,安装对应依赖(若有),再修改 theme 配置项,最后重新部署即可。

Hexo 常用命令

整理 Hexo 最常用的命令,方便日常管理博客,如下表所示:

命令 作用
hexo new “name” 新建文章(name 为文章标题)
hexo new page “name” 新建页面(如关于页、分类页)
hexo g 生成静态页面
hexo d 部署博客到 GitHub Pages
hexo g -d 生成静态页面并部署
hexo s 启动本地服务器,预览博客
hexo clean 清除本地缓存和生成的静态文件
hexo help 查看所有 Hexo 命令的详细说明

总结

通过以上步骤,我们完成了 Hexo 博客的完整搭建流程:安装 Node.js 和 Git、 创建 GitHub Pages 仓库 → 本地安装并初始化 Hexo、本地预览、部署到 GitHub Pages、(可选)绑定自定义域名。最终,我们成功搭建了一个完全免费的个人博客网站。

本次搭建使用的技术栈:Hexo + GitHub Pages + Node.js,该方案具有以下优点:

  • 免费:无需支付服务器费用,GitHub Pages 提供免费托管;

  • 简单:部署只需几条命令,无需复杂的服务器配置;

  • 可扩展:支持更换主题、安装插件,自定义博客功能;

  • 便捷:支持 Markdown 写作,适合开发者记录技术笔记、分享经验。

搭建完成后,可不断完善博客内容,探索 Hexo 的高级功能(如安装评论插件、访问统计插件),让博客更具实用性。希望本文能帮助到想要搭建个人博客的小伙伴,祝大家都能拥有自己的个人博客,记录成长、分享价值。