Jun 17, 2026

AstroCloudflareGitHub个人网站博客搭建

个人博客从零到上线全记录：Astro + GitHub + Cloudflare + 自定义域名

写在前面

为什么会想不开要从零搭一个个人博客？

事情要从三个月前说起。当时我在本地写了一堆量化策略的回测笔记、DuckDB数据管线的踩坑记录、Barra因子模型的理论推导……零零散散散落在十几个Markdown文件和Jupyter Notebook里。想回顾某个策略的时候，得翻半天文件夹；想分享给朋友看，得打包发邮件或者复制到飞书文档——体验极其糟糕。

后来发现，做量化交易的人，输出质量直接决定了输入深度。写博客不是为了当网红，而是为了逼自己把半成品想法整理成可复现、可讨论的完整方案。一篇博客写下来，你会发现那些你以为「想明白了」的东西，其实漏洞百出。

于是决定建一个个人博客——AgentQuant（agents-quant.com），定位是量化交易技术博客，专注A股市场的数据工程、策略回测、因子研究。

这个博客从零到上线花了大概一个周末的时间。这篇文章就是完整的手把手记录，你可以把它当成一份可以直接跟着做的教程，域名、服务商换一换就行。

技术选型

为什么选 Astro 而不是 Hugo / Next.js？

静态博客生成器选择不少，我最终选了 Astro，理由有三：

1. 组件化 + Markdown 的完美融合

Hugo 的模板系统很强大，但写起来像在调教一个上古神器——语法是 Go Template，自定义逻辑得写短代码，折腾主题的时间比写文章还多。Next.js 当然更好，但为了一个纯内容型博客上 React 全家桶（SSG + ISR + 一堆 JS bundle），性价比太低。

Astro 的理念非常贴合个人博客的场景：默认零 JS，但你可以随时引入任意框架的组件（React / Vue / Svelte / SolidJS）。写博客时用 Markdown + 前端matter，需要交互的地方（评论区、搜索框）用框架组件，其他时候生成的 HTML 干净得像手写的。用他们官网的话说——“Astro is the web framework for content-driven websites”。

2. 原生 Content Collections

从 Astro 2.0 开始引入的 Content Collections 是我最爱的功能。你不需要手动配置路由、不需要写 GraphQL 查询、不需要搞什么 MDX 解析器。在 src/content/blog/ 下面丢一个 .md 文件，frontmatter 写对，Astro 自动帮你生成类型安全的查询接口：

---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---

就这四行，所有文章数据就在模板里了。对于纯内容型博客，这种「你负责写，我负责渲染」的体验太舒服了。

3. 构建速度快到离谱

Astro 的设计哲学是「尽可能少地在构建时执行 JS」。结果是——内容站点的构建时间基本跟你文章数量线性相关，几百篇文章的博客构建时间也就十几秒。Cloudflare Pages 免费额度完全够用。

Hugo 当然更快（Go 写的，快到反人类），但我觉得为了那几秒钟的构建时间差异去学 Go Template 不值得。

为什么选 Cloudflare 而不是国内服务器？

国内建站路线有很多选择：阿里云 ECS、腾讯云轻量服务器、又拍云、七牛云……但我的需求很明确：

零成本维护：不想半夜爬起来修服务器
全球 CDN：量化圈子不分国内外，GitHub 上的海外读者也得能流畅访问
HTTPS 自动配置：不需要自己搞证书续期
自定义域名：已经买了域名，必须能用
Git 驱动部署：写好文章 push 到 GitHub 就自动上线

Cloudflare Pages 完美覆盖以上所有需求，而且免费套餐极其慷慨——无限带宽、无限请求、支持自定义域名 + 自动 SSL。唯一的缺点是国内访问偶尔不稳（毕竟是海外 CDN），但对于技术博客来说完全可接受。

如果你主要面向国内读者，可以考虑「Cloudflare 回源」+「国内 CDN 加速」的混合方案，或者直接用 Vercel Edge Network 搭配中国区合作伙伴。不过那篇文章改天再写。

