使用 Deno 构建 Astro 网站
Astro 是一款现代 Web 框架，专注于内容为中心的网站，它利用岛屿架构，默认情况下向客户端发送零 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 服务器
更新索引页面以列出所有恐龙
我们的应用程序将显示有关各种恐龙的信息。要创建的第一个页面将是索引页面，它列出指向我们“数据库”中所有恐龙的链接。
首先，让我们创建将在应用程序中使用的 data。在本例中，我们将在 json 文件中硬编码数据，但在实践中，您可以使用任何数据存储。我们将在项目的根目录下创建一个 data 文件夹，然后创建一个 dinosaurs.json 文件，其中包含 此文本。
⚠️️ 在本教程中，我们硬编码了数据。但是，您可以连接到 各种数据库 甚至使用 像 Prisma 这样的 ORM 与 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。
🚨️ 隆重推出 学习 Deno。 🚨️
查看我们的新教程系列“学习 Deno”，学习如何使用 Deno 的 一体化工具链、Web 平台 API 和 Deno 命名空间 API 等等，通过简短的视频学习。