使用 Deno 构建 Astro
Astro 是一个专注于以内容为中心的现代 Web 框架，它利用 Islands 架构，默认情况下向客户端发送零 JavaScript。随着最近 Deno 2 的发布，现在 向后兼容 Node 和 npm，使用 Astro 和 Deno 的体验得到了改善。
我们将介绍如何使用 Deno 构建一个简单的 Astro 项目
随意直接跳到 源代码 或按照下面的步骤操作！
搭建 Astro 项目 跳转到标题
Astro 提供了一个 CLI 工具来快速搭建新的 Astro 项目。在您的终端中，运行命令 deno init --npm 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 命令安装包。因此，让我们使用标志 --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 服务器
更新索引页以列出所有恐龙 跳转到标题
我们的应用程序将显示有关各种恐龙的事实。要创建的第一个页面将是索引页面，其中列出了我们“数据库”中所有恐龙的链接。
首先，让我们创建将在应用程序中使用的数据。在本示例中，我们将数据硬编码在一个 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。