从零搭建个人博客系统

搭建个人博客有很多选择：WordPress、Hexo、Hugo、Ghost... 但我最终选择了纯静态方案：GitHub Pages + 自定义域名 + GitHub Actions 自动化部署。

这套方案的优势非常明显：

• ✅ 零成本：GitHub Pages 免费托管
• ✅ 零运维：无需管理服务器
• ✅ 自动化：git push 自动部署
• ✅ 高性能：全球 CDN 加速
• ✅ 版本控制：所有内容 git 管理

技术选型

第一步：创建 GitHub 仓库

# 仓库命名规则：
# 用户名.github.io

# 例如我的仓库：
# https://github.com/zzdbilly/loczb

GitHub Pages 有两种部署方式：

• 用户名.github.io：仓库名必须与用户名一致，访问地址为 https://用户名.github.io
• 项目页面：任意仓库名，访问地址为 https://用户名.github.io/仓库名

第二步：购买和配置域名

1. 购买域名

在阿里云/腾讯云购买域名，推荐 .xyz、.top 等便宜后缀（首年约 10 元）。

2. 配置 DNS

在域名控制台添加 DNS 记录：

# 类型：A
# 主机记录：@
# 记录值：185.199.108.153
#        185.199.109.153
#        185.199.110.153
#        185.199.111.153

# 类型：CNAME
# 主机记录：www
# 记录值：用户名.github.io

这四个 IP 是 GitHub Pages 的服务器地址，官方文档会实时更新。

3. GitHub 配置自定义域名

在仓库 Settings → Pages → Custom domain 中填写你的域名，保存后会自动生成 CNAME 文件。

第三步：配置 HTTPS

GitHub Pages 默认提供 HTTPS，在 Settings → Pages 中勾选 Enforce HTTPS 即可。

第四步：配置自动化部署

在 .github/workflows/ 目录下创建 deploy.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

这个配置会在每次 push 到 main 分支时自动部署。

第五步：博客系统架构

我的博客采用纯静态架构：

loczb/
├── index.html              # 首页
├── blog/
│   ├── index.html          # 博客列表页
│   ├── posts/              # 文章目录
│   │   ├── article-1.html
│   │   └── article-2.html
│   └── articles.json       # 文章索引（自动生成）
├── assets/
│   ├── css/style.css       # 样式文件
│   ├── js/main.js          # JavaScript
│   └── images/             # 图片资源
└── scripts/
    └── generate-articles.js # 自动生成索引脚本

自动生成文章索引

每篇文章的 meta 信息（标题、日期、标签等）都写在 HTML 的 <meta> 标签中，用脚本自动扫描生成索引：

// scripts/generate-articles.js
const fs = require('fs');
const path = require('path');

const postsDir = './blog/posts';
const files = fs.readdirSync(postsDir)
  .filter(f => f.endsWith('.html'));

const articles = files.map(file => {
  const content = fs.readFileSync(
    path.join(postsDir, file), 'utf8'
  );
  return {
    title: extractMeta(content, 'title'),
    date: extractMeta(content, 'publish-date'),
    url: `posts/${file}`,
    // ... 其他字段
  };
});

// 按日期排序
articles.sort((a, b) => 
  new Date(b.date) - new Date(a.date)
);

fs.writeFileSync(
  './blog/articles.json',
  JSON.stringify(articles, null, 2)
);

首页用 JavaScript 动态加载最新 3 篇文章，无需手动更新。

第六步：写文章和发布

发布新文章的完整流程：

1. 创建文章文件：blog/posts/my-article.html
2. 运行生成索引脚本：node scripts/generate-articles.js
3. 提交并推送：git add -A && git commit && git push
4. 等待 GitHub Actions 自动部署（约 30 秒）

性能优化

1. 图片优化

• 使用 WebP 格式（比 JPEG 小 30%）
• 添加 loading="lazy" 懒加载
• 使用 CDN 托管大图片

2. CSS/JS 优化

• 生产环境使用压缩版本
• 使用 <link rel="preload"> 预加载关键资源
• 非关键 JS 使用 defer 或 async

3. Lighthouse 优化

• 确保颜色对比度达到 WCAG AA 标准（4.5:1）
• 添加 robots.txt 和 sitemap.xml
• 确保所有表单元素有 id 和 name

踩坑记录

成本分析

总计：仅需域名费用，约 10-80 元/年。

总结

GitHub Pages + 自定义域名 + 自动化部署是一套零成本、零运维、高性能的博客解决方案，非常适合个人开发者和技术博主。

核心优势：

• ✅ 写文章就像写代码，git 管理版本
• ✅ 无需关心服务器、数据库、备份
• ✅ 全球 CDN 加速，访问速度快
• ✅ 自动化部署，专注内容创作