Astro建站教程：安装nodejs，npm下载Astro，安装扩展

1. 下载Nodejs LTS版：https://nodejs.org/en
   安装步骤全默认即可，安装路径可以根据自己的爱好更改
2. 在桌面右键打开cmd或powershell，输入node -v和npm -v测试是否安装成功
   
3. 浏览器打开https://docs.astro.build/en/install/auto/
   复制里面的npm create astro@latest这行代码，在本地的cmd中输入并回车，然后输入y
   这里的Template copied应该是Use blog template才对，不要选错了！TypeScript那项可以选Yes的，git那项要选No！
4. 在VS Code安装Astro扩展
5. 在文件夹的根目录输入npm run dev运行Astro
6. 运行成功，浏览器打开http://localhost:4321/查看
7. 建立博客
   
   你可以在这个路径编写Markdown，我认为有能力进行以上操作的人应该都会写Markdown对吧，现在，你可以像写Markdown文件一样写博客了
   
   在这里，你能修改以下的内容：
   
   

为什么选择Astro？

Astro 是一款 一体化 Web 框架 ，用于构建 快速、 以内容为中心的网站。

为什么选择 Astro 而不是其他 Web 框架？ 以下五个核心设计原则可帮助解释我们构建 Astro 的原因、它要解决的问题以及为什么 Astro 可能是您的项目或团队的最佳选择

Astro是…

• 以内容为中心 ：Astro 专为内容丰富的网站而设计。
• 服务器优先 ：网站在服务器上呈现 HTML 时运行速度更快。
• 默认情况下很快 ：在 Astro 中建立一个慢速网站应该是不可能的。
• 易于使用 ：您无需成为专家即可使用 Astro 构建某些东西。
• 功能齐全，但灵活 ：超过 100 多个 Astro 集成可供选择。

以内容为中心

Astro 专为构建内容丰富的网站而设计。 这包括大多数营销网站、发布网站、文档网站、博客、投资组合和一些电子商务网站。

相比之下，大多数现代 Web 框架都是为构建 Web 应用程序 而设计的。 这些框架最适合在浏览器中构建更复杂、类似应用程序的体验：登录管理仪表板、收件箱、社交网络、待办事项列表，甚至像 Figma 和 Ping 这样的原 生 应用 程序 。

这是了解 Astro 的最重要的差异之一。 Astro 对内容的独特关注让 Astro 能够做出权衡并提供无与伦比的性能功能，而这些功能对于更多以应用程序为中心的 Web 框架的实施来说是没有意义的。

服务器优先

Astro 尽可能利用服务器端渲染而不是客户端渲染。 这与传统服务器端框架（PHP、WordPress、Laravel、Ruby on Rails 等）数十年来一直使用的方法相同。 但您不需要学习第二种服务器端语言来解锁它。 对于 Astro，一切仍然只是 HTML、CSS 和 JavaScript（或者 TypeScript，如果您愿意的话）。

这种方法与其他现代 JavaScript Web 框架（如 Next.js、SvelteKit、Nuxt、Remix 等）形成鲜明对比。 这些框架需要对整个网站进行客户端渲染，并包括服务器端渲染，主要是为了解决性能问题。 这种方法被称为 单页应用程序 (SPA) 方法相反， 与 Astro 的多页面应用程序 (MPA) 。

SPA 模式有其优点。 然而，这些是以额外的复杂性和性能权衡为代价的。 这些权衡会损害页面性能，包括 交互时间 (TTI) 等关键指标，这对于首次加载性能至关重要的以内容为中心的网站来说没有多大意义。

默认情况下很快

良好的性能始终很重要，但 对于以内容为中心的网站尤其 重要。 事实证明，糟糕的表现会导致您失去参与度、转化率和金钱。 例如：

• 每快 100 毫秒 → 转化次数增加 1%（ Mobify ，每年收入 +380,000 美元）
• 速度提高 50% → 销售额增加 12% ( AutoAnything )
• 速度提高 20% → 转化率提高 10%（ 家具村 ）
• 速度提高 40% → 注册量增加 15% ( Pinterest )
• 速度提高 850 毫秒 → 转化率提高 7% ( COOK )
• 每慢 1 秒 → 用户减少 10% ( BBC )

在许多 Web 框架中，很容易构建一个在开发过程中看起来很棒的网站，但在部署后加载速度却非常慢。JavaScript通常是罪魁祸首，因为用户的手机和低功耗设备很少能与开发人员笔记本电脑的速度相匹配。

Astro 的神奇之处在于它如何将上面解释的两个价值观结合起来——内容聚焦与服务器优先的 MPA 架构——进行权衡并提供其他框架无法提供的功能。 结果是每个网站都具有惊人的开箱即用的网络性能。 我们的目标：用 Astro 构建一个缓慢的网站几乎是不可能的。

Astro 网站的 加载速度可提高 40%，而 JavaScript 数量可减少 90% 与使用最流行的 React Web 框架构建的同一网站相比， 。 但不要相信我们的话：看着 Astro 的表现让 Ryan Carniato（Solid.js 和 Marko 的创建者） 哑口无言

便于使用

Astro 的目标是让每个 Web 开发人员都可以使用。 Astro 的设计宗旨是让人感觉熟悉且平易近人，无论技能水平或过去的 Web 开发经验如何。

我们首先确保您可以使用您已经了解的任何最喜欢的 UI 组件语言。 React、Preact、Svelte、Vue、Solid、Lit 和其他几个都支持在 Astro 项目中创建新的 UI 组件。

我们还想确保 Astro 也有一个很棒的内置组件语言。 为此，我们创建了自己的 .astro用户界面语言。 它深受 HTML 的影响：任何有效的 HTML 片段都已经是有效的 Astro 组件！ 但它还结合了一些我们最喜欢的从其他组件语言借用的功能，例如 JSX 表达式 (React) 和默认的 CSS 作用域（Svelte 和 Vue）。 这种与 HTML 的接近性还使得使用渐进增强和常见的可访问性模式变得更加容易，而无需任何开销。

Astro 的设计比其他 UI 框架和语言简单。 造成这种情况的一个重要原因是 Astro 被设计为在服务器上渲染，而不是在浏览器中渲染。 这意味着您不需要担心：钩子（React）、过时的闭包（也是 React）、引用（Vue）、可观察量（Svelte）、原子、选择器、反应或派生。 服务器上没有反应性，因此所有复杂性都消失了。

我们最喜欢的格言之一是： 选择复杂性。 我们设计 Astro 是为了尽可能地消除开发人员体验中“所需的复杂性”，特别是当您第一次使用时。 您可以仅使用 HTML 和 CSS 在 Astro 中构建一个“Hello World”示例网站。 然后，当您需要构建更强大的东西时，您可以逐步获取新功能和 API。

功能齐全但灵活

Astro 是一款一体化 Web 框架，包含构建网站所需的一切。 Astro 包括组件语法、基于文件的路由、资产处理、构建过程、捆绑、优化、数据获取等。 您可以构建出色的网站，而无需超出 Astro 的核心功能集。

如果您需要更多控制，可以通过超过 100 种集成 来扩展 Astro，例如 React 、 Svelte 、 Vue 、 Tailwind CSS 、 MDX 等。 连接您最喜欢的 CMS 或 部署到您最喜欢的主机。 只需一个命令即可

Astro 与 UI 无关，这意味着您可以 自带 UI 框架 (BYOF) 。 React、Preact、Solid、Svelte、Vue 和 Lit 均在 Astro 中得到正式支持。 您甚至可以在同一页面上混合搭配不同的框架，使未来的迁移更加容易，并防止项目锁定到单个框架。