使用 Deno 构建 Astro
Astro 是一个专注于以内容为中心的现代 Web 框架，它利用了岛屿架构，默认情况下不向客户端发送 JavaScript。随着最近发布的 Deno 2，现在 向后兼容 Node 和 npm，使用 Astro 和 Deno 的体验得到了改善。
我们将介绍如何使用 Deno 构建一个简单的 Astro 项目
您可以直接跳到源代码，或继续阅读以下内容！
搭建 Astro 项目骨架 跳到标题
Astro 提供了一个 CLI 工具来快速搭建一个新的 Astro 项目。在您的终端中，运行命令 deno init --npm astro@latest 以使用 Deno 创建一个新的 Astro 项目。对于本教程，我们将选择“Empty”（空）模板，以便我们可以从头开始，并跳过安装依赖项，以便我们稍后可以使用 Deno 安装它们
deno init --npm 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 命令安装软件包。因此，让我们使用 --allow-scripts 标志运行 deno install 来执行任何 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 服务器
配置格式化工具 跳到标题
deno fmt 支持使用 --unstable-component 标志格式化 Astro 文件。要使用它，请运行此命令
deno fmt --unstable-component
要配置 deno fmt 始终格式化您的 Astro 文件，请将此内容添加到您的 deno.json 文件的顶层
"unstable": ["fmt-component"]
更新主页以列出所有恐龙 跳到标题
我们的应用程序将显示各种恐龙的事实。要创建的第一个页面是索引页，它列出了我们“数据库”中所有恐龙的链接。
首先，让我们创建将在应用程序中使用的数据。在此示例中，我们将数据硬编码在一个 json 文件中，但您可以在实践中使用任何数据存储。我们将在项目根目录中创建一个 data 文件夹，然后创建一个 dinosaurs.json 文件，其中包含此文本。
⚠️️ 在本教程中，我们硬编码数据。但您可以使用 Deno 连接到各种数据库，甚至使用像 Prisma 这样的 ORM。
一旦我们有了数据，让我们创建一个列出所有恐龙的索引页。在 ./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。