Astro的第一行代码
创建第一个 Astro 项目，理解 .astro 文件的语法结构，跑起你的第一个页面。
在这一章里，我们要完成两件大事：
- 创建一个 Astro 项目，在浏览器中看到 “Hello Astro”。
- 理解
:mark[.astro]{color="accent"}文件的语法结构，搞清楚它到底是个什么东西。
如果你之前只写过 HTML/CSS/JS，从来没有碰过任何前端框架，别担心——Astro 的学习曲线非常友好，我们一步一步来。
前置知识
在开始之前，请确认你已经：
- 完成第 0 章（了解 Astro 的基本理念）
- 安装了 Node.js 18+（在终端运行
node -v可以查看版本） - 会使用终端（命令行）执行基本命令
步骤详解
Astro 官方提供了一个脚手架工具，只需要一条命令就能创建一个新项目。
在终端中运行：
npm create astro@latest这条命令下载astro的安装包，完成后会启动一个交互式向导，引导你完成项目创建。下面是对每个选项的解释：
- Where should we create your new project? → 键盘直接输入
./my-astro-site（表示在当前目录下创建my-astro-site文件夹） - How would you like to start your new project? → 选择 “A basic, helpful starter project”（推荐，包含一些最佳实践配置）
- Install dependencies? → 选择 Yes（自动安装项目依赖）
- Initialize a new git repository? → 选择 Yes（可选，初始化 Git 仓库方便版本管理）
等待命令执行完毕，你就拥有了一个全新的 Astro 项目！
项目创建完成后，我们需要进入项目目录并启动开发服务器：
cd my-astro-sitenpm run devcd my-astro-site 是进入刚才创建的项目文件夹，npm run dev 则是启动 Astro 的开发服务器。
如果失败了，有可能是依赖没安装成功，手动安装后再启动:
npm installnpm run dev看到终端输出类似下面的信息，就说明启动成功了：
astro v6.4.4 ready in 886 ms
┃ Local http://localhost:4321/
┃ Network use --host to expose打开浏览器，访问 http://localhost:4321 ，你应该能看到 Astro 的默认欢迎页面。
Astro 的开发服务器支持热更新（Hot Reload）。这意味着你修改代码保存后，浏览器会自动刷新，不需要手动按 F5。这个特性在开发过程中非常省心。
现在我们来揭开 .astro 文件的神秘面纱。用代码编辑器打开项目中的 src/pages/index.astro 文件，你会看到类似下面的内容：
---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---
<Layout>
<Welcome />
</Layout>让我们逐行解析这个文件的结构：
--- 代码围栏（Frontmatter）
文件最上方的 --- 之间的区域叫做 frontmatter script（代码围栏）。这里面的 JavaScript/TypeScript 代码在构建时运行，而不是在浏览器中运行。也就是说，用户永远看不到这段代码，他们只能看到代码执行后的结果。
模板区域
--- 下方的部分看起来就是普通的 HTML，对吧？没错，但它支持一些”超能力”：
- 在
<Welcome />下方增加一行：<h1>Hello {name}!</h1>，在两个---的之间增加一行：const name = "Astro"; - 表达式
{...}：像{name}这样的语法，构建时会把变量的值插入到 HTML 中。上面的例子最终会输出<h1>Hello Astro!</h1>。 - 后面我们会看到，你可以在模板中使用 JavaScript 表达式。
没有 React，没有 Vue
注意，这里没有组件、没有钩子、没有虚拟 DOM——就是 HTML，只是多了一些便利功能。这也是 Astro 对初学者特别友好的原因：你已有的 HTML 知识几乎可以直接迁移过来。
光看不练假把式，我们来动手改一改这个页面。把 src/pages/index.astro 的内容替换成下面这样：
---
const name = "Astro";
const hobbies = ["coding", "reading", "gaming"];
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>Hello Astro</title>
</head>
<body>
<h1>你好，{name}！</h1>
<p>这是我的第一个 Astro 网站。</p>
<h2>我的爱好：</h2>
<ul>
{hobbies.map(hobby => <li>{hobby}</li>)}
</ul>
</body>
</html>保存文件后，浏览器会自动刷新（记得确认开发服务器还在运行）。你应该能看到一个带有爱好列表的页面。
这里有两个值得注意的地方：
- JavaScript 表达式可以直接用在模板中：
hobbies.map(...)是一个普通的 JavaScript 数组方法，Astro 允许你直接在模板里使用它。 - 这一切都在构建时运行：
map()的执行发生在服务器/构建阶段，最终输出到浏览器的是纯静态 HTML，没有任何 JavaScript 开销。
核心概念深入
通过上面的练习，我们来总结一下 .astro 文件的核心特点：
| 特性 | 说明 |
|---|---|
| ”HTML with superpowers” | .astro 文件本质上就是 HTML，但增加了代码围栏和表达式等能力 |
| Frontmatter 在构建时运行 | --- 中的代码在服务器端/构建阶段执行，浏览器看不到 |
表达式 {...} 在构建时求值 | 模板中的表达式会被计算并替换为具体的值 |
| 输出是纯静态 HTML | 最终部署到网站的只有 HTML、CSS 和（你显式添加的）JS |
如果你之前接触过 PHP，会发现这个概念有些相似：都是“服务器端模板”的思路——在服务器上运行代码，生成 HTML，然后把 HTML 发给浏览器。只不过 Astro 是为了静态站点生成而设计的，而不是动态服务端渲染。
本章代码完整版
查看完整代码
以下是本章最终版本的 src/pages/index.astro：
---
const name = "Astro";
const hobbies = ["coding", "reading", "gaming"];
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>Hello Astro</title>
</head>
<body>
<h1>你好，{name}！</h1>
<p>这是我的第一个 Astro 网站。</p>
<h2>我的爱好：</h2>
<ul>
{hobbies.map(hobby => <li>{hobby}</li>)}
</ul>
</body>
</html>本章小结
恭喜！你已经完成了 Astro 的入门第一步。回顾一下我们学到了什么：
- 学会了用
npm create astro@latest创建 Astro 项目 - 理解了
.astro文件的两段式结构：frontmatter 代码围栏 + HTML 模板 - 学会了在模板中使用 表达式
{...}来动态输出内容 - 知道 Astro 的开发服务器支持热更新，修改代码后浏览器自动刷新
挑战练习
光看不练等于白学。试着完成下面这个练习：
创建一个名为
src/pages/about.astro的新页面，内容包含：
- 你的名字
- 一段简短的自我介绍
- 一个包含 3 项技能的列表
提示：参考
index.astro的结构，Astro 会自动把src/pages/下的.astro文件映射为对应的页面路由。创建完成后，访问 http://localhost:4321/about 就能看到你的新页面！