使用 Deno 构建一个简单的博客站点

面试官:小伙子,你的数组去重方式惊艳到我了

Deno,一个新兴的 JavaScript 资源平台,使得开发者在构建应用程序时能够更轻松地管理依赖项,同时提供了一个更安全的环境。本文将介绍如何使用 Deno 构建一个简单的博客站点,并演示其核心功能。

安装 Deno

安装 Deno 很简单,只需要进入 Deno 官网,按照指南下载安装包并运行即可。Deno 仅支持 macOS,Linux 和 Windows 操作系统。

安装完成后,可以在终端中输入以下命令检查是否成功安装:

---- ---------

如果安装成功,则会输出 Deno 的版本号。

创建博客站点

创建一个新的文件夹,命名为 "my-blog",并在其中创建一个空的 index.html 文件。

在终端中进入这个文件夹,输入以下命令:

---- --- ----------- ------------ -----------------------------------------

这个命令将启动一个本地文件服务器,监听当前文件夹里的所有文件。现在打开浏览器,输入 "http://localhost:4507",你会看到一个文件列表。这是因为我们还没有在文件夹中添加任何文件。

接下来,我们需要创建一个简单的博客页面。在 index.html 文件中添加以下代码:

--------- -----
----- ----------
------
  ----- ----------------
  --------- ------------
-------
------
  --------
    ------ ---------
  ---------
  ------
    ---------
      -------- ---- ----------
      -------- ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- ---- ----- -------- ---------- ------ ------ ---- ------- -------- ----- ---- --------- ----- -- ---- ----- ------- -- ------- --- --------- --- ------- --- --- --- -------- ------- ---- ---- ------- -----------
      ----- ------------- ------------
    ----------
  -------
  --------
    - ---- -- ----
  ---------
-------
-------

这个页面包括一个标题、一篇博客文章和页脚。我们需要一个服务器来提供此页面的内容。

在终端中打开一个新的窗口,输入以下代码:

------ - ----- - ---- ---------------------------------------

----- ------ - ------- ----- ---- ---

--------------------------------------

--- ----- ------ --- -- ------- -
  ------------- ----- ---- ---
-

这个代码片段会启动一个服务器,它会在浏览器中提供刚刚创建的 HTML 文件。我们可以在浏览器中输入 "http://localhost:8000" 查看此页面的效果。

使用 Markdown

许多博客站点使用 Markdown 语言来编写博客文章,因为它易于使用,并且具有良好的可读性。Deno 提供了一个名为 "marked" 的 Markdown 解析器,我们可以使用它来在我们的博客站点中使用 Markdown 文件。

在终端中输入以下命令安装 "marked":

---- ------- ------------ ------------- ---------------------------------

此命令将克隆 "marked" 代码库,并将其安装为 Deno 的全局模块。

现在,我们可以创建一个 Markdown 文件,并使用 "marked" 将其转换为 HTML。在 my-blog 文件夹中创建一个名为 "first-post.md" 的文件,并添加以下内容:

- -- ----- ---- ----

---- -- -- ---- ----- ---- ----- --- ---- ------- -- -------------

----- ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- ---- ----- -------- ---------- ------ ------ ---- ------- -------- ----- ---- --------- -----

我们需要将这个 Markdown 文件转换为 HTML,并将其插入我们的博客页面中。在 server.js 文件中,我们可以添加以下代码:

------ - ----- - ---- ---------------------------------------
------ - -------- - ---- ------------------------------------

----- ------ - ------- ----- ---- ---

--------------------------------------

----- ---- - ----- --------------------------------

--- ----- ------ --- -- ------- -
  -- -------- --- -------------- -
    ----- ------------ - ----- -----------------------------------
    ----- ----------- - -----------------------

    ------------- ----- ---------------------- ----------------------- ---
  - ---- -
    ------------- ----- ---- ---
  -
-

现在,在浏览器中输入 "http://localhost:8000/first-post",你会看到我们刚刚创建的博客文章,它是由 Markdown 文件自动转换为 HTML 内容的。

使用模板引擎

使用模板引擎可以更快速地建立博客站点,并使代码更具可维护性。Deno 中有许多模板引擎可供使用,但在本例中,我们将使用 ejs。

