使用 Deno 构建 Astro 站点
Astro 是一个现代 Web 框架，专注于以内容为中心的网站，它利用 islands 架构，默认情况下向客户端发送零 JavaScript。随着最近发布的 Deno 2，现在向后兼容 Node 和 npm，使用 Astro 和 Deno 的体验得到了提升。
Deno 2 向后兼容 Node 和 npm，允许你使用你喜欢的 JavaScript 框架。 观看完整的 Deno 2 发布视频。
我们将介绍如何使用 Deno 构建一个简单的 Astro 项目
你可以随意直接跳到源代码，或者按照下面的步骤操作！
🚨️ 今天就试试 Deno 2。 🚨️
Deno 提供对 Node/npm 的向后兼容性、内置包管理、一体化零配置工具链、原生 TypeScript 支持等等。
搭建 Astro 项目
Astro 提供了一个 CLI 工具来快速搭建一个新的 Astro 项目。在你的终端中，运行命令 deno -A npm:create-astro@latest 以使用 Deno 创建一个新的 Astro 项目。在本教程中，我们将选择 “Empty” 模板，以便我们可以从头开始，并跳过安装依赖项，以便我们稍后可以使用 Deno 安装它们
deno -A npm:create-astro@latest
astro Launch sequence initiated.
dir Where should we create your new project?
./dino-app
tmpl How would you like to start your new project?
Empty
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strict
deps Install dependencies?
No
◼ No problem!
Remember to install dependencies after setup.
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ TypeScript customized
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./dino-app
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰──🍫─╯从 Deno 2 开始，Deno 还可以使用新的 deno install 命令安装包。因此，让我们运行 deno install 命令，并使用 --allow-scripts 标志来执行任何 npm 生命周期脚本
deno install --allow-scripts要查看我们有哪些命令，让我们运行 deno task
deno task
Available tasks:
- dev (package.json)
astro dev
- start (package.json)
astro dev
- build (package.json)
astro check && astro build
- preview (package.json)
astro preview
- astro (package.json)
astro我们可以使用 deno task dev 启动 Astro 服务器
更新首页以列出所有恐龙
我们的应用程序将显示关于各种恐龙的事实。要创建的第一个页面将是首页，其中列出了我们 “数据库” 中所有恐龙的链接。
首先，让我们创建将在应用程序中使用的数据。在这个例子中，我们将把数据硬编码在一个 json 文件中，但在实践中你可以使用任何数据存储。我们将在项目的根目录下创建一个 data 文件夹，然后创建一个 dinosaurs.json 文件，并将这段文本放入其中。
⚠️️ 在本教程中，我们硬编码了数据。但是你可以连接到各种数据库，甚至可以将 ORM（如 Prisma）与 Deno 一起使用。
一旦我们有了数据，让我们创建一个首页，列出所有的恐龙。在 ./src/pages/index.astro 页面中，让我们编写以下代码
---
import data from "../../data/dinosaurs.json";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Dinosaurs</title>
</head>
<body>
<h1>Dinosaurs</h1>
<ul>
{data.map((dinosaur) => (
<li>
<a href={`/${dinosaur.name.toLowerCase()}`}>{ dinosaur.name }</a>
</li>
))}
</ul>
</body>
</html>让我们用 deno task dev 启动服务器，并将浏览器指向 localhost:4321
太棒了！但是当你点击恐龙时，它会 404。让我们修复它。
添加动态 SSR 页面
我们的应用程序将显示关于各种恐龙的事实。为了做到这一点，我们将创建一个动态服务器端渲染（“SSR”）页面，这可以为最终用户提供更好的性能，同时提高页面的 SEO。
接下来，让我们在 /src/pages/ 下创建一个名为 [dinosaur].astro 的新文件。在文件顶部，我们将添加一些逻辑，从我们的硬编码数据源中提取数据，并根据 URL 路径中设置的 dinosaur 参数对其进行过滤。在底部，我们将渲染数据。你的文件应该看起来像这样
---
import data from "../../data/dinosaurs.json";
const { dinosaur } = Astro.params;
const dinosaurObj = data.find((item) => item.name.toLowerCase() === dinosaur);
if (!dinosaurObj) return Astro.redirect("/404");
const { name, description } = dinosaurObj;
---
<h1>{ name }</h1>
<p>
{ description }
</p>⚠️️ Deno 语言服务器目前不支持
.astro文件，因此你可能会遇到虚假的红色波浪线。我们正在努力改善这种体验。
让我们用 deno task dev 运行它，并将浏览器指向 localhost:4321/abrictosaurus
它工作了！
接下来是什么
我们希望本教程能让你很好地了解如何开始使用 Astro 和 Deno 进行构建。你可以了解更多关于 Astro 及其构建网站的渐进式方法。如果你有兴趣替换我们的硬编码数据存储，这里有一些关于使用 Deno 连接到数据库的资源，包括 Planetscale、Redis 等。或者你可以学习如何将你的 Astro 项目部署到 Deno Deploy，或者按照这些指南了解如何将 Deno 自托管到 AWS、Digital Ocean 和 Google Cloud Run。
🚨️ 隆重推出 Learn Deno。 🚨️
查看我们的新教程系列 Learn Deno，通过简短的视频了解如何使用 Deno 的一体化工具链、Web 平台 API 和 Deno 命名空间 API 等等。