六维教程

Astro 起步

环境准备

在开始之前,确认你的电脑已经具备以下环境。

  • Node.js 版本 18.17.1 或更高(推荐使用最新的 LTS 版本)。
  • 一个终端(Windows 上可用 PowerShell 或 CMD)。
  • 一个代码编辑器,推荐 VS Code,并安装 Astro 官方插件可获得语法高亮。

在终端里输入下面命令,可以查看 Node 版本。

node -v

如果提示找不到命令,说明还没有安装 Node.js,先去官网下载安装包完成安装即可。

创建项目

Astro 提供了官方脚手架,最省事的方式是用下面的命令。

npm create astro@latest

执行后,终端会出现一系列交互问题。

  1. 选择「Empty」空项目模板,适合从零学习。
  2. 输入项目名称,例如 my-astro-blog
  3. 是否安装依赖,选「Yes」。
  4. 是否初始化 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)。

上一篇
Astro 教程
下一篇
Astro 全局对象