不懂代码，也能看懂的个人网站搭建指南

很多人想做一个个人网站，可能是为了：

• 写博客
• 整理学习笔记
• 展示作品或项目
• 放一份个人简历
• 记录电影和生活
• 建立一个属于自己的长期空间

但刚开始搜索资料时，很容易看到一堆看不懂的词：Astro、Next.js、Nuxt、Hugo、React、Vue、Markdown、Tailwind、SSG、SSR、GitHub Pages、Vercel。

这些词到底是什么？它们之间有什么关系？

这篇文章不讨论复杂代码，只解释它们分别负责什么，以及个人网站应该怎么选。

一、先把网站想象成一栋房子

可以把一个网站理解成一栋房子。

所以，Astro 和 Cloudflare Pages 不是同一种东西：Astro 是建网站的工具，Cloudflare Pages 是放网站的地方。

二、一个网页是怎么出现的

当别人打开你的网站时，大致会发生下面的事情：

用户输入网址
 → 托管平台找到网站文件
 → 浏览器读取 HTML、CSS 和 JavaScript
 → 浏览器把文件显示成网页

如果网站是博客，还会多一步：

Markdown 文章
 → 网站框架读取文章
 → 生成网页
 → 发布到网上

这就是静态网站的大致工作方式。

三、什么是网站框架

网站框架就是帮助我们组织页面、内容和功能的一套工具。

如果完全不用框架，也可以自己写 index.html、style.css 和 script.js。但是当网站包含很多页面时，手动维护会越来越麻烦。框架可以帮助我们：

• 创建多个页面
• 处理导航
• 读取 Markdown 文章
• 生成文章详情页
• 处理图片和链接
• 生成 sitemap 和 RSS
• 管理重复的页面结构

常见框架可以分成几类。

内容型网站框架

适合个人主页、博客、学习笔记、作品集和文档站，常见选择是 Astro、Eleventy、Hugo 和 Jekyll。

应用型网站框架

适合登录系统、用户中心、在线工具、管理后台和实时数据，常见选择是 Next.js、Nuxt 和 SvelteKit。

文档型网站框架

适合技术文档、课程资料、知识库和 API 文档，常见选择是 VitePress 和 Docusaurus。

四、Astro 是什么

这一节会讲得细一些，因为后面推荐的方案就是它。顺序是：谁做的 → 名字怎么来的 → 当年要解决什么问题 → 它和同类到底差在哪 → 用起来是什么感觉 → 什么时候不该用它。第五节介绍其他框架时，也会按同一个顺序讲，方便横向对比。

它是从哪来的

Astro 在 2021 年 6 月第一次公开，主要作者是 Fred K. Schott、Nate Moore、Matthew Phillips 和 Drew Powers。

这几个人不是凭空出现的。在做 Astro 之前，他们做的是 Snowpack 和 Skypack——两个更偏底层的前端构建工具。也就是说，他们长期在处理“网页要下载多少东西才能显示出来”这个问题，Astro 是他们把这些经验重新组织了一遍的产物。

2022 年，团队成立了 Astro Technology Company 来全职维护它，同年 8 月发布 1.0 版本。这一点对个人用户其实有实际意义：一个有全职团队、有商业公司托底的开源项目，通常比一个人业余维护的项目更不容易突然停更。

名字是怎么来的

Astro 的名字没有技术含义，它就是个太空词根（astronaut 宇航员、astronomy 天文学都是这个词根）。整套品牌都是太空主题：它的吉祥物叫 Houston（休斯顿，NASA 载人航天控制中心所在地，那句著名的 “Houston, we have a problem” 就是对着它说的），你写错代码时弹出来的报错框里就是这个小家伙。Houston 最早只是 Nate Moore 在命令行工具里随手加的一个小人，后来成了官方形象。

它当年想解决什么问题

要理解 Astro，得先知道 2015 年到 2020 年前端发生了什么。

那几年 React、Vue 这类工具变成了默认选择，网站越来越像“装在浏览器里的软件”。这套做法对真正的软件（比如在线表格、管理后台）是合适的，但很多人做博客、文档站、公司介绍页时，也照着这套来做。结果就是：一篇纯文字的文章，读者要先下载几百 KB 的 JavaScript，等它在浏览器里跑完，文字才显示出来。

打个比方：为了让门口的灯能开关，把整栋房子装上一套智能中控系统。灯是能开了，但代价太大。