环境准备

在动手之前，确保你的机器上装好了以下三样东西：

Node.js

Astro 需要 Node.js >= 18.x。我用的是 18.17.1，现在的 LTS 版本是 20.x，都可以。

# 检查版本
node --version

# 如果还没装，用 nvm 安装（推荐）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

Git

git --version
# git version 2.41.0

# 配置基本信息
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

GitHub 账号

去 github.com 注册一个账号。后面所有代码推送和自动部署都依赖它，跑不掉的。

Astro 博客初始化

环境准备好后，来创建 Astro 项目。我直接用官方模板 — Astro 提供了一个叫 blog 的官方模板，包含完整的博客结构（文章列表、标签、RSS、分页）。

# 创建一个新项目
npm create astro@latest quant-blog -- --template blog

命令运行后会交互式问你几个问题：

○ where should we create your new project?  → quant-blog
○ how would you like to setup your project? → Recommended (TypeScript, Strict)
○ would you like to install dependencies?    → Yes
○ would you like to initialize a Git repo?   → Yes
○ would you like to run `npm run dev`?       → No（稍后再试）

几秒钟后，一个完整的 Astro 博客就躺在 quant-blog 目录下了。

cd quant-blog
npm run dev

打开 http://localhost:4321，你应该能看到一个白色的默认博客页面，带一篇示例文章。看到它就说明 Astro 跑起来了。

项目结构一览

quant-blog/
├── public/               # 静态资源（favicon、图片等）
├── src/
│   ├── assets/           # 字体、样式等资源
│   ├── components/       # Astro/React/Vue 组件
│   ├── content/
│   │   └── blog/         # 博客文章（Markdown）
│   ├── layouts/          # 页面布局
│   ├── pages/            # 页面路由
│   ├── styles/           # 全局样式
│   ├── consts.ts         # 站点常量（标题、描述、导航）
│   └── content.config.ts # 内容集合配置
├── astro.config.mjs      # Astro 配置
├── package.json
└── tsconfig.json

关键文件解释：

src/consts.ts — 站点的全局常量：标题、描述、社交链接、导航菜单项目都在这
src/content.config.ts — Content Collections 的类型定义和 schema 校验（文章的 frontmatter 字段在这里定义）
src/pages/index.astro — 首页
src/pages/about.astro — 关于页面
src/pages/blog/ — 博客列表页 + 文章详情页
astro.config.mjs — Astro 构建配置，包括集成（sitemap、tailwind 等）

主题定制

默认模板长这样：白色背景，黑色文字，左上角是博客标题，右上角是导航链接。功能完整，但没有任何「团队感」。我们来改一改。

修改站点标题和描述

打开 src/consts.ts：

export const SITE_TITLE = 'AgentQuant';
export const SITE_DESCRIPTION = '量化交易技术博客 — 数据工程、策略回测、因子研究';

修改首页 Hero 区

src/pages/index.astro 是首页的布局文件。默认的 Hero 区只是简单显示标题和描述，我把它改成了更有针对性的文案：

<!-- src/pages/index.astro -->
<section class="hero">
  <h1>AgentQuant</h1>
  <p>A股量化交易的个人技术博客</p>
  <p class="tagline">
    用数据说话，用代码验证，用策略赚钱
  </p>
</section>

调整导航菜单

同样的 src/consts.ts 里还有导航菜单的定义：

export const NAVIGATION = [
  { title: '首页', path: '/' },
  { title: '博客', path: '/blog/' },
  { title: '策略库', path: '/strategies/' },
  { title: '关于', path: '/about/' },
];

默认只有 首页 和 博客，我加了 策略库 和 关于 两个导航项。

修改关于页面

src/pages/about.astro 默认是一段通用文案。我改成了个人简介：

