使用自动 CLI 安装 Astro
准备好安装 Astro 了吗?请按照本指南开始使用 create astro
CLI。
¥Ready to install Astro? Follow this guide to using the create astro
CLI to get started.
¥Prerequisites
-
Node.js -
v18.17.1
或v20.3.0
或更高版本。(不支持v19
。) -
文本编辑器 - 我们建议将 VS Code 与我们的 官方 Astro 扩展 一起使用。
-
终端 - Astro 可通过其命令行接口 (CLI) 访问。
¥Installation
create astro
是从头开始启动新 Astro 项目的最快方式。它将引导你完成设置新 Astro 项目的每一步。它允许你从几个不同的官方入门模板中进行选择,或者你也可以 使用 GitHub 上的任何现有项目和 --template
参数。
¥create astro
is the fastest way to start a new Astro project from scratch. It will walk you through every step of setting up your new Astro project. It allows you to choose from a few different official starter templates or you can use any existing project on GitHub with the --template
argument.
1. 运行安装向导
Section titled 1. 运行安装向导¥ Run the Setup Wizard
在终端中运行以下命令来启动我们便捷的安装向导:
¥Run the following command in your terminal to start our handy install wizard:
你可以在计算机上的任何位置运行 create astro
,因此在开始之前无需为项目创建新的空目录。如果你的新项目还没有空目录,向导将帮助你自动创建一个空目录。
¥You can run create astro
anywhere on your machine, so there’s no need to create a new empty directory for your project before you begin. If you don’t have an empty directory yet for your new project, the wizard will help create one for you automatically.
如果一切顺利,你应该会看到“Liftoff confirmed”。探索你的项目!”消息,然后是一些推荐的后续步骤。cd
进入你的新项目目录以开始使用 Astro。
¥If all goes well, you should see a “Liftoff confirmed. Explore your project!” message followed by some recommended next steps. cd
into your new project directory to begin using Astro.
如果你在 CLI 向导期间跳过了 npm install
步骤,请务必在继续之前安装依赖。
¥If you skipped the npm install
step during the CLI wizard, then be sure to install your dependencies before continuing.
2. 启动 Astro ✨
Section titled 2. 启动 Astro ✨¥ Start Astro ✨
Astro 配备了内置开发服务器,其中包含项目开发所需的一切。astro dev
命令将启动本地开发服务器,以便你可以第一次看到正在运行的新网站。
¥Astro comes with a built-in development server that has everything you need for project development. The astro dev
command will start the local development server so that you can see your new website in action for the very first time.
每个入门模板都附带一个预配置的脚本,将为你运行 astro dev
。使用你最喜欢的包管理器运行此命令并启动 Astro 开发服务器。
¥Every starter template comes with a pre-configured script that will run astro dev
for you. Use your favorite package manager to run this command and start the Astro development server.
如果一切顺利,Astro 现在应该可以在 http://localhost:4321/ 上为你的项目提供服务了!
¥If all goes well, Astro should now be serving your project on http://localhost:4321/!
Astro 将监听 src/
目录中的实时文件更改,因此你在开发过程中进行更改时无需重新启动服务器。
¥Astro will listen for live file changes in your src/
directory, so you will not need to restart the server as you make changes during development.
在浏览器中查看你的网站时,你将可以访问 Astro 开发工具栏。在你构建时,它将帮助你检查 islands、发现可访问性问题等。
¥When viewing your site in the browser, you’ll have access to the Astro dev toolbar. As you build, it will help you inspect your islands, spot accessibility issues, and more.
如果你无法在浏览器中打开项目,请返回到运行 dev
命令的终端并查看是否发生错误,或者你的项目是否通过与链接的 URL 不同的 URL 提供服务 多于。
¥If you aren’t able to open your project in the browser, go back to the terminal where you ran the dev
command and look to see if an error occurred, or if your project is being served at a different URL than the one linked to above.
¥Starter Templates
你还可以通过将 --template
参数传递给 create astro
命令,基于任何 GitHub 存储库的 官方示例 或 main
分支启动新的 astro 项目。
¥You can also start a new astro project based on an official example or the main
branch of any GitHub repository by passing a --template
argument to the create astro
command.
默认情况下,此命令将使用模板存储库的 main
分支。要使用不同的分支名称,请将其作为 --template
参数的一部分传递:<github-username>/<github-repo>#<branch>
。
¥By default, this command will use the template repository’s main
branch. To use a different branch name, pass it as part of the --template
argument: <github-username>/<github-repo>#<branch>
.
探索我们的 主题和入门展示,你可以在其中浏览博客、作品集、文档、登陆页面等主题!或者,在 GitHub 上搜索 用于更多入门项目。
¥Explore our themes and starters showcase where you can browse themes for blogs, portfolios, documentation, landing pages, and more! Or, search on GitHub for even more starter projects.
¥Next Steps
成功!现在你已准备好开始使用 Astro 进行构建!🥳
¥Success! You are now ready to start building with Astro! 🥳
以下是我们建议接下来探索的一些主题。你可以按任何顺序阅读它们。你甚至可以暂时离开我们的文档,然后去玩新的 Astro 项目代码库,每当你遇到麻烦或有疑问时就回到这里。
¥Here are a few topics that we recommend exploring next. You can read them in any order. You can even leave our documentation for a bit and go play in your new Astro project codebase, coming back here whenever you run into trouble or have a question.