Astro 团队的判断是，很多团队在业务并不需要的时候，默认接受了这套复杂度。所以他们的目标很直接：让内容型网站很难被做慢。

它和同类的区别：群岛架构

这是 Astro 最核心的一点，也是它和 Next.js、Nuxt 这些框架最本质的差别。

Astro 默认不往页面里放任何 JavaScript。你写的组件在构建时就跑完了，最后输出的是纯 HTML 和 CSS。哪一块需要交互（比如评论框、图片轮播），你就单独给那一块加个标记：

<ArticleBody />               <!-- 纯静态，不产生任何 JavaScript -->
<CommentBox client:load />    <!-- 只有这一块会加载 JavaScript -->

这种做法叫群岛架构（Islands Architecture）：整个页面是一片静态的“海”，只有少数需要交互的组件像“岛”一样浮在上面，各自单独加载。

还是用报纸打比方：整版报纸是印刷出来的纸，只在个别位置嵌了几块可以点的小屏幕，而不是把整张报纸做成一台平板电脑。这个概念不是 Astro 发明的，但确实是 Astro 把它推广开的。

除此之外，还有三个用起来能明显感觉到的特点：

• 不绑定某一套 UI 框架：大多数框架是选定了就进入那个世界：用 Next.js 就是 React 的写法，用 Nuxt 就是 Vue 的写法。Astro 允许同一个项目里同时用 React、Vue、Svelte 组件，也允许一个都不用——写普通 HTML 就行。对新手来说，这意味着你不必在第一天就决定“我要学 React 还是 Vue”。
• 内容优先的内置能力：Markdown 和 MDX、代码高亮、数学公式、sitemap 和 RSS，这些做博客一定会用到的东西，官方就有，不需要自己拼装一堆插件。
• 内容集合（Content Collections）：它会检查你每篇文章的标题、日期、标签有没有写对，写错了构建就报错，而不是等网站发出去才发现日期是空的。这个机制第七节会专门讲。

用起来是什么感觉

日常写作的流程是这样的：

在 src/content/ 里新建一个 .md 文件，正常写文章
 → 运行 npm run dev，浏览器里实时看到效果
 → 运行 npm run build，得到一个 dist 文件夹
 → 把 dist 传到托管平台，网站就更新了

项目的组织方式大致是：个人资料放配置文件，文章内容放 Markdown 或 MDX，页面结构写成 Astro 页面，样式用 CSS 或 Tailwind CSS，最终产物是一堆静态 HTML 文件。

什么时候不该用它

Astro 不是万能的。以下两种情况，换别的更省事：

• 网站的重点是登录、用户系统、后台或实时数据——用 Next.js 或 Nuxt。
• 只想写纯技术文档，希望左侧导航、右侧目录、搜索都是现成的——用 VitePress 或 Docusaurus。

如果你要做的是个人博客、学习笔记和作品集，Astro 通常是比较均衡的选择。

官方文档

Astro 有官方维护的简体中文文档，对不熟悉英文的人比较友好：

• 中文文档入口：https://docs.astro.build/zh-cn/getting-started/
• Content Loader 参考（内容如何被加载和校验）：https://docs.astro.build/en/reference/content-loader-reference/

五、Astro 之外还有什么选择

下面这些框架，你在搜索资料时一定会反复看到。每一个都按同样的顺序介绍：谁做的、名字怎么来的、当年要解决什么问题、和别人差在哪、什么时候选它，以及官方文档在哪。

不用记住所有细节。看完之后能建立一个印象——“哦，这个东西是从哪个年代、为了什么冒出来的”——就够了。

Eleventy（11ty）

谁做的：Zach Leatherman，美国内布拉斯加州的一位 Web 开发者，2017 年开始做。他的动机很朴素：Jekyll 很好用，但它是 Ruby 写的，JavaScript 开发者要先装一套 Ruby 环境才能用，他想在 JavaScript 里做一个同类的东西。

名字怎么来的：这个名字有个很温暖的来历：他奶奶总爱讲他小时候数数的糗事——别的小孩从十数到十一，他却把 “teen” 的规律套到十一上，数成 “ten、eleventy-teen、twelvety-teen、thirteen……”。他把 Eleventy 当成项目名，就是从这个故事来的。11ty 是它的缩写写法（1-1-ty）。顺带一提，《魔戒》里比尔博的 “eleventy-first birthday”（一百一十一岁生日）也用了这个词，但作者说的不是这个出处。

