用 Astro 搭建这个网站：成本、结构与工作流

这个网站从想法到上线，总花费 0 元。这篇文章记录完整的技术方案，供想低成本建站的朋友参考。

技术选型

环节	选择	成本
框架	Astro 5	免费
内容	Markdown + Content Collections	免费
图片	SVG / 静态图片 + CSS 优化	免费
托管	Cloudflare Pages	免费
域名	暂用 riolife.pages.dev	免费

Astro 的核心理念是 「默认静态」：所有页面构建时生成 HTML，没有 JS 运行时开销，加载快、SEO 好，还天然适合免费 CDN 托管。

目录结构

src/
  pages/            # 路由页面（首页 / 博客 / 应用 / 照片）
  layouts/          # 全局布局（Header + Footer + SEO）
  components/       # 卡片等复用组件
  content/
    blog/           # 博客文章（Markdown）
  data/             # 应用列表等结构化数据
public/             # 图标、manifest、静态资源

内容管理体验

文章就是 Markdown 文件，配合 frontmatter 写标题、日期、标签：

---
title: 文章标题
date: 2026-08-02
description: 摘要
tags: [标签]
---
正文内容…

新增文章 = 新建一个 .md 文件。配合 GitHub 仓库，手机上也能写文章提交。

部署流程

1. 代码推送到 GitHub
2. Cloudflare Pages 关联仓库，构建命令 npm run build
3. 构建产物目录 dist，自动部署全球 CDN
4. 以后每次推送，自动更新上线

后续计划

• 绑定自定义域名
• 添加搜索与 RSS
• 照片页接入真实摄影作品

建站的意义不在于「拥有一个网站」，而在于开始输出。希望这篇记录对你有帮助。