在终端中输入以下命令安装 "ejs":

---- ------- ------------ ------------- ------------------------------

此命令将克隆 "ejs" 代码库,并将其安装为 Deno 的全局模块。

现在,我们可以为我们的博客站点创建一个模板,并通过 ejs 将其渲染。在 my-blog 文件夹中创建一个名为 "post.ejs" 的文件,并添加以下内容:

--------- -----
----- ----------
------
  ----- ----------------
  ---------- ----- ----------
-------
------
  --------
    ------- ----- -------
  ---------
  ------
    ---------
      --- ------- --
    ----------
  -------
  --------
    - ---- -- ----
  ---------
-------
-------

这个模板由标题和内容组成。现在,我们可以将其渲染为 HTML 并将其插入我们的博客页面中。在 server.js 文件中,我们可以添加以下代码:

------ - ----- - ---- ---------------------------------------
------ - -------- - ---- ------------------------------------
------ - ------- - ---- ---------------------------------

----- ------ - ------- ----- ---- ---

--------------------------------------

----- --------- - ----- --------------------------------
----- ------------ - ----- ------------------------------

----- ---------- - ----------------------

--- ----- ------ --- -- ------- -
  -- -------- --- -------------- -
    ----- ------------ - ----- -----------------------------------
    ----- ----- - --- ----- ---- ------
    ----- ------- - -----------------------
    ----- ----------- - ------------ ------ ------- ---

    ------------- ----- --------------------------- ----------------------- ---
  - ---- -
    ------------- ----- --------- ---
  -
-

现在,我们可以使用 ejs 模板引擎快速创建博客文章,并渲染成 HTML 嵌入到我们的博客站点中。

结论

本文介绍了如何使用 Deno 构建一个简单的博客站点,并演示了它的核心功能,如 Markdown 解析器和模板引擎。我们还演示了如何使用 Deno 中的模块和工具来构建和管理我们的应用程序。

Deno 提供了一个安全的环境和有用的构建工具,可以帮助我们更轻松地开发和部署应用程序。我们希望这篇文章能够为你提供学习和指导意义,使你能够更好地利用 Deno 构建你自己的应用程序。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67082f02d91dce0dc86ed3a2


