从零开始搭建个人博客：基于Hexo + GitHub Pages的完整指南

在互联网时代，拥有一个属于自己的个人博客不仅是技术能力的体现，更是分享知识、记录成长的重要平台。相比使用第三方博客服务，自建博客不仅能完全掌控内容与样式，还能深入理解Web开发的核心原理。本文将带领大家从零开始，使用Hexo静态网站生成器与GitHub Pages免费托管服务，搭建一个功能完整、美观易用的个人博客。

一、为什么选择Hexo + GitHub Pages？

1.1 优势对比

• Hexo：基于Node.js的静态博客框架，支持Markdown语法、主题定制、插件扩展，生成速度快，适合技术类博客。
• GitHub Pages：GitHub提供的免费静态网站托管服务，支持自定义域名、HTTPS，与Git版本控制无缝集成。

对比其他方案：

1.2 适用场景

• 技术分享、学习笔记
• 个人作品展示
• 轻量级企业官网

二、环境准备

2.1 安装Node.js

Hexo基于Node.js，需先安装：

bash

# 下载Node.js LTS版本（推荐）
# 官网：https://nodejs.org/
# 验证安装
node -v
npm -v

2.2 安装Git

用于版本控制与部署到GitHub：

bash

# 下载Git
# 官网：https://git-scm.com/
# 验证安装
git --version

2.3 注册GitHub账号

• 访问GitHub官网注册账号
• 创建新仓库，命名为username.github.io（username需替换为你的GitHub用户名）

三、Hexo博客搭建

3.1 初始化项目

bash

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

# 创建博客目录并初始化
hexo init my-blog
cd my-blog
npm install

3.2 生成静态文件并本地预览

bash

hexo generate  # 生成静态文件
hexo server    # 启动本地服务器（默认地址：http://localhost:4000）

3.3 配置博客信息

编辑_config.yml文件，修改以下关键配置：

yaml

# 网站信息
title: 我的个人博客
subtitle: 记录技术成长之路
description: 前端开发、后端实践、工具教程
keywords: 博客,技术,前端
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai

# URL配置（部署到GitHub Pages时需修改）
url: https://username.github.io  # 替换为你的GitHub Pages地址
root: /

# 部署配置（后文详细说明）
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: main

四、主题选择与定制

4.1 安装主题

以流行的Next主题为例：

bash

cd my-blog
git clone https://github.com/next-theme/hexo-theme-next themes/next

4.2 启用主题

修改_config.yml：

yaml

theme: next

4.3 主题配置

编辑themes/next/_config.yml，自定义：

• 菜单项（导航栏）
• 社交链接（GitHub、微博等）
• 评论系统（如Disqus、Gitalk）
• 代码高亮样式

示例：添加GitHub链接

yaml

social:
  GitHub: https://github.com/username || github
  Email: mailto:your@email.com || envelope

五、部署到GitHub Pages

5.1 安装部署插件

bash

npm install hexo-deployer-git --save

5.2 配置SSH密钥（可选但推荐）

bash

# 生成SSH密钥
ssh-keygen -t ed25519 -C "your_email@example.com"

# 将公钥添加到GitHub
# 1. 复制公钥内容：cat ~/.ssh/id_ed25519.pub
# 2. 进入GitHub设置 → SSH and GPG keys → New SSH key

5.3 部署博客

bash

hexo clean      # 清理缓存
hexo generate   # 生成静态文件
hexo deploy     # 部署到GitHub

部署成功后，访问https://username.github.io即可看到博客。

六、进阶功能

6.1 自定义域名

1. 购买域名（如阿里云、腾讯云）
2. 在GitHub仓库的Settings → Pages中设置域名
3. 在域名服务商处添加CNAME记录指向username.github.io

6.2 添加评论系统（以Gitalk为例）

1. 注册GitHub OAuth App获取Client ID和Client Secret
2. 安装Gitalk插件：

bash

npm install hexo-gitalk --save

1. 配置_config.yml：

yaml

gitalk:
  clientID: '你的Client ID'
  clientSecret: '你的Client Secret'
  repo: username.github.io  # 仓库名
  owner: username          # GitHub用户名
  admin: username          # 管理员列表

6.3 添加SEO优化

yaml

# _config.yml中配置
# SEO设置
seo:
  title: 我的博客
  description: 技术分享平台
  keywords: 博客,技术,前端
# 安装hexo-generator-seo插件
npm install hexo-generator-seo --save

七、常见问题解决

7.1 部署失败：Permission denied (publickey)

• 确保已配置SSH密钥
• 检查GitHub仓库地址是否正确（HTTPS或SSH）

7.2 主题样式不生效

• 清除缓存：hexo clean
• 检查主题配置文件路径是否正确

7.3 自定义域名无法访问

• 检查DNS记录是否生效（通常需要24小时）
• 确保GitHub Pages设置中已启用自定义域名

八、总结

通过本文的步骤，你已成功搭建了一个基于Hexo + GitHub Pages的个人博客。接下来可以：

1. 持续撰写高质量技术文章
2. 探索更多Hexo插件（如搜索、阅读统计）
3. 参与开源社区，贡献主题或插件

附：完整流程图

mermaid

graph TD
    A[安装Node.js和Git] --> B[初始化Hexo项目]
    B --> C[选择并配置主题]
    C --> D[本地预览]
    D --> E{满意?}
    E -- 是 --> F[部署到GitHub Pages]
    E -- 否 --> C
    F --> G[配置自定义域名]
    G --> H[添加评论/SEO等插件]

资源推荐：

• Hexo官方文档
• Next主题配置指南
• GitHub Pages帮助

希望本文能帮助你开启博客之旅，欢迎在评论区分享你的博客链接或遇到的问题！