---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---
<!doctype html>
<html lang="zh-CN">
  <head>
    <BaseHead title="关于 | AgentQuant" />
  </head>
  <body>
    <Header />
    <main>
      <h1>关于 AgentQuant</h1>
      <p>AgentQuant 是一个专注于 A股量化交易的个人技术博客。</p>
      <p>主要关注方向：</p>
      <ul>
        <li>A股市场数据工程（DuckDB、pytdx、数据管线）</li>
        <li>量化策略回测与优化（布林带、动量、因子模型）</li>
        <li>AI Agent 在量化交易中的应用</li>
      </ul>
      <p>博客代码完全开源，欢迎 Star 和 PR。</p>
    </main>
    <Footer />
  </body>
</html>

新增策略库页面

在 src/pages/ 下新建 strategies/index.astro，作为策略库入口。暂时放一个简单的卡片布局，等有策略文章后自动渲染摘要。

---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
---
<!doctype html>
<html lang="zh-CN">
  <head>
    <BaseHead title="策略库 | AgentQuant" />
  </head>
  <body>
    <Header />
    <main>
      <h1>量化策略库</h1>
      <p>这里收录了我们在 AgentQuant 上研究和回测过的所有量化策略。</p>
      <p>每个策略都有完整的代码实现、回测数据和绩效分析。</p>
      <p>策略持续更新中…</p>
    </main>
    <Footer />
  </body>
</html>

至此博客的本体就搭建好了。现在是时候写第一篇文章了。

第一篇文章

每个博客都需要一篇开篇文章。我选择了之前花了很多心思的课题——用 DuckDB 在笔记本上搭建 A 股量化数据库。

文章路径：src/content/blog/duckdb-a-share-quant-database.md

这篇文章涵盖了：

为什么需要本地数据库（Wind/聚宽太贵，akshare/tushare有调用限制）
三层技术架构：pytdx 采集 → CSV 增量存储 → DuckDB 分析层
数据采集代码（pytdx 连接、批量下载、增量更新）
前复权处理（pytdx 的除权信息接口）
DuckDB 建库和查询性能实测（294MB 管理 4589 只股票 + 988 只可转债）

写第一篇文章的要点是：选你最有话说的话题。因为开篇文章的质量会决定读者对这个博客的第一印象，也决定了你自己继续写下去的动力。选一个你愿意反复打磨的话题。

文章写完后的效果：在 npm run dev 下访问 http://localhost:4321/blog/duckdb-a-share-quant-database/，能看到排版完整的博文。

GitHub 推送

文章写好了，本地跑着没问题，现在该把它推到 GitHub 上去了。

创建 GitHub 仓库

用 gh CLI 在终端操作：

# 认证（如果还没认证过）
gh auth login
# 选择 GitHub.com → HTTPS → 用浏览器登录

# 在 GitHub 上创建仓库并推送本地代码
gh repo create agents-quant --public --push --source .

这条命令干了三件事：

在 GitHub 上创建一个名叫 agents-quant 的公开仓库
把本地仓库的代码 git push 上去
设置 origin 远程仓库地址

如果你没有 gh CLI，也可以在 GitHub 网页端创建仓库，然后手动推送：

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

现在你的博客代码已经安全地躺在 GitHub 上了。

Cloudflare 部署

这是整个流程里最爽的一步——Git push 自动触发部署，全世界就能看到你的博客。

前提：你需要有一个 Cloudflare 账号。如果没有，去 dash.cloudflare.com 注册一个，免费。

步骤

登录 Cloudflare Dashboard
左侧菜单 → Workers & Pages → Pages
点击 “Connect to Git”
授权 Cloudflare 访问你的 GitHub 账号
选择刚才创建的 agents-quant 仓库
配置构建参数：

Framework preset: Astro
Build command:     npm run build
Build output:      dist
Root directory:    (留空)

点击 “Save and Deploy”

等一两分钟，Cloudflare 会自动：

clone 你的仓库
执行 npm install
执行 npm run build
把 dist/ 目录部署到 Cloudflare 全球 CDN

