如何在30分钟开发一个上线的可自动更新的博客

原创于 2026-05-30 07:38:58 发布 · 336 阅读

本内容遵循CC 4.0 BY-SA版权协议

@TOC如何在30分钟开发一个上线的可自动更新的博客

⏱️ 适用人群：熟悉基础命令行、有GitHub/Vercel账号的开发者
🛠️ 技术栈：Astro（静态框架） + GitHub（代码托管） + Vercel（Serverless部署） + GitHub Actions（自动化同步）
📦 核心思路：不造轮子，用成熟模板+Git驱动部署+定时任务拉取内容，实现“推送即上线、定时自动发博”

在这里插入图片描述

🧩 整体架构

外部内容源(RSS/API/Notion等)
        ↓
GitHub Actions (定时拉取 → 生成Markdown → 提交到main分支)
        ↓
Vercel (监听main分支变化 → 自动构建 → 全球CDN分发)
        ↓
你的博客 (支持SEO、RSS、暗色模式、响应式)

⏱️ 分步实操（严格计时版）

🕒 0~5分钟｜环境准备

确保已安装 Node.js ≥ 18 与 Git
```
node -v && git --version
```
注册/登录 GitHub 与 Vercel（支持GitHub一键授权）

🕒 5~10分钟｜一键生成博客项目

npm create astro@latest my-blog -- --template blog
cd my-blog
git init
git add .
git commit -m "feat: init astro blog"

💡 Astro官方 blog 模板已内置 Markdown渲染、RSS生成、SEO标签、分页、暗色切换，开箱即用。

🕒 10~15分钟｜推送至GitHub并部署

在GitHub创建空仓库 my-blog

绑定并推送：

git remote add origin https://github.com/你的用户名/my-blog.git
git branch -M main
git push -u origin main

登录 Vercel → New Project → Import 该仓库 → 框架自动识别为 Astro → 点击 Deploy
约1分钟后获得 https://my-blog-xxx.vercel.app 域名，博客已上线 ✅

🕒 15~25分钟｜配置自动更新机制

在项目根目录创建 .github/workflows/auto-update.yml：

name: Auto Update Blog
on:
  schedule:
    - cron: '0 */6 * * *'  # 每6小时(UTC)执行
  workflow_dispatch:       # 支持手动触发
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with: { node-version: 20 }
      - name: Install deps & fetch posts
        run: |
          npm install rss-parser
          node fetch-rss.js
      - name: Commit & push new content
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git add src/content/posts/
          git commit -m "auto: sync new posts" || echo "No changes to commit"
          git push

同级目录创建 fetch-rss.js（示例从RSS抓取并生成Astro兼容的Markdown）：

const Parser = require('rss-parser');
const fs = require('fs');
const path = require('path');
const parser = new Parser();

(async () => {
  // 替换为你想同步的RSS源（如技术博客、播客、新闻）
  const feed = await parser.parseURL('https://feeds.bbci.co.uk/news/technology/rss.xml');
  feed.items.slice(0, 3).forEach(item => {
    const slug = item.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
    const filePath = `src/content/posts/${slug}.md`;
    if (!fs.existsSync(filePath)) {
      const date = new Date(item.pubDate).toISOString().split('T')[0];
      fs.writeFileSync(filePath, `---\ntitle: "${item.title.replace(/"/g, '\\"')}"\ndate: "${date}"\ndescription: "${item.contentSnippet?.slice(0, 120) || ''}"\n---\n${item.contentSnippet}`);
      console.log(`✅ Created: ${slug}.md`);
    }
  });
})();

提交并推送：

git add .
git commit -m "ci: add auto-update workflow"
git push

🕒 25~30分钟｜验证自动更新

进入GitHub仓库 → Actions → 手动点击 Run workflow
观察：Actions运行成功 → 自动提交新Markdown → Vercel检测到main分支更新 → 自动重建（约1~2分钟）
刷新博客链接，新文章已出现，RSS /rss.xml 同步更新 🎉

⚠️ 关键注意事项

问题	解决方案
GitHub Actions免费额度	每月2000分钟，个人博客完全够用
内容源不稳定导致构建失败	在 `fetch-rss.js` 加 `try/catch` 并输出错误日志
频繁提交触发Vercel构建	Actions中加 `git diff --quiet
需要绑定自定义域名	Vercel项目设置 → Domains → 添加你的域名并按提示配置DNS