Hexo 搭建个人博客
随着静态博客技术的发展,越来越多的开发者选择使用静态网站生成器来搭建个人博客。其中,Hexo 是目前最流行的博客框架之一,它基于 Node.js 构建,能够快速生成静态网页,并且可以通过 GitHub Pages 免费部署到互联网上,让你的个人博客能够被全球用户访问。
本文将从零开始,详细介绍如何搭建一个 Hexo 博客并部署到 GitHub Pages,同时讲解博客的基本使用、配置及优化方法,全程步骤清晰、细节拉满,即使是新手也能轻松跟随操作。
准备工作
在正式开始搭建博客之前,有几个注意事项需要提前了解,这能帮助你避免操作过程中出现不必要的错误,提高搭建效率:
输入命令时要保证拼写准确,建议切换为 英文输入法,避免中文符号导致命令执行失败;
文中出现的 “用户名” 和 “邮箱” 需要替换为自己的 GitHub 账户信息,切勿直接复制示例;
所有 Git 操作建议使用 Git Bash,兼容性更好、操作更便捷;
若第一次接触 Node.js、Git 或 Hexo,建议严格按照步骤操作,不要跳步骤。
环境搭建
Hexo 运行依赖 Node.js 环境,同时部署需要 Git,因此需要先安装这两个工具,下载地址均为官方地址,安全可靠,下载后一路点击 Next即可完成安装,无需额外配置。
工具下载地址
Node.js:https://nodejs.org/zh-cn(推荐下载长期支持版 LTS,稳定性更强)
验证安装
安装完成后,按 Win + R 打开运行窗口,输入 cmd 并回车,打开命令提示符窗口,依次输入以下三条命令,验证安装是否成功:
1 | node -v |
若分别显示类似以下版本号,说明安装成功:
1 | v18.x.x # Node.js 版本 |
若出现“不是内部或外部命令”的提示,可重新运行安装包再次安装。
连接 GitHub
首先需要注册一个 GitHub 账号(未注册可直接访问 GitHub 官网 注册,填写用户名、邮箱、密码并完成邮箱验证即可)。注册完成后,需配置 Git 与 GitHub 的连接,全程在 Git Bash 中操作,分为4个步骤。
- 配置 Git 用户信息
在任意文件夹右键 → Git Bash Here,输入以下两条命令(替换为自己的 GitHub 用户名和邮箱):
1 | git config --global user.name "GitHub用户名" |
示例:
1 | git config --global user.name "shanchuann" |
输入完成后无需额外确认,直接进行下一步。
- 创建 SSH 密钥
SSH 密钥用于 Git 与 GitHub 之间的身份验证,避免每次操作都输入账号密码。在 Git Bash 中输入以下命令(替换为自己的 GitHub 邮箱):
1 | ssh-keygen -t rsa -C "GitHub邮箱" |
示例:
1 | ssh-keygen -t rsa -C "example@email.com" |
输入命令后,后续出现的所有提示均一路回车,系统会自动在指定目录生成 SSH 密钥文件。
- 添加 SSH 密钥到 GitHub
首先找到生成的密钥文件:进入目录 C:\Users\用户名.ssh(.ssh 是隐藏文件夹,需设置显示隐藏文件),找到 id_rsa.pub 文件,用记事本打开并复制全部内容(不要遗漏字符、不要添加多余空格/换行)。
然后进入 GitHub,按以下步骤操作:
点击右上角头像、Settings;
左侧菜单栏找到 SSH and GPG keys;
点击右上角 New SSH key;
Title 填写任意名称(如“Hexo key”),粘贴刚刚复制的内容;
点击 Add SSH key,完成添加。
测试连接
在 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 成功后,需要创建一个用于部署博客的仓库,仓库名称有固定格式,必须严格填写:
登录 GitHub,点击右上角 New repository;
Repository name 填写 用户名.github.io(替换为自己的 GitHub 用户名),示例:shanchuann.github.io(名称错误会导致博客无法访问,务必核对);
勾选 Initialize this repository with a README(自动创建 README 文件,方便后续管理);
其他设置保持默认,点击 Create repository,完成仓库创建。
仓库创建成功后,自动生成博客地址:https://用户名.github.io(示例:https://shanchuann.github.io),可先记录该地址,后续部署后使用。
本地安装 Hexo
首先创建一个文件夹用于存放博客(名称自定义,建议简洁易记,如 Hexo-Blog),进入该文件夹后,右键 → Git Bash Here,开始安装和初始化 Hexo。
- 安装 Hexo
在 Git Bash 中输入以下命令,全局安装 Hexo 脚手架工具:
1 | npm install -g hexo-cli |
Mac 用户需添加 sudo(输入命令后需输入电脑密码验证):
1 | sudo npm install -g hexo-cli |
安装完成后,Hexo CLI 即可正常使用。
- 初始化博客
在博客目录(Hexo-Blog)的 Git Bash 中,依次输入以下两条命令:
1 | hexo init |
Hexo 会自动下载博客基础文件和依赖,生成完整的博客项目结构。
- 本地预览
输入以下两条命令,启动本地服务器,预览博客效果:
1 | hexo g |
服务器启动成功后,浏览器访问 http://localhost:4000,若能看到 Hexo 默认页面,说明本地博客安装成功。
部署 Hexo 到 GitHub Pages
本地预览无误后,即可将博客部署到 GitHub Pages,让互联网用户访问,步骤如下:
- 安装部署插件
在 Git Bash 中输入以下命令,安装 Hexo 部署插件(用于将本地文件推送到 GitHub 仓库):
1 | npm install hexo-deployer-git --save |
- 修改配置文件
打开博客目录中的 _config.yml 文件(Hexo 全局配置文件,可用记事本或代码编辑器打开),向下滑动找到 deploy 部分,修改为以下格式(替换为自己的 GitHub 用户名):
1 | deploy: |
示例:
1 | deploy: |
注意:配置文件中,冒号后必须有一个空格,否则配置无法生效。修改完成后保存并关闭文件。
- 部署博客
在 Git Bash 中输入以下命令,开始部署:
1 | hexo d |
部署过程可能需要几分钟(取决于网络速度),部署完成后,等待 3-5 分钟让 GitHub 更新页面,然后打开浏览器,输入之前记录的博客地址 https://用户名.github.io,若能看到与本地预览一致的页面,说明部署成功。
绑定自定义域名(可选)
若希望博客拥有个性化域名(而非默认的 用户名.github.io),可进行域名绑定,该步骤为可选操作,不影响博客正常使用。
- 购买域名
在域名服务商处购买域名,推荐服务商:Namesilo、阿里云、腾讯云,购买过程按提示操作即可,域名后缀可选择 .com、.cn 等。
- 设置 DNS 解析
登录域名服务商后台,找到 DNS 解析设置,添加一条 CNAME 记录,记录值填写你的 GitHub Pages 地址(用户名.github.io),例如将 www.example.com 指向 shanchuann.github.io(具体操作可参考服务商帮助文档)。
- 创建 CNAME 文件
进入博客目录的 source 文件夹,创建一个名为 CNAME 的文件(无后缀名),用记事本打开,内容填写你的自定义域名(例如 www.example.com),保存并关闭。
- 重新部署并开启 HTTPS
在 Git Bash 中依次输入以下命令,重新部署博客,使域名设置生效:
1 | hexo clean |
部署完成后,登录 GitHub 博客仓库,点击 Settings → 找到 GitHub Pages → 勾选 Enforce HTTPS,等待几分钟后,HTTPS 即可生效,访问博客会显示安全锁图标。
发布博客文章
博客搭建完成后,可通过以下步骤发布文章:
- 新建文章
在 Git Bash 中输入以下命令,新建一篇文章(替换“文章标题”为自己的标题):
1 | hexo new "文章标题" |
示例:
1 | hexo new "Hexo 搭建教程总结" |
文章文件会自动生成在 source/_posts 文件夹中,格式为 Markdown(例如 Hexo-搭建教程总结.md)。
- 编写文章
用 Markdown 编辑器打开生成的文章文件,按以下结构编写(Front-matter 配置 + 正文):
1 | --- |
说明: 是摘要分隔符,只有摘要会显示在博客首页,点击文章标题可查看完整正文。
- 发布文章
文章编写完成后,在 Git Bash 中输入以下命令,发布到博客:
1 | hexo g |
等待几分钟后,刷新博客页面,即可看到刚刚发布的文章。
博客配置
Hexo 博客的所有配置都集中在 _config.yml 文件中,修改该文件可自定义博客样式和功能,常用配置项如下(注意:冒号后必须有空格):
title:网站名称(如“我的技术博客”);
author:作者名称;
description:网站描述(用于搜索引擎收录);
language:网站语言(设置为 zh-CN 即为中文);
theme:博客主题(后续会讲解更换方法)。
修改完成后,保存文件,输入 hexo g 和 hexo d 重新部署,配置即可生效。
更换主题
Hexo 支持大量免费主题,默认主题较为简洁,可更换为更美观的主题(如 NexT、Butterfly),Butterfly 主题颜值高、功能全,且对新手友好,以下以安装 Butterfly 主题为例,步骤如下:
- 下载主题
在 Git Bash 中输入以下命令,进入博客根目录后,将 Butterfly 主题下载到博客的 themes 文件夹中(推荐稳定版,若国内访问 GitHub 较慢,可使用 Gitee 镜像地址):
1 | # 稳定版(推荐) |
下载完成后,可在博客根目录的 themes 文件夹中看到 butterfly 文件夹,即为主题文件。
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
- 安装主题依赖
Butterfly 主题正常运行需要依赖额外插件,在 Git Bash 中输入以下命令安装依赖,确保主题功能正常:
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
- 修改主题配置
打开博客根目录中的 _config.yml 文件(Hexo 全局配置文件),找到 theme 配置项,将其改为 butterfly,保存并关闭文件:
打开 _config.yml 文件,找到 theme 配置项,将其改为 butterfly:
1 | theme: butterfly |
- 重新部署
输入以下命令,清除本地缓存、重新生成静态文件并部署博客,即可看到 Butterfly 新主题:
1 | hexo clean |
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 的高级功能(如安装评论插件、访问统计插件),让博客更具实用性。希望本文能帮助到想要搭建个人博客的小伙伴,祝大家都能拥有自己的个人博客,记录成长、分享价值。




