返回

Deno 入门浅谈（一）：用 Deno 构建静态网站

前端

随着 JavaScript 生态系统的不断发展，Deno 作为一项革命性的 JavaScript 运行时环境脱颖而出，以其安全、快速的特性吸引了众多开发者的目光。为了进一步简化 Deno 的开发流程，Fresh 框架应运而生，为构建现代化的静态网站提供了更加便捷的解决方案。在本文中，我们将详细介绍如何使用 Fresh 创建一个静态网站，带领您深入了解 Fresh 的强大功能。

Fresh 简介

Fresh 是一个专为 Deno 设计的现代化 Web 框架，它基于 Oak 和 Bun 这两个优秀的框架构建而成。Fresh 具有以下几个突出的特点：

  • 具有现代化的架构：Fresh 采用了模块化设计，使得代码更加易于维护和扩展。
  • 内置了 TypeScript 支持：Fresh 支持 TypeScript，开发者可以轻松地使用 TypeScript 进行开发，并获得类型检查和代码重构等功能。
  • 提供了丰富的组件库：Fresh 提供了丰富的组件库，这些组件已经过预先构建和测试，开发者可以轻松地使用它们来构建自己的网站。
  • 具有强大的路由系统：Fresh 内置了强大的路由系统，可以帮助开发者轻松地定义路由规则，并轻松地处理不同的请求。

创建 Fresh 项目

首先，我们需要创建一个新的 Fresh 项目。我们可以使用 Deno 命令行工具来创建一个新的项目：

deno create fresh my-fresh-project

执行以上命令后，会在当前目录下创建一个新的项目文件夹 my-fresh-project。

项目结构

Fresh 项目的结构如下：

my-fresh-project
├── app.ts
├── fresh.gen.ts
├── fresh.lock.json
├── import_map.json
├── public
│   └── index.html
└── routes
    ├── about.tsx
    └── index.tsx
  • app.ts 是应用程序的入口文件，负责初始化应用程序并启动服务器。
  • fresh.gen.ts 是 Fresh 自动生成的 TypeScript 定义文件，它包含了 Fresh 的所有类型定义。
  • fresh.lock.json 是 Fresh 的依赖锁定文件，它记录了 Fresh 项目所依赖的第三方库的版本信息。
  • import_map.json 是 TypeScript 的导入映射文件，它告诉 TypeScript 如何解析和加载模块。
  • public 目录是静态文件目录，它包含了网站的静态文件，如 HTML、CSS 和 JavaScript 文件。
  • routes 目录是路由目录，它包含了网站的路由文件，这些文件定义了不同的路由规则和对应的处理函数。

搭建网站

现在，我们可以开始使用 Fresh 构建我们的网站了。首先，我们需要在 routes/index.tsx 文件中定义我们的主页路由：

import { render } from "fresh";

export default async () => {
  return render("welcome");
};

这段代码定义了主页路由，它将使用 welcome 模板来渲染页面。

接下来，我们需要在 public 目录下创建 welcome.html 文件，并添加以下 HTML 代码：

<h1>Welcome to My Fresh Website</h1>

<p>This is a simple website built with Fresh.</p>

这段 HTML 代码定义了主页的模板。

最后，我们需要在 app.ts 文件中启动服务器：

import { serve } from "fresh";

serve();

执行以上命令后，服务器将在 8000 端口启动。

运行网站

在浏览器中访问 http://localhost:8000，即可看到我们刚刚构建的网站。

总结

通过本文，我们已经了解了如何使用 Fresh 构建一个静态网站。Fresh 是一个非常简单易用的框架，它可以帮助开发者快速地构建现代化的静态网站。