花开雨落

从买域名到上线：这个小站是怎么搭起来的

4 分钟 · 约 1342 字建站AstroCloudflare

完整记录搭建过程：为什么选静态站、Astro 7 的项目结构长什么样、域名在腾讯云时怎么接到 Cloudflare Pages，以及备案这件事到底要不要做。

文章目录

这个站是纯静态的：文章用 Markdown 写，构建时生成 HTML，托管在 Cloudflare Pages 上。 一年的固定支出只有一个域名的钱，没有服务器要续费，也没有数据库要备份。

这篇文章把过程完整记一遍——写给以后的自己，也写给想搭站的朋友。

一、先想清楚：静态站还是动态站

个人网站 90% 的需求是「把写好的东西给别人看」。这类需求用静态站最划算：

静态站（本站方案） 动态站（WordPress / 带后台）
服务器 不需要，托管在 CDN 上 需要，还要管系统补丁
年成本 约等于域名钱 域名 + 服务器，通常 100 元起
打开速度 快（HTML 直接从边缘节点返回） 取决于服务器与缓存配置
被攻击面 几乎没有（没有可执行的服务端代码） 登录页、插件、数据库都是入口
在线写文章 本地写 Markdown 后提交 浏览器里直接写
备份 Git 仓库 + 本地文件 数据库 + 上传目录，缺一不可

代价是：写文章需要一台电脑，以及评论、访问统计这类功能要另想办法（见文末）。 对我来说这个交换很划算——我本来就用编辑器写东西。

二、项目结构

personal-site/
├─ astro.config.mjs        # 站点地址、集成、Markdown 高亮配置
├─ src/
│  ├─ consts.ts            # 全站配置：站名、简介、导航、社交链接
│  ├─ content.config.ts    # 文章字段校验（缺字段会直接构建失败）
│  ├─ content/
│  │  ├─ blog/             # 文章：一个 .md 一篇文章
│  │  └─ pages/about.md    # 独立页面内容
│  ├─ data/projects.ts     # 「项目」页的数据
│  ├─ layouts/BaseLayout.astro
│  ├─ components/          # 页头、页脚、目录、文章条目…
│  ├─ pages/               # 路由：文件路径就是网址
│  └─ styles/global.css    # 全站样式（含深浅色两套配色）
├─ public/                 # 原样拷贝到根目录的静态文件
└─ scripts/                # 本地校验脚本

关键约定只有一条：src/pages/ 下的文件路径就是网址。 src/pages/about.astro → /about/，src/pages/blog/[...id].astro → /blog/文章文件名/。

三、写一篇文章要做的三步

  1. 在 src/content/blog/ 新建 我的标题.md；
  2. 开头写上 frontmatter：
---
title: 文章标题
description: 一句话摘要，会显示在列表和搜索结果里
date: 2026-01-05
tags: [随笔, 工具]
---

正文从这里开始……
  1. 运行 npm run dev 本地预览，确认没问题后提交推送，线上自动更新。

frontmatter 缺字段不是「少显示一块」，而是构建直接报错——这是故意的： 宁可构建失败，也不要静默上线一篇缺摘要的文章。

四、部署：Cloudflare Pages

免费额度对个人站完全够用（具体额度以 Cloudflare 官网为准），带宽不限量，自带 HTTPS。

  1. 把项目推到 GitHub 仓库；
  2. Cloudflare 控制台 → Workers & Pages → 创建 Pages 项目 → 连接这个仓库；
  3. 构建配置填：
    • 构建命令：npm run build
    • 输出目录：dist
    • Node 版本：环境变量 NODE_VERSION = 22（或更高，Astro 7 要求 ≥ 22.12）
  4. 保存后第一次构建约 1 分钟，成功后拿到一个 xxx.pages.dev 的临时域名。

之后每次 git push，Cloudflare 会自动重新构建并发布；失败也不会影响线上版本。

五、域名在腾讯云，怎么接过来

有两条路，我建议第一条：

方案 A：把 DNS 交给 Cloudflare（推荐）

在 Cloudflare 添加站点 → 它会给你两个 NS 地址 → 回到腾讯云的域名控制台， 把「DNS 服务器」改成这两个地址 → 等生效（通常几分钟到几小时）。 之后在 Pages 项目里绑定自定义域名，huakaiyuluo.com 和 www.huakaiyuluo.com 都能一键绑上， 证书自动签发、自动续期。

方案 B：保留腾讯云 DNS

在 DNSPod 里加一条记录：

主机记录 类型 记录值
www CNAME 你的项目名.pages.dev

裸域（不带 www）不能直接做 CNAME，需要用 DNSPod 的「显性 URL 转发」跳到 https://www.huakaiyuluo.com。 能用，但少了 Cloudflare 的 CDN 与分析，也少了一层灵活性。

六、要不要备案

结论：解析到境外主机就不需要备案，网站可以直接上线。

只有当你以后想换成国内服务器 / 国内 CDN 时，才需要 ICP 备案（域名在腾讯云的话， 备案还需要腾讯云名下有可用的云资源）。备案周期通常一到两周。

需要提前知道的两件事：

  • Cloudflare 的 *.pages.dev 临时域名在大陆访问经常不稳定，绑定自己的域名后走的是不同线路，通常可用，但速度中等；
  • 具体到你所在的城市和运营商，速度差异很大，建议上线后自己实测再决定是否需要换方案。

七、这个站的取舍

  • 零外部请求：不加载外部字体、不加统计脚本、不用外部图床，首屏只有 HTML + 一个 CSS 文件；
  • 深浅色主题：跟随系统，也可以手动切换，选择记在浏览器本地；
  • 正文优先：没有侧边栏广告、没有弹窗、没有「阅读更多」分页；
  • 可迁移：构建产物是纯 dist/ 目录，换托管商只是把这个目录传过去而已。

下一篇我会写这个站支持哪些 Markdown 语法，可以直接当写作模板用。