1.2 第一个页面

起一个空项目

npm create astro@latest
npm run dev

开发服务器默认在 4321 端口。改文件会热更新，不需要手动刷新。

页面就是文件

src/pages/ 下的文件路径直接对应网址：

文件	网址
src/pages/index.astro	/
src/pages/about.astro	/about/
src/pages/blog/[slug].astro	/blog/任意值/

方括号表示动态路由，具体生成哪些页面由文件里的 getStaticPaths 决定。

组件文件的三段结构

.astro 文件用两条 --- 分成两部分：

---
// 这里在构建期执行，可以取数据、算值
const title = '你好';
---

<!-- 这里是模板，会变成 HTML -->
<h1>{title}</h1>

上面那段代码不会出现在浏览器里。想让它到浏览器执行，要写在 <script> 标签里。

下一步

页面里的内容现在是写死的。下一章讲怎么把它换成 Markdown。