部署完成后，Cloudflare 会给你一个默认域名——xxxx.pages.dev。点进去就能看到你的博客已经在全球上线了。

自动部署触发

从这一刻起，你每次 git push 到 main 分支，Cloudflare Pages 都会自动重新构建并部署。整个流程大概 30-60 秒，不需要任何人工操作。

Giscus 评论系统

个人博客如果没有评论区，阅读体验会少一大截——读者看到有疑问的地方、有补充的地方、或者发现代码有 bug，想留言都没地方发。社交媒体的互动虽然更方便，但那些讨论沉淀在平台的 feed 里，三个月后就被算法冲走了。

Giscus 是一个基于 GitHub Discussions 的评论系统。用户评论时用 GitHub 登录，评论内容直接 write 到你的 GitHub 仓库的 Discussions 中。好处是：

零成本：评论区借用 GitHub Discussions，不需要额外服务器
无广告：不像 Disqus 那样强插广告
Markdown 支持：可以发代码块、数学公式
GitHub 账号即可登录：对开发者博客极度友好

开启 GitHub Discussions

进入你的 GitHub 仓库 → Settings → General
往下滚到 Features 区域
勾选 Discussions
可选：设置一个欢迎贴作为分类说明

安装 Giscus GitHub App

访问 github.com/apps/giscus
点击 Install
选择你的仓库 你的用户名/agents-quant
授权

获取配置参数

访问 giscus.app：

Repository: 输入 你的用户名/agents-quant
Repository ID: 点击自动检测
Category: 选 “General” 或者新建一个叫 “Blog Comments” 的分类
Category ID: 自动生成
Theme: 我选了 preferred_color_scheme —— 跟随系统主题
页面底部会生成一段 <script> 嵌入代码

嵌入到博客文章

把 Giscus 脚本嵌入到博客文章详情页的布局中。我的项目里是 src/layouts/BlogPost.astro，在文章内容后面加上评论组件：

<section class="comments">
  <script
    src="https://giscus.app/client.js"
    data-repo="你的用户名/agents-quant"
    data-repo-id="xxxxxx"
    data-category="Blog Comments"
    data-category-id="xxxxxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme"
    data-lang="zh-CN"
    crossorigin="anonymous"
    async>
  </script>
</section>

刷新任意文章页面，滑到底部就能看到 Giscus 的评论区了。首次加载会有一个 GitHub OAuth 登录弹窗，登录后才能评论。

⚠️ 注意：Giscus 首次部署后，因为页面 URL 还没被 GitHub Discussions 索引，评论框可能显示 “Discussion not found”。第一次需要你自己在页面上发一条评论让它创建讨论，之后其他用户就能正常评论了。

自定义域名

现在博客的地址是 agents-quant.pages.dev，很丑。我们要把它绑到自己的域名上。

我在阿里云（万网）买了 agents-quant.com，一年大概 50 块钱。你也可以买 .cn、.dev、.io 等后缀。流程都是一样的。

域名购买（阿里云）

登录阿里云 → 域名注册
搜索 agents-quant.com
加入清单 → 结算（看个人需求选服务器，不需要额外服务）
实名认证（现在国内域名都要实名，上传身份证照片，大概 1-3 天通过）

这一步不需要买云服务器——Cloudflare Pages 本身就是静态托管，不需要 ECS。

Cloudflare 配置 DNS

在 Cloudflare Dashboard 中，左侧菜单 → Websites → Add a Site
输入你的域名 agents-quant.com
选择免费计划
Cloudflare 会扫描现有 DNS 记录，然后要求你修改域名的 DNS 服务器

这一步看到 Cloudflare 给的 Nameserver 地址，记下来——一般是类似这样的：

arch.ns.cloudflare.com
dahlia.ns.cloudflare.com

修改阿里云 DNS 服务器

回到阿里云控制台 → 域名列表
找到 agents-quant.com → 管理 → DNS 修改
把 DNS 服务器改成 Cloudflare 提供的两个地址
等待 DNS 生效（最长 48 小时，通常几分钟到几小时）

