← 所有文章

Rain Lab 搭建日志：从 Astro 初始化到 Cloudflare 部署

用 Astro 6 + Tailwind CSS v4 从零搭建个人网站的真实过程——包括踩坑、debug 和心得。

2026年5月1日 AstroTailwind CSSCloudflare部署

这是搭建 Rain Lab 的全过程记录。不是教程，是一个大一生边学边做的真实日志。

环境搭建

Astro 6 的初始化非常快：

npm create astro@latest mywebsite
npx astro add react mdx
npm install @tailwindcss/vite tailwindcss

Tailwind v4 最大的变化是不需要 tailwind.config.js 了。所有配置通过 CSS 的 @theme 块完成：

@import "tailwindcss";
@theme {
  --color-accent: #c96442;
}

踩坑记录

坑 1：Astro 6 Content Collections API 变了。

V0.4 时用 import { defineCollection } from 'astro:content' 定义集合，配 src/content/config.ts，build 直接报错。查了一下午才发现 Astro 6 必须用 src/content.config.ts 且要加 glob() loader：

import { glob } from 'astro/loaders';
const projects = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/projects' }),
  schema: z.object({ ... }),
});

这个变化在新版文档里写得不够明显，花了不少时间 debug。

坑 2：Glass Strength 导致内容看不清。

V0.6 时做了一个”玻璃强度”系统，用 --glass-opacity 控制卡片透明度。Strong 模式 opacity=0.48，卡片背景太透导致文字几乎看不清。后来把变量重命名为 --glass-bg-alpha，并确认文字颜色走独立变量不受影响。

坑 3：Dark Glass 主题的亮背景冲突。

Warm Aurora 背景包含橙色光晕，搭配 Dark Glass 暗色主题时，亮背景从透明卡片直接透出，整页像被白雾覆盖。解决方案是在 body::after 加了一个 --theme-overlay 遮罩层，Dark Glass 下用 rgba(23, 19, 16, 0.70) 压暗背景。

部署到 Cloudflare Pages

部署过程出乎意料地顺利：

  1. 把项目 push 到 GitHub
  2. 在 Cloudflare Pages 面板连接仓库
  3. Framework preset 选 Astro，Build command npm run build，Output directory dist
  4. 绑定域名 rain-lab.com

第一次部署大概 2 分钟就跑完了。之后每次 push 自动触发重新部署。

心得

做个人网站这件事，技术本身不难，难的是坚持做完。中间好几次想放弃——设计不好看、移动端布局崩了、build 报了一屏幕红。但每次解决一个问题，网站就进步一步。

现在回头看，那些卡住我的问题大部分都不是”技术太难”，而是”文档没看完”或者”概念没理解透”。静下来读文档，一步一步来，问题总能解决。

← 所有文章