它解决什么问题：把 Markdown 和模板转成 HTML，仅此而已。它不管组件、不管交互、默认一行 JavaScript 都不往页面里放。

和别人差在哪：最大的特点是不强制你用哪种模板语言。别的生成器往往绑定一套写法，Eleventy 支持 Markdown、Nunjucks、Liquid、EJS、纯 JavaScript 等十来种，你会哪个用哪个。配置文件可以只有几行，甚至完全不写。代价是它确实“少”：没有组件化那一套，做复杂交互要自己动手。

什么时候选它：想要一个极简、依赖少、几乎没有 JavaScript 的网站。反过来，需要复杂组件和大量交互时不合适。

官方文档：https://www.11ty.dev/docs/

Hugo

谁做的：Steve Francia（网名 spf13）在 2013 年 7 月发布第一个版本，用 Go 语言写成；2015 年起由 Bjørn Erik Pedersen 接手主力维护。Francia 后来加入了 Go 语言核心团队。

名字怎么来的：这个还真没有权威答案。官方文档没有解释过命名来源，社区里流传的几种说法（比如致敬作家雨果）都找不到作者本人的出处。开源项目里这种情况很常见，不必深究。

它解决什么问题：速度。2013 年前后，主流的静态网站生成器是 Jekyll，文章上千篇时构建一次要等好几分钟，改一个错别字都要重新等。Hugo 用 Go 写，构建速度快出一个数量级，这至今仍是它最硬的卖点。

和别人差在哪：两点最直观。第一，Hugo 是一个单独的可执行文件，下载下来就能用，不需要装 Node.js 或 Ruby 环境——对不想折腾环境的人很友好。第二，它的模板用的是 Go Template 语法，和 JavaScript 生态完全是两套东西；一旦你想改主题、加功能，就得学这套语法，这是 Hugo 最大的门槛。它的现成主题很多，如果你打算直接套主题、不改结构，这个门槛可以绕过去。

什么时候选它：文章数量很大的博客、文档站、知识库，而且你打算用现成主题。

官方文档：https://gohugo.io/documentation/

Jekyll

谁做的：Tom Preston-Werner，GitHub 的联合创始人之一，2008 年 11 月发布，用 Ruby 写成。他在那篇著名的《Blogging Like a Hacker》里说明了动机：他受够了 WordPress 这类要装数据库、要登后台的博客系统，想像写代码一样写博客——文章就是文本文件，用 Git 管理。

名字怎么来的：普遍认为来自小说《化身博士》里的 Jekyll 博士（原文 Dr Jekyll and Mr Hyde，讲一个人变成另一个人的故事，对应“把纯文本变成网站”）。官方没有正式说明，但生态里配套项目就叫 Hyde，指向已经很明显了。

它解决什么问题：它几乎定义了“静态网站生成器”这个品类。今天所有同类工具——包括 Astro、Eleventy、Hugo——的基本思路都来自它：文章写成 Markdown，加一段声明标题日期的头部信息，跑一下命令生成整站 HTML。

和别人差在哪：它和 GitHub Pages 是深度绑定的：把 Jekyll 项目推到 GitHub 仓库，GitHub 会自动帮你构建和发布，不需要自己配置任何东西。这是它最省事的地方。缺点是需要 Ruby 环境，构建速度偏慢，这几年新项目选它的越来越少，但因为存在时间长，中文教程数量依然很可观。

什么时候选它：想用 GitHub Pages、想找大量现成教程，并且不介意装 Ruby。

官方文档：https://jekyllrb.com/docs/

Next.js

谁做的：Guillermo Rauch 和他的 ZEIT 团队（这家公司后来改名叫 Vercel），2016 年 10 月开源。Rauch 此前还写过 Socket.IO 等知名项目。

名字怎么来的：官方没有专门解释，字面就是“下一个 / 下一代”的意思。

它解决什么问题：2016 年，用 React 做一个能被搜索引擎正常收录的网站是件苦差事：要自己配 webpack、自己写路由、自己处理服务端渲染和数据获取，每个团队配一遍，配法还都不一样。Next.js 把这些做成了约定——文件夹里放一个文件，它就是一个页面，不用手写路由配置。

