用 Deno 构建自己的静态博客-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端技术发展的今天，越来越多的开发者选择使用 Deno 这一相对较新的 TypeScript 运行时，在开发 web 应用程序和工具时，它提供了面向应用程序的特性和性能改进。本文将介绍如何使用 Deno 构建自己的静态博客，既能巩固 Deno 的基础知识，也能更好的记录和分享自己的技术经验。

静态博客的优势

静态博客是一种使用静态页面生成器并将生成的 HTML 文件部署到 web 服务器的博客类型。与其他博客系统不同，它不需要一个完整的后端系统支撑，只需要一个纯净的静态页面包含 markdown 文件，博客内容经常变化的用户可以使用现代化 CI/CD 工具将任何更新自动部署到 web 服务器上。

1.安全与稳定：使用静态博客的好处之一是其相对更安全和稳定。它不像像 WordPress 这样的动态博客，被攻击者利用来强制注入代码和飞行内容。静态博客是一堆静态 html 文件，因此没有被黑漆漆的 php 代码和数据库输入机会，所以不会被入侵。

2.速度和性能：静态博客无需数据库，因此下载速度比动态博客快得多。同时，在浏览器中运行的 HTML、CSS 和 JavaScript 代码越少，加载时间就越短。

Deno 简介

Deno 是一个由 Ryan Dahl 在 2018 年发布的一个基于 V8 引擎的 TypeScript 运行时。Deno 是 Node.js 的替代品，但它具有许多 Node.js 没有的特点，例如：

支持 TypeScript，无需编译即可运行
自带现代配置文件成语 (例如 JSON 和 TypeScript)
支持异步和同步 I/O，无需回调
安全性更强

Deno 使用原生支持语法的 Typescript ，使用 Rust 编写其内核，并集成了现代 Web API，例如 Fetch 和 WebSockets。它还包含一个高效的 ES 模块加载程序和一个自由制定的打包工具。

搭建 Deno 静态博客

准备工作

在开始之前，确保您的 Deno 版本是最新的，否则可能会在此处遇到问题。可以通过运行以下命令来验证 Deno 版本：

$ deno --version

在构建静态博客之前，您需要确保安装了下列依赖项：

Deno
Markdown-to-HTML 转换器
Github Pages（也可以使用其他的静态托管平台）

$ deno install --global markdown-serve

步骤 1 - 创建博客项目

首先，您需要创建一个基本的博客项目。您可以使用 Git 仓库，如：codesandbox 来完成这项任务。

$ mkdir my-blog
$ cd my-blog
$ git init

步骤 2 - 创建博客文章

在 my-blog 文件夹中，创建一个名为 my-first-post.md 的 markdown 文件。

# My First Post

This is my first blog post.

将 MarkDown 文件用命令行工具转换为 HTML。

$ markdown-serve my-first-post.md

步骤 3 - 创建 main.ts

在 my-blog 文件夹中，创建一个名为 main.ts 的 TypeScript 文件。在这里，您将读取 markdown 文件并将其渲染为 HTML。

import * as path from "https://deno.land/std/path/mod.ts";

const encoder = new TextEncoder();

const markdown = new TextDecoder().decode(
  await Deno.readFile("./my-first-post.md")
);

const html = `
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>My First Blog</title>
   </head>
   <body>
     ${markdown}
   </body>
 </html>
`;

await Deno.writeFile(
  path.join(Deno.cwd(), "index.html"),
  encoder.encode(html)
);

以上代码：

使用 Deno 内置的 TextEncoder 和 TextDecoder 将 UTF-8 字符串编码为 Uint8Array 数组，并将其解码回字符串。
将 markdown 文件渲染为 HTML 字符串。
将 HTML 字符串编码为 Uint8Array 数组，并将其写入 index.html 文件。

在根目录中，运行：

$ deno run main.ts

这个 DENO 命令会渲染 my-first-post.md 文件，并生成一个名为 index.html 的 HTML 文件。

步骤 4 - 生成多个 HTML 文件

如果要创建多篇文章，你要将 markdown 文件渲染为 HTML。可以尝试编写一个用于渲染 HTML 文件的辅助函数。

async function generateHtml(file: string) {
  const name = path.parse(file).name;
  const markdown = new TextDecoder().decode(await Deno.readFile(file));

  const html = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>${name}</title>
    </head>
    <body>
      ${markdown}
    </body>
  </html>
  `;

  await Deno.writeFile(
    path.join(Deno.cwd(), `${name}.html`),
    encoder.encode(html)
  );
}

这个函数将 markdown 文件渲染为 HTML，并在根目录中创建一个 HTML 文件。

步骤 5 - 自动生成静态博客

通常情况下，您将需要快速生成多个 HTML 文件。您可以使用 Deno 的 walkSync 函数来列出文件夹中的所有 markdown 文章，并使用 Promise.all() 函数在每个 markdown 文件上调用 generateHtml() 函数。

for await (const entry of Deno.readDir(path.join(Deno.cwd(), "posts"))) {
  if (entry.isFile && entry.name.endsWith(".md")) {
    const file = path.join(Deno.cwd(), "posts", entry.name);
    promises.push(generateHtml(file));
  }
}

await Promise.all(promises);

这个程序读取 posts 该文件夹中的所有 .md 文件，并使用 Promise.all() 函数在每个 markdown 文件上调用 generateHtml()

步骤 6 - 写入博客文章

最后，您需要将您的博客文章写入 posts 文件夹。我们之前生成的 markdown 文件可以用入门样例。

# My Awesome Tech Blog

Hello, world! Welcome to my awesome blog.

你使用仓库工具，将新生成的 markdown 文件放进仓库，然后提交更改。

$ git add .
$ git commit -m "My first commit"

推送更改。

$ git push

现在您已经成功搭建了一个 Deno 静态博客！

总结

使用 Deno 搭建一个静态博客非常容易，本文介绍了如何完成这个过程。 Deno 带来不少的好处和 Node.js 没有的特性，而静态博客则将您从动态博客的网络安全问题和性能优化方面解放出来，但它同样美好的。

到这里，您已经了解了如何从头开始使用 Deno 构建一个静态博客，并部署到 Github Pages 上。此过程涉及文件系统操作，使用 Deno 中内置的网络库，将 markdown 文件转换为 HTML，以及添加Deploy Hooks，这些都会让你彻底了解静态博客的原理和基本操作方式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a98015add4f0e0ff2dff53

用 Deno 构建自己的静态博客

引言