配置 Cloudflare Pages 自定义域名

回到 Cloudflare Pages：

进入你的 Pages 项目 agents-quant
点击 “Custom domains” → “Set up a custom domain”
输入 agents-quant.com
Cloudflare 会自动添加 DNS 记录（一条 CNAME 或 AAAA 记录指到 Pages 服务器）
自动颁发 SSL 证书（Let’s Encrypt，自动续期）

完成后，访问 https://agents-quant.com 就能看到你的博客了。Chrome 地址栏还会显示一把绿色的小锁——HTTPS 全自动搞定，不需要自己处理证书。

域名重定向（可选）

如果你想让 www.agents-quant.com 也指向主域名，在 Cloudflare Dashboard 的 Webites → 你的域名 → Rules → 创建一个 Page Rule：

URL: *.agents-quant.com/*
Setting: Forwarding URL (301) → https://agents-quant.com/$1

这样无论用户输入哪种形式，都统一跳转到标准域名。

总结

成本清单

项目	费用	备注
域名 agents-quant.com	~50 元/年	阿里云购买，不同后缀价格不同
静态托管（Cloudflare Pages）	免费	无限带宽、自定义域名、SSL
Astro 博客框架	免费	MIT 开源
GitHub	免费	公共仓库
Giscus 评论系统	免费	基于 GitHub Discussions
SSL 证书	免费	Cloudflare 自动颁发
开发环境	你自己已有的电脑	-

合计：每年 50 元的域名费，其他零成本。

后续维护

博客上線后，日常维护就是「写文章 → git push → 自动部署」的循环：

# 工作流
cd ~/quant-blog
npm run dev            # 本地预览
# 在 src/content/blog/ 下写文章
git add .
git commit -m "新文章：xxx"
git push               # Cloudflare 自动部署

全部流程：写文章 30-120 分钟，推送部署 30 秒，上线 1 分钟。

你可以继续优化的方向

这个博客目前是最小可行版本（MVP），还有很多可以扩展的地方：

PWA 支持：添加 Service Worker，实现离线阅读
全文搜索：用 Pagefind 或 Lunr.js 做本地搜索
访问统计：Cloudflare Web Analytics（免费、无需 Cookie）
数学公式：安装 astro-katex 插件支持 LaTeX 公式渲染
代码高亮：Astro 默认集成 Shiki，支持 VS Code 主题
中文字体优化：接入 Noto Sans SC 或 LXGW WenKai，提升阅读体验
SEO 优化：生成 Open Graph 图片、结构化数据、sitemap

以上这些优化，我会在后续文章中逐一覆盖。欢迎保持关注（或者直接 Star GitHub 仓库）。

为什么这件事值得做

写个人博客这件事，说来也奇怪——在这个人人都在做短视频、写小红书、发 Twitter/X/Threads 的时代，建一个博客好像很「老派」。但量化交易这个领域不一样。

策略回测需要展示完整的数据逻辑，公式推导需要 LaTeX，代码片段需要语法高亮，回测结果需要表格和图表。这些在社交平台上都是被阉割的体验。只有你自己的博客——你自己的域名、你自己的 Markdown、你自己的折腾——才能真正把想说的东西说清楚。

而且，等到你写了十几二十篇文章之后，你会突然发现：你不仅有了一个博客，你还有了一套完整的量化知识体系。每一篇文章都是你亲手搭建的知识地基。这是刷再多短视频都刷不出来的东西。

风险提示：本文所有内容均为技术分享，不构成投资建议。文中提到的策略仅供学习参考。

📚 相关文章推荐

Hermes Agent 优化迭代实录：一个AI Agent的持续进化之路 — Agent实战系列，从博客搭建到Agent优化的完整路径
用AI Agent做量化投资：Hermes Agent 20+自动化任务的架构与实践 — 了解Agent如何驱动量化自动化，博客内容的生产引擎