和别人差在哪：它的定位比前面几个都大：它不只是做网站，而是做完整的 Web 应用。同一个项目里既能写页面，也能写后端接口，还能连数据库；每个页面可以单独选择是提前生成好、还是访问时再生成。生态是所有框架里最大的，遇到问题几乎搜得到答案，招聘市场上的认可度也最高。

代价是概念多、更新快（App Router、React Server Components、各种缓存策略），学习成本明显高于 Astro。对一个只有文章和笔记的个人网站来说，属于杀鸡用牛刀。另外要注意：Next.js 也支持导出成纯静态文件，但那种模式下依赖服务器运行时的功能就不能用了。

什么时候选它：个人网站以后要做登录、后台、数据库和在线功能；或者你本来就想学 React、把它当成职业投资。

官方文档：https://nextjs.org/docs

Nuxt

谁做的：法国的 Chopin 兄弟——Sébastien 和 Alexandre，2016 年 10 月 26 日提交了第一行代码。起因是 Sébastien 给自己定了个一周的挑战：做一个 Vue 版的 Next.js。

名字怎么来的：普遍的理解是 Next 的 Vue 版拼写变体，官方同样没有正式的命名说明。有个有意思的细节：Nuxt 标志里的山，来自兄弟俩长大的比利牛斯山。

它解决什么问题：和 Next.js 完全一样的问题，只不过换到 Vue 生态。如果你已经在学 Vue，或者中文教程里 Vue 的资料更合你口味，Nuxt 就是那条对应的路。

和别人差在哪：Nuxt 有一个很讨喜的设计叫自动导入：组件、工具函数放在约定的文件夹里，用的时候直接写名字，不用在文件顶部一行行写 import。它的模块生态也很整齐，装一个官方模块就能获得内容管理、图片优化等能力。渲染方式上同样灵活：可以整站预渲染成静态文件，也可以跑服务端或边缘部署。

什么时候选它：喜欢 Vue，网站复杂度中等，需要静态生成或服务端渲染。

官方文档：https://nuxt.com/docs

SvelteKit

谁做的：Rich Harris，他原本是《卫报》和《纽约时报》的图形记者，日常工作是在很紧的截稿时间里做交互式数据可视化。Svelte 的第一个版本发布于 2016 年 11 月，配套的完整框架 SvelteKit 在 2022 年底发布 1.0。

名字怎么来的：svelte 是个现成的英语词，意思是“苗条、纤细”，由他和《卫报》的同事一起定下，指的是它编译出来的产物很小。他此前写过另一个框架 Ractive，也因此半开玩笑地说 Svelte 是“对我过去写出臃肿框架的一次赎罪”。

它解决什么问题：React、Vue 这类工具都要把一套“运行时”发到用户的浏览器里，由它在浏览器中判断页面该怎么更新。Svelte 换了个思路：把这套判断提前到构建阶段做完，编译成直接操作页面的普通 JavaScript，用户那边不需要下载框架本身。

和别人差在哪：语法上它更接近“原生 HTML 加一点点语法糖”，新手读起来负担较小；产物体积也比同类小。SvelteKit 之于 Svelte，就像 Next.js 之于 React、Nuxt 之于 Vue：Svelte 只负责写界面组件，SvelteKit 补上路由、渲染模式和构建优化，底层用的构建工具是 Vite。相对的短板是生态规模和中文资料都比不上 React、Vue 两家。

什么时候选它：交互较多的个人网站、在线小工具，而且你愿意接受资料相对少一些。

官方文档：https://svelte.dev/docs/kit

VitePress

谁做的：Vue 团队。它的前身是 VuePress——尤雨溪当年为了写 Vue 自己的文档而做的工具；VitePress 是基于 Vite 的重写版本。

名字怎么来的：Vite 加 Press。Vite 是法语里的“快”，官方文档专门标了发音 /viːt/（读作“veet”），它是尤雨溪做的前端构建工具，现在几乎所有新框架底层都在用它。Press 沿用的是 VuePress、WordPress 那一类“出版”的含义。

它解决什么问题：写技术文档。默认主题就已经是一个完整的文档站：左边是章节导航，右边是本页目录，顶部是版本和外链，还内置了搜索。你几乎不用做任何设计。

和别人差在哪：它的定位非常窄，好处和坏处都来自这一点：做文档站几乎零成本，但想做一个有个人风格的主页，就要一路和默认主题较劲。它比 Docusaurus 更轻、启动更快，功能也更少。

