1. 为什么选择Hexo + GitHub Pages搭建个人博客
作为一个技术从业者,我经历过WordPress、Typecho等多种博客系统的折腾,最终选择了Hexo + GitHub Pages的组合。这套方案最大的优势在于完全免费、部署简单,而且能够享受到GitHub全球CDN加速带来的稳定访问体验。
Hexo是一个基于Node.js的静态博客生成器,它可以将Markdown格式的文章快速转换为静态HTML页面。相比动态博客系统,Hexo不需要数据库支持,所有内容都以文件形式存储,这使得博客的备份和迁移变得异常简单。我特别喜欢它"一次生成,随处部署"的理念,生成的静态文件可以轻松发布到GitHub Pages、Netlify、Vercel等各种平台。
GitHub Pages是GitHub提供的静态网站托管服务,每个账号都可以获得一个username.github.io的二级域名。它原生支持Jekyll,但通过简单的配置也能完美托管Hexo生成的静态文件。最重要的是,GitHub Pages自带全球CDN,这意味着无论你的读者在哪里,都能获得不错的访问速度。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与Hexo安装
2.1 基础环境配置
在开始之前,我们需要准备好以下环境:
- Node.js环境(建议安装LTS版本)
- Git版本控制工具
- GitHub账号
安装Node.js后,可以通过以下命令检查是否安装成功:
bash复制node -v
npm -v
建议使用nvm(Node Version Manager)来管理Node.js版本,这样可以避免全局安装带来的权限问题。我在Mac上安装nvm的命令如下:
bash复制curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
2.2 Hexo安装与初始化
全局安装Hexo命令行工具:
bash复制npm install -g hexo-cli
创建一个新的博客项目:
bash复制hexo init myblog
cd myblog
npm install
安装完成后,目录结构大致如下:
code复制.
├── _config.yml # 全局配置文件
├── package.json # 项目依赖配置
├── scaffolds # 模板文件夹
├── source # 资源文件夹
│ └── _posts # 文章存放目录
└── themes # 主题目录
启动本地开发服务器:
bash复制hexo server
现在访问http://localhost:4000就能看到默认的Hexo博客界面了。
3. 主题选择与个性化配置
3.1 主题安装与配置
Hexo有丰富的主题生态系统,我选择了流行的NexT主题:
bash复制git clone https://github.com/next-theme/hexo-theme-next themes/next
然后在_config.yml中修改主题配置:
yaml复制theme: next
NexT主题提供了多种样式变体,我选择了Muse风格:
yaml复制# themes/next/_config.yml
scheme: Muse
3.2 个性化设置
修改站点基本信息:
yaml复制# _config.yml
title: 我的技术博客
subtitle: 记录与分享
description: 一个专注于技术分享的个人博客
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai
添加社交链接:
yaml复制social:
GitHub: https://github.com/yourname
Twitter: https://twitter.com/yourname
3.3 实用插件安装
安装一些常用插件增强功能:
bash复制npm install hexo-generator-searchdb --save # 本地搜索
npm install hexo-deployer-git --save # Git部署插件
配置搜索功能:
yaml复制search:
path: search.xml
field: post
content: true
4. 文章写作与管理
4.1 Markdown写作规范
Hexo使用Markdown作为主要写作格式。创建新文章:
bash复制hexo new "我的第一篇文章"
文章头部可以添加Front-matter信息:
markdown复制---
title: 我的第一篇文章
date: 2023-07-20 14:00:00
tags: [Hexo, 教程]
categories: 技术
---
我建议遵循以下Markdown写作规范:
- 标题使用#分级
- 代码块使用```包裹并指定语言
- 图片使用图床引用
- 表格使用标准Markdown语法
4.2 图片管理与图床方案
我推荐使用PicGo+GitHub作为图床方案。安装PicGo后配置GitHub图床:
- 创建一个新的GitHub仓库用于存储图片
- 生成GitHub Personal Access Token
- 在PicGo中配置:
- 仓库名:username/repo
- 分支:main
- Token:你的GitHub Token
- 自定义域名:https://cdn.jsdelivr.net/gh/username/repo
这样上传的图片会自动同步到GitHub仓库,并通过jsDelivr CDN加速。
5. 部署到GitHub Pages
5.1 基础部署配置
首先在GitHub上创建一个名为username.github.io的仓库(username替换为你的GitHub用户名)。
修改_config.yml中的部署配置:
yaml复制deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: main
安装部署插件后执行部署:
bash复制npm install hexo-deployer-git --save
hexo clean && hexo deploy
5.2 自动化部署优化
手动部署每次都需要执行命令,我们可以通过GitHub Actions实现自动化。在项目根目录创建.github/workflows/deploy.yml:
yaml复制name: Hexo Deploy
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install Dependencies
run: |
npm install -g hexo-cli
npm install
- name: Deploy
run: |
git config --global user.name "Your Name"
git config --global user.email "your@email.com"
hexo clean && hexo deploy
这样每次将代码推送到master分支时,GitHub Actions会自动执行部署流程。
6. 常见问题与解决方案
6.1 部署后样式丢失
这个问题通常是因为_config.yml中的root配置不正确。如果你的博客部署在username.github.io,root应该设置为"/";如果是username.github.io/blog,则需要设置为"/blog/"。
6.2 图片无法显示
检查以下几点:
- 图床链接是否正确
- 是否使用了相对路径(建议使用绝对路径)
- GitHub仓库是否设置为公开
6.3 搜索功能不工作
确保:
- 已安装hexo-generator-searchdb插件
- 在主题配置中启用了搜索功能
- 执行了hexo clean && hexo g重新生成
6.4 自定义域名配置
如果你想使用自己的域名:
- 在域名DNS中添加CNAME记录指向username.github.io
- 在GitHub仓库Settings > Pages中配置自定义域名
- 在Hexo的source目录下创建CNAME文件,内容为你的域名
7. 进阶优化建议
7.1 性能优化
- 使用hexo-all-minifier插件压缩HTML、CSS、JS
- 配置图片懒加载
- 使用CDN加速静态资源
7.2 SEO优化
- 安装hexo-generator-sitemap插件生成站点地图
- 合理设置文章的description和keywords
- 配置百度统计和Google Analytics
7.3 备份策略
建议将整个Hexo项目文件夹备份到GitHub私有仓库,包括:
- 源文件(Markdown文章)
- 主题文件
- 配置文件
- package.json记录的所有依赖
我通常会创建一个备份脚本,定期自动提交更改到私有仓库。
8. 我的实战经验分享
在搭建过程中,我总结了几个实用技巧:
-
主题定制:不要直接修改主题文件,而是通过_config.yml中的override选项覆盖样式。这样主题更新时不会丢失自定义修改。
-
文章模板:在scaffolds/post.md中定义默认Front-matter,这样新建文章时会自动包含常用字段。
-
多设备同步:在不同电脑上工作时,可以使用Git同步整个项目文件夹。记得先执行npm install安装依赖。
-
版本控制:使用Git分支管理不同版本的修改,main分支用于部署,dev分支用于开发测试。
-
评论系统:我选择了Valine作为评论系统,它基于LeanCloud,配置简单且免费额度足够个人博客使用。
这套Hexo + GitHub Pages的方案我已经使用了3年多,期间经历了多次主题更换和技术升级,但核心架构始终稳定可靠。对于想要拥有个人博客的技术爱好者来说,这绝对是一个值得尝试的方案。