猜你喜欢

  • 在 Express.js 中使用 Stylus

    前言 在现代的 Web 开发中,CSS 已经成为了一门必不可少的技术。但是,手写样式表可以很快变得混乱不堪,特别是当样式表的规模变得越来越大时。因此,一种新的高效的样式表语言 - Stylus,应运而...

    8 天前
  • SASS 中如何编写自定义函数

    简介 SASS 是一种 CSS 预处理器,它增加了原生 CSS 所不具有的一些功能,例如:嵌套、变量、Mixin、继承等。但是有时候,我们会发现 SASS 自带的函数无法满足我们的需求,这时候就需要编...

    8 天前
  • 在 Next.js 中使用 React Hook Form 进行表单验证和处理

    React Hook Form 是一个轻量级的库,用于处理表单验证和处理。它使用 React Hooks,使得它更加容易集成到应用程序中。在这篇文章中,我们将学习如何在 Next.js 中使用 Rea...

    8 天前
  • Docker 部署静态网站:从设置 Nginx 服务器到部署 HTML 文件

    随着互联网的不断发展和普及,静态网站已经成为了网络世界的重要组成部分。在开发和部署静态网站过程中,Docker 已经成为了越来越多的前端开发者的首选。本文将详细介绍如何使用 Docker 部署静态网站...

    8 天前
  • 如何使用 ESLint 自定义 React Hooks 校验规则

    React Hooks 是 React 16.8 版本新增加的特性,可以在不使用类组件的情况下,将状态逻辑的复用封装为独立的函数,使得组件的代码变得更加简洁和易于理解。

    8 天前
  • 如何在 LESS 中使用 @mixin 实现多次使用的样式

    LESS 是一种基于 CSS 语言增强的预处理器,它提供了许多方便的语法和能力来协助我们编写样式。其中一个强大的功能是使用 @mixin 可以实现一个样式的复用,减少代码冗余和维护成本。

    8 天前
  • Redis 中如何实现数据分片?

    前言 在大型应用系统中,单一 Redis 实例所能够承载的数据量和并发请求数,很容易到达瓶颈,影响系统的性能。为了解决这个问题,可以采取数据分片的思路,将 Redis 数据库分成多个部分存储在不同的 ...

    8 天前
  • Vue.js 中 computed 和 watch 的区别及应用场景

    引言 Vue.js 是一个流行的前端框架,它提供了多种方式来处理数据。其中,computed 和 watch 是两种常用的技术,它们都可以用于监视数据变化并作出响应。

    8 天前
  • 如何应对 Headless CMS 中的安全隐患

    随着头部 CMS(如 WordPress)以及客户端(尤其是 JavaScript 框架)的之间渐进式的分离,Headless CMS 的使用逐渐普及。Headless CMS 允许开发人员使用任何前...

    8 天前
  • 使用 Deno 和 Steam API 获取游戏数据

    最近,随着 Deno 的推出,前端工程师们可以更加轻松地使用 JavaScript 来构建后端应用程序。本文将介绍如何使用 Deno 和 Steam API 获取游戏数据,并提供示例代码。

    8 天前
  • 在 GraphQL 中使用事务隔离技术的技巧及实现方法

    前言 在现代 Web 应用程序中,GraphQL 已经成为了很多开发者的首选技术栈之一。它使得前端和后端可以更加灵活地交互数据和进行查询操作,同时还可以有效地优化数据请求和响应的速度。

    8 天前
  • 如何在 Enzyme 测试中模拟 React Native 的平台 API?

    简介 Enzyme 是 React 应用程序的 JavaScript 测试实用程序,它专注于测试 React 组件的输出。这意味着它并不能模拟 React Native 提供的许多平台 API,这对于...

    8 天前
  • 使用 Mocha 和 Chai 测试 GraphQL 服务器

    GraphQL 是一种用于 API 构建的查询语言和运行时。它的优点之一是能够提供一个强大的类型系统,让开发者能够精确描述数据,并使 API 更加可发现并且易于使用。

    8 天前
  • 如何应用无障碍技术优化银行网站的用户体验

    银行网站是人们日常生活中不可缺少的一部分,它们提供了各种金融服务和信息,但很多银行网站缺乏无障碍技术,给残障人士等特殊人群带来了使用上的困难。为了满足无障碍要求,本文介绍如何应用无障碍技术,优化银行网...

    8 天前
  • Jest 在 Angular 项目中的使用方法

    Jest 是一个流行的 JavaScript 测试框架,它是由 Facebook 开源的,并且被广泛用于 React 和 Node.js 项目中。在 Angular 项目中使用 Jest 能够提高我们...

    8 天前
  • 如何在 Express.js 环境下使用 Webpack

    简介 Express.js 是一个基于 Node.js 的开源轻量级 web 开发框架,它被广泛使用于开发 RESTful API。Webpack 是一个强大的打包工具,可以将多个 JavaScrip...

    8 天前
  • 响应式设计中的跨浏览器兼容性解决方案

    随着移动设备和桌面设备日益增多,响应式设计已经成为了现代Web开发中必不可少的技能。但是,在实现响应式设计的过程中,遇到各种浏览器兼容性问题也是不可避免的。本文将为您介绍一些跨浏览器兼容性解决方案,以...

    8 天前
  • 在 React 中使用 Immutable.js 提高性能

    在开发 React 应用程序时,性能是关键因素之一。一个普遍的问题是在应用程序状态中进行更新的同时不会触发不必要的重新渲染。这正是 Immutable.js 所擅长的,它提供了一种不可变数据结构,从而...

    8 天前
  • 区分 webpack-dev-server 与 webpack-dev-middleware

    介绍 在前端开发中,使用webpack来构建项目已经非常常见。为了提高开发效率,webpack社区提供了webpack-dev-server和webpack-dev-middleware两种工具。

    8 天前
  • 使用 Next.js 优化用户体验的最佳实践

    对于现代 Web 应用程序,优化用户体验是至关重要的。许多现代应用程序都采用了前端框架,这些框架通常需要大量的配置和系统配置来为用户提供最佳体验。Next.js 是一个非常流行的 React 框架,它...

    8 天前

相关推荐

    暂无文章