什么时候选它：课程笔记、编程文档、API 文档、知识库。

官方文档：https://vitepress.dev/

Docusaurus

谁做的：Meta（当时还叫 Facebook）开源，2017 年 12 月发布，由 Joel Marcey 牵头，核心功能最初由实习生 Frank Li 实现。起因很现实：Facebook 每个开源项目都各自搭一个文档站，想给所有项目加个博客或搜索，就得挨个改一遍。

名字怎么来的：这个有官方说法：团队在会议室里想名字，不知怎么恐龙成了主题，最后把 documentation（文档）和一堆以 -saurus 结尾的恐龙名拼在一起。吉祥物是恐龙 Slash，新建项目时默认配置里至今还留着 “Dinosaurs are cool”（恐龙很酷）这句标语。

和别人差在哪：同样是文档工具，Docusaurus 比 VitePress“重”：它基于 React，开箱就带文档版本管理（v1、v2 的文档同时在线）、多语言国际化、博客和搜索。如果你的文档需要区分版本或者要做中英双语，它省下的工夫最多；只写一份中文笔记的话，这些能力就是多余的重量。

什么时候选它：需要版本化或多语言的正式文档站。

官方文档：https://docusaurus.io/zh-CN/docs（有官方中文）

放在一张表里

如果你想要一个有个人风格的主页，Astro、Eleventy 或 Hugo 通常更自由；如果你要的是一个标准文档站，VitePress 和 Docusaurus 更省事；如果网站以后要变成一个真正的应用，才需要考虑 Next.js 或 Nuxt。

六、什么是 Markdown

Markdown 是一种很简单的写作格式。

# 这是一级标题

这是一段文字。

- 第一项
- 第二项

它最终会显示成标题、段落和列表。

Markdown 的好处是：

• 容易学习
• 可以用普通文本编辑器打开
• 方便用 Git 管理
• 不依赖网站后台
• 文章迁移方便

因此个人博客经常使用 Markdown 和 MDX：Markdown 用来写普通文章，MDX 则是可以在文章中加入组件的 Markdown。

七、什么是 Content Collections

Content Collections 可以理解为“整理文章的文件柜”。

如果只有一两篇文章，可以直接读取 Markdown。但当文章变多时，我们希望每篇文章都有固定信息：标题、日期、摘要、标签、分类和是否置顶。Content Collections 可以检查这些信息是否填写正确。

例如：

title: "文章标题"
publishedAt: 2026-08-26
tags:
  - 深度学习
  - Python

它的作用不是写文章，而是帮助网站更好地管理文章。

八、什么是 Tailwind CSS

CSS 是控制网站外观的语言。例如：

body {
  color: #1c1c1c;
  background: #fafafa;
}

Tailwind CSS 是另一种写 CSS 的方式：

<p class="text-gray-700 text-lg">
  这是一段文字
</p>

常见选择有 Tailwind CSS、原生 CSS、CSS Modules、Sass 和 UnoCSS，可以简单理解为：

• Tailwind CSS：写得快，适合快速开发
• 原生 CSS：自由度最高，适合精细设计
• CSS Modules：适合组件之间隔离样式
• Sass：适合已有 Sass 使用经验的项目
• UnoCSS：类似 Tailwind，但更灵活轻量

对于个人网站，Tailwind CSS 或原生 CSS 任选一种即可。不要在同一个项目里同时引入太多套 CSS 方案。

九、什么是 SSG、SSR 和 SPA

这是最容易让新手困惑的部分。

SSG：提前做好网页

网站发布前就把页面生成好：

文章 → 构建 → HTML 文件 → 上传

适合博客、个人主页、学习笔记和文档站，优点是速度快、便宜、稳定、SEO 好。

SSR：用户访问时再生成

用户访问页面时，服务器才生成内容，适合登录页面、个性化内容和实时数据。缺点是需要服务器，部署更复杂。

SPA：浏览器自己运行网站

浏览器先加载一套 JavaScript，再由 JavaScript 生成页面，适合管理后台、在线工具和复杂应用。对于普通个人博客，通常不需要 SPA。

简单选择：个人博客用 SSG；有登录和数据库用 SSR；复杂交互工具用 SPA 或 SSR。

十、网站部署到哪里

网站写完之后，还要把它放到互联网上，这一步叫部署。常见平台有 GitHub Pages、Cloudflare Pages、Vercel 和 Netlify：

