开发和构建

一旦你有了一个 Astro 项目，你就可以开始使用 Astro 进行构建了！🚀

编辑你的项目

要对你的项目进行更改，请在你的代码编辑器中打开项目文件夹。在开发模式下工作并运行开发服务器，可以在你编辑代码时看到网站的更新。

你还可以自定义开发环境的各个方面，例如配置 TypeScript 或安装官方 Astro 编辑器扩展。

启动 Astro 开发服务器

Astro 内置了一个开发服务器，为你提供了项目开发所需的一切。`astro dev` CLI 命令将启动本地开发服务器，这样你就可以第一次看到你的新网站运行起来。

每个入门模板都带有一个预配置的脚本，可以为你运行 `astro dev`。进入你的项目目录后，使用你喜欢的包管理器来运行此命令并启动 Astro 开发服务器。

npm

npm run dev

pnpm

pnpm run dev

yarn

yarn run dev

如果一切顺利，Astro 现在将在 https://:4321/ 上为你的项目提供服务。在浏览器中访问该链接，看看你的新网站！

在开发模式下工作

Astro 会监听 `src/` 目录中的文件更改，并在你构建时实时更新你的网站预览，因此在开发过程中进行更改时无需重启服务器。当开发服务器运行时，你将始终能够在浏览器中看到网站的最新版本。

在浏览器中查看你的网站时，你将可以访问 Astro 开发工具栏。在你构建的过程中，它将帮助你检查你的岛屿，发现可访问性问题等等。

如果在启动开发服务器后无法在浏览器中打开你的项目，请返回到你运行 `dev` 命令的终端，并检查显示的消息。它会告诉你是否发生了错误，或者你的项目是否在 https://:4321/ 之外的其他 URL 上提供服务。

构建和预览你的站点

要检查构建时将创建的网站版本，请退出开发服务器（Ctrl + C）并在终端中为你的包管理器运行相应的构建命令

npm

npm run build

pnpm

pnpm build

yarn

yarn run build

Astro 会在一个单独的文件夹中（默认为 `dist/`）构建一个可部署的网站版本，你可以在终端中观察其进度。这将在你部署到生产环境之前提醒你项目中的任何构建错误。如果 TypeScript 配置为 `strict` 或 `strictest`，`build` 脚本还将检查你的项目是否存在类型错误。

构建完成后，在终端中运行相应的 `preview` 命令（例如 `npm run preview`），你就可以在同一个浏览器预览窗口中本地查看构建好的网站版本。

请注意，这会预览你上次运行构建命令时存在的代码。这是为了让你预览网站部署到网络后的样子。构建后对代码所做的任何后续更改，在再次运行构建命令之前，都不会在你预览网站时反映出来。

使用（Ctrl + C）退出预览并运行另一个终端命令，例如重新启动开发服务器以返回开发模式，该模式会随着你的编辑而更新，以实时预览你的代码更改。

阅读更多关于 Astro CLI 以及在使用 Astro 构建时将使用的终端命令。

提示

你可能希望在开始添加或更改过多代码之前立即部署你的新网站。这有助于发布一个最小可用的网站版本，并可以为你节省以后排查部署问题的时间和精力。

后续步骤

成功！你现在已经准备好开始使用 Astro 进行构建了！🥳

接下来我们推荐你探索以下几项内容。你可以按任何顺序阅读它们。你甚至可以暂时离开我们的文档，去你的新 Astro 项目代码库中实践，当遇到问题或有疑问时再回来。

配置你的开发环境

浏览以下指南以自定义你的开发体验。

编辑器设置 自定义你的代码编辑器以改善 Astro 开发体验并解锁新功能。

开发工具栏 探索开发工具栏的实用功能。

TypeScript 配置 配置类型检查、智能提示等选项。

探索 Astro 的功能

了解你的代码库 在我们的项目结构指南中了解 Astro 的文件结构。

创建内容集合 使用 frontmatter 验证和自动类型安全为你的新网站添加内容。

添加视图过渡 创建无缝的页面过渡和动画。

了解岛屿 阅读关于 Astro 的岛屿架构。

学习入门教程

在我们的入门教程中，从一个空白页面开始，构建一个功能齐全的 Astro 博客。

这是一个了解 Astro 工作原理的好方法，它将带你了解页面、布局、组件、路由、岛屿等基础知识。它还包括一个可选的、对初学者友好的单元，适合那些对 Web 开发概念不熟悉的人，该单元将指导你在计算机上安装必要的应用程序、创建 GitHub 帐户和部署你的网站。