Astro 起步
环境准备
在开始之前,确认你的电脑已经具备以下环境。
- Node.js 版本 18.17.1 或更高(推荐使用最新的 LTS 版本)。
- 一个终端(Windows 上可用 PowerShell 或 CMD)。
- 一个代码编辑器,推荐 VS Code,并安装 Astro 官方插件可获得语法高亮。
在终端里输入下面命令,可以查看 Node 版本。
node -v
如果提示找不到命令,说明还没有安装 Node.js,先去官网下载安装包完成安装即可。
创建项目
Astro 提供了官方脚手架,最省事的方式是用下面的命令。
npm create astro@latest
执行后,终端会出现一系列交互问题。
- 选择「Empty」空项目模板,适合从零学习。
- 输入项目名称,例如
my-astro-blog。 - 是否安装依赖,选「Yes」。
- 是否初始化 Git,按自己需要选择。
如果不想被提问打断,也可以一步到位。
npm create astro@latest my-astro-blog -- --template empty
命令跑完后,进入项目目录。
cd my-astro-blog
npm run dev
终端会输出一个本地地址,通常是 http://localhost:4321,在浏览器打开就能看到 Astro 的欢迎页。
你的第一个页面
用脚手架生成的项目默认只有一个 index.astro 示例页,我们把它清空,写一个最小页面。
---
// src/pages/index.astro
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的第一个 Astro 站点</title>
</head>
<body>
<h1>你好,Astro</h1>
<p>这是用 Astro 写出的第一个页面。</p>
</body>
</html>
保存后,浏览器会自动刷新,你就能看到这段文字。
下一节认识 Astro 的内置全局对象:Astro 全局对象(/528.html)。