• GitHub Pages：适合简单静态网站
• Cloudflare Pages：适合静态网站和全球访问
• Vercel：适合 Next.js，也支持其他框架
• Netlify：适合静态网站和简单表单

如果使用 Astro 制作个人网站，常见组合是 Astro + GitHub Pages、Astro + Cloudflare Pages 或 Astro + Vercel。

十一、零基础应该怎么选

不要因为别人使用了 Next.js，就认为个人博客也必须使用 Next.js。工具没有绝对好坏，关键是和网站类型匹配。

十二、可以直接复制的通用提示词

如果你不懂代码，可以把下面的提示词交给 AI 编程工具：

我不熟悉前端开发，请先用简单语言解释你的技术选择，再开始编码。请为我创建一个中文个人网站。

网站用途：

- 个人介绍
- 学习笔记
- 博客文章
- 作品或研究项目
- 图片记录
- 兴趣记录

如果没有特殊原因，请使用以下技术路线：

Astro / TypeScript / Tailwind CSS /
Markdown + MDX / Astro Content Collections /
KaTeX / Shiki / 静态生成

如果你认为需要使用其他技术，请先说明原因，并且只选择一套主框架，不要混用 Astro、Next.js、Nuxt、React、Vue 和 Svelte。

一、网站页面

请创建以下页面：

- 首页
- 关于
- 文章列表
- 文章详情
- 学习笔记列表
- 学习笔记详情
- 研究项目
- 论文成果
- 电影或剧集
- 兴趣与足迹
- 站内搜索
- 404 页面

研究项目和论文没有真实资料时必须隐藏，不要生成虚假内容。

二、个人资料

请将资料集中放在一个配置文件中：

- 姓名：[姓名]
- 网站名称：[网站名称]
- 学校：[学校]
- 学院与专业：[学院 / 专业]
- 身份：[身份]
- 研究方向：[研究方向]
- 个人简介：[个人简介]
- 所在地：[城市]
- 邮箱：[邮箱]
- GitHub：[GitHub 地址]
- 头像：[图片路径]
- 简历：[PDF 路径]
- Google Scholar：[链接]
- ORCID：[链接]

没有填写的字段必须隐藏。

三、内容管理

- 文章和笔记使用 Markdown 或 MDX
- 每篇内容包含标题、日期、摘要和标签
- 使用内容集合或类型校验
- 支持搜索、分类、标签和分页
- 支持数学公式、代码高亮、图片、引用和表格
- 结构化内容使用 TypeScript、JSON、YAML 或 TOML
- 不要把个人资料直接重复写在页面组件中

四、视觉风格

网站风格应当：

- 简洁
- 安静
- 专业
- 偏学术但不过时
- 适合中文长文阅读
- 留白充足
- 使用中性浅色背景和低饱和强调色

不要使用：

- 夸张 Hero
- 营销口号
- 渐变背景
- 玻璃拟态
- 粒子特效
- 发光效果
- 装饰性彩色圆球
- 大量卡片和阴影
- 超大标题

五、交互与适配

- 支持明暗模式
- 默认跟随系统主题
- 支持手机端导航菜单
- 支持键盘操作
- 图片包含 alt 文本和宽高
- 支持 prefers-reduced-motion
- 支持文章目录和阅读时间
- 支持代码复制
- 防止长中文标题溢出
- 防止图片加载造成布局跳动
- 确保桌面端、平板端和手机端不重叠、不溢出

六、SEO 和部署

请生成：

- sitemap
- RSS
- robots.txt
- canonical URL
- Open Graph
- JSON-LD
- 中文语言标记

网站必须输出为静态文件，可以部署到：

GitHub Pages / Cloudflare Pages / Vercel / Netlify

请将网站域名集中配置，不要使用 example.com。

七、交付

- 提供真实的中文示例内容
- 没有资料的地方使用明显占位符
- 提供 README
- 说明如何修改个人资料
- 说明如何新增文章、笔记、图片、项目和电影
- 说明如何部署
- 运行类型检查
- 运行生产构建
- 使用桌面和手机尺寸测试页面
- 最后提供本地预览地址和主要文件说明

结语

最简单的记忆方式是：框架负责建房子，Markdown 负责写内容，CSS 负责装修，JavaScript 负责互动，托管平台负责把房子放到网上。

对于大多数个人网站，先选 Astro + Markdown + Tailwind CSS + 静态部署，已经足够了。