| type | unitTitle | title | description |
|---|---|---|---|
tutorial |
搭建并部署你的第一个 Astro 网站 |
第一单元：前期准备 |
教程：搭建你的 Astro 博客 —
准备好开发环境，然后创建并部署你的第一个 Astro 网站 |
import Checklist from '/components/Checklist.astro';
import Box from '/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';
现在你已经知道你要搭建什么了，是时候来设置你所需的所有工具！
本单元将向你展示如何设置开发环境并部署网站到 Netlify。如果你已经熟悉自己的环境和工作流程，可以直接跳到第二单元。
:::tip[在在线代码编辑器中学习教程]
想要在在线代码编辑器中完成这个教程吗？请按照以下说明开始使用 Google IDX。
使用 Google IDX：按照以下说明操作，然后直接进入第二单元！
设置 IDX
1. 点击外部链接以 [在 IDX 的新工作区创建一个 "Empty Project（空项目）" 模板](https://astro.new/minimal?on=idx)。-
如果你尚未登录，请按照提示登录你的 Google 帐户。
-
如果要将项目从默认的 “Empty Project” 更改为项目，请输入项目的名称，并单击 Create（创建）。
-
等待工作区创建完成。这个过程可能会花上 30 至 60 秒。如果一切顺利的话，你会看到 Astro 项目被加载到在线代码编辑器中。
-
等待 IDX 运行两个脚本：其中一个用于安装 Astro，另一个用于运行开发服务器。请注意，如果你的工作区在 Astro 完成安装之前加载，你可能会短暂地看到一条消息，指出你的工作区 "couldn't find Astro"。如果这条消息没有自行清除，你可以忽略并取消它。
进行修改
如果一切顺利的话，在文件窗口中，你应该可以看到 src/pages/index.astro，并可以在分屏窗口中浏览到网页的实时预览。按照 "编写你的第一行 Astro 代码" 来修改此文件。
创建 GitHub 仓库
1. 导航到垂直菜单栏中的 “Source Control” 导航项，或使用 CTRL + SHIFT + G 打开。-
选择 Publish to GitHub（发布到 GitHub）选项。这将在你的 GitHub 帐户中创建一个新的仓库。
-
按照提示登录你的 GitHub 账户。
-
登录后，返回到 IDX 选项卡，你可以选择对新仓库重新命名，以及是要创建私有仓库或是公共仓库。你可以为本教程选择任何名称和任意类型的仓库。
-
IDX 将会进行初始化提交并发布到你的 Github 仓库中。
-
今后，只要你有更改要提交回 GitHub，源代码控制导航图标就会显示一个数字。这是自上次提交以来已更改的文件数。导航到此选项卡并执行两个步骤（提交和发布），这将允许你输入提交消息并更新存储库。
部署你的网站
如果你想部署到 Netlify，并在工作时拥有网站的实时发布版本，可跳至 将你的网站部署到网络。
否则，请跳至 第二单元 开始使用 Astro 进行搭建！
{/* StackBlitz 说明
使用 StackBlitz：按照以下说明操作，然后直接进入第二单元！
设置 StackBlitz
1. 点击外部链接以 [在 StackBlitz 创建一个 "Empty Project（空项目）" 模板](https://astro.new/minimal?on=stackblitz)。-
在右上方点击
Sign in以使用你的 GitHub 账号登录。 -
在 StackBlitz 编辑器窗口的左上方，点击
fork模板（保存到你自己的账号中）。 -
等待项目加载完毕，你将看到
Empty Project的实时预览。
进行修改
在文件窗口中，你应该可以看到 src/pages/index.astro。点击打开它，按照编写你的第一行 Astro 代码来修改此文件。
创建 GitHub 仓库
1. 点击文件列表顶部的 Connect Repository 按钮，输入一个新的仓库名称，然后点击 Create repo & push。- 当你有修改要提交到 GitHub 时，工作区左上方将出现一个
Commit按钮。点击此按钮并输入提交信息commit message，然后它将被提交到你的仓库。
部署你的网站
如果你想部署到 Netlify，并在工作时拥有网站的实时发布版本，可跳至 将你的网站部署到网络。
否则，请跳至第二单元开始使用 Astro 进行搭建！
在本单元中，你将会创建一个新项目，该项目将存储在 Github 并且连接到 Netlify。
在编写代码的过程中，你将定期将更改提交到 GitHub。Netlify 将使用 GitHub 存储库中的文件来构建你的网站，然后将其发布到一个唯一的地址上，任何人都可以在互联网上查看它。
每当你提交更改到 GitHub 时，它会向 Netlify 发送通知。然后，Netlify 将自动重新构建和重新发布你的网站以应用这些更改。
- [ ] 我已经准备好了一个用于 Astro 项目的开发环境！