零基础打造云端写作系统：GitHub+Hexo自动化博客指南

前言：为什么选择这套方案？

目前主流的博客搭建方案主要有三种：

1. 使用博客平台（如博客园、CSDN）

  • ✅ 优点：操作简单，零成本，只需专注写作
  • ❌ 缺点：个性化程度低，内容难以迁移

2. 自建云服务器博客

  • ✅ 优点：完全掌控，高度定制化
  • ❌ 缺点：成本高，技术门槛高

3. GitHub Pages + Hexo + GitHub Actions（推荐方案）

  • 💡 完美平衡：低成本、易操作、支持深度定制
  • ✨ 额外优势：自动化部署、版本控制、开源生态支持

接下来我将详细介绍这套兼顾效率与自由的博客解决方案。

Windows 环境准备

只需安装以下 3 个必备工具（附官方下载链接）：

  1. Node.js

    📥 官网下载 | 参考安装教程 |（按照自己的机器选择对应的版本下载，推荐 LTS 版本）
    🔍 验证是否安装成功：node -v 和 npm -v
    node验证.jpg

  2. Git
    📥 官网下载 | 参考安装教程 |安装时勾选 “Add to PATH”
    🔍 验证是否安装成功：git --version

  3. VS Code (可选但推荐)
    📥 官网下载
    ✨ 插件建议：

    • Chinese (Simplified) (简体中文) // 将VSCode操作界面由默认的英文改为简体中文
    • Git Graph // 用于可视化 Git 仓库的分支、提交记录和操作历史
    • Hexo Utils // 方便在VSCode中预览文章

Hexo博客双仓库管理方案

很多教程只教你怎么把 Hexo 博客部署到线上，但很少有人提醒你：源码丢了怎么办？

你辛辛苦苦写的文章、调好的主题、折腾的配置，全都存在本地电脑上。

常见方案的坑

  1. 💻源码全在本地： 电脑坏了=博客凉了
  2. ⏳无版本管理：改错配置？只能靠记忆回滚
  3. 🔄环境难迁移：换设备得重新配 Node.js、Hexo、主题依赖…

双仓库方案

  1. 私有仓库存源码（blog-source）
    • 所有文章（source/_posts）、主题、配置（_config.yml）
    • 用 Git 记录每一次修改，随时回退历史版本
    • 隐私保护：敏感配置（API Key、草稿）不放公开仓库
  2. 公开仓库存网页（username.github.io）
    • 只推送 hexo g 生成的静态文件（public 文件夹）
    • 自动部署到线上，不影响源码安全
  • 你只需要专注创作内容，其他所有技术流程都交给自动化系统完成：

博客部署指南

1. Hexo初始化

  • 安装Hexo全局脚手架
1
npm install -g hexo-cli
  • 创建博客项目,并切换到对应目录
1
hexo init blog && cd blog

可以看到，已经有相应的文件生成了

  • 安装依赖
1
npm install		#速度慢可换淘宝源
  • 生成本地网页
1
hexo cl && hexo g && hexo s

网页已在本地生成成功。

若要让其他人也能访问，需要将网页文件部署到GitHub Pages。

以下是详细部署步骤：

2.GitHub仓库准备

  • 一共需要两个仓库，私有仓库存放博客源码，公开仓库存放博客网页文件。
仓库名 存放内容 权限 作用
blog-source 源码/主题/配置 私有 版本控制+环境备份
username.github.io 生成的HTML文件 公开 网页托管

接下来详细演示两个仓库的创建和配置过程。

创建私有仓库
  • 仓库创建成功，暂时没有任何内容，红框中是仓库地址，

为私有仓库添加token

  • 找到github的settings
  • 找到developer settings
  • 创建新的token
  • 选择classic
  • 配置token的信息
  • 点击创建token
  • token生成了，复制token信息

接下来把复制好的token添加到私有仓库(blog-source)中

  • 进入blog-source的settings
  • 找到私有仓库Secrets and variables的Actions
  • 创建新的仓库秘钥
  • 粘贴刚刚复制好的token
  • 点击Add secret
创建公开仓库
  • 公开仓库就创建好了

3.设置自动化部署

  1. 创建GitHub Actions工作流
    在项目根目录创建.github/workflows/deploy.yml文件

    内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    name: Automated Hexo Deployment

    on:
      push:
        branches: [ main ]  # 主分支推送触发

    jobs:
      deploy:
        runs-on: ubuntu-latest
        
        steps:
          - uses: actions/checkout@v2
            with:
              submodules: false

          - name: Setup Node.js
            uses: actions/setup-node@v2
            with:
              node-version: '18'

          - name: Install dependencies
            run: |
              npm install
              npm install hexo-deployer-git --save
              npm install hexo-cli -g

          - name: Build project
            run: |
              hexo clean
              hexo generate

          - name: Configure Git
            run: |
              git config --global user.name 'github-actions[bot]'
              git config --global user.email 'github-actions[bot]@users.noreply.github.com'

          - name: Deploy to GitHub
            env:
              GH_TOKEN: ${{ secrets.GH_TOKEN }}
            run: |
              cd public/
              git init
              git add -A
              git commit -m "Auto-deploy via GitHub Actions"
              git remote add origin https://${{ secrets.GH_TOKEN }}@github.com/<你的GitHub用户名>/<你的GitHub用户名>.github.io.git  
              git push origin HEAD:main -f

  2. **修改_config.yml**文件

1
2
3
4
5
6
7
8
9
10
11
#【注意】
# hzwi是我的用户名,需要替换成你自己的

# 修改URL信息
url: https://hzwi.github.io

#最下面增加信息
deploy:
  type: git
  repo: https://github.com/hzwi/hzwi.github.io.git
  branch: main

4. 推送代码到仓库

  • 本地 Git 仓库的初始化并建立第一个版本
1
2
3
4
git init
git add .
git commit -m "Initial project setup"
git branch -M main
  • 将本地 Git 仓库关联到远程仓库，并首次推送代码
1
2
git remote add origin https://github.com/hzwi/blog-source.git  
git push -u origin main
  • 【注意】如果你的电脑以前没有配置过github的任何信息，直接这样操作可能会碰到报错

5. 问题与解决

  • 生成 SSH 密钥

打开 Git Bash，按下面的格式输入信息

1
ssh-keygen -t ed25519 -C "[email protected]"

碰到提示信息，按Enter键即可

添加 SSH 密钥到 GitHub

  • 复制密钥

生成的秘钥文件默认在 C:\Users\你的用户名\.ssh\id_ed25519.pub，打开并复制内容

  • 在 GitHub 上添加 SSH 密钥

进入 GitHub → Settings → SSH and GPG Keys

  • 点击 New SSH key，粘贴密钥内容
  • 提示输入密码

  • 密钥添加完成

  • 改成ssh的方式，再次尝试推送代码

1
2
git remote set-url origin [email protected]:hzwi/blog-source.git  
git push -u origin main

这次就可以成功了，可以看到私有仓库里有代码了。

私有仓库的Actions里会自动运行，并把网页文件部署到指定的公开仓库

等待一会儿，公开仓库也有网页文件了

新建博客文章

  • 新建一篇名为test的文章
1
hexo new test
  • 利用VSCode和Hexo Utils插件编辑和查看文章内容
  • 这次使用Git Graph提交
  • 访问https://hzwi.github.io/,可以看到博客自动更新了

结语

恭喜！至此你已经拥有：

  • ✅ 完全免费的个人博客
  • 🔄 多端同步的写作环境
  • 🚀 自动化的部署流程
  • 💾 双重保险的数据存储