如何使用 NodeJS 构建博客
- Linda Hamilton原创
- 2024-11-01 11:09:301070浏览
只想要代码？访问仓库
如果您想创建一个博客（或者如果您正在考虑重新设计您的博客，尽管您已经两年没有发帖了），您会偶然发现很多选择，这可能会令人难以置信；如果您无意中看到 Josh 关于他的堆栈的最新帖子，很容易会对所显示的堆栈感到不知所措。
但你不应该有这样的感觉，从小事做起是可持续发展的关键
我怎么知道呢？因为我也有那种不知所措的感觉！
目前，该网站已使用 NextJS、Contentful 和 Markdown 完成，虽然向其添加帖子并不特别困难，但维护它却很困难！
自 2021 年以来，我没有添加任何与该网站相关的代码，此时我什至不知道是否能够在本地运行它（而且我什至不愿意尝试）！
为了这个？特别的原因，我想宣讲一个简单的堆栈；经得起时间考验的东西；一些“正常”的东西；那么让我们直接开始吧，好吗？
开始那个项目吧！
请记住，这个项目将非常非常简单，但它应该为您提供良好的基础，让您在此基础上发展并达到天空。
我们将首先在选定的文件夹（对我来说是nodejs-blog）内初始化一个 Node 项目，并安装一些我认为会让我们的生活更轻松的依赖项，例如 Express、EJS、Marked、好用的 ol ' 身体解析器和灰质。
npm init npm install body-parser ejs express marked gray-matter
解释依赖关系
我选择添加 EJS 的原因是为了让事情对我来说更容易一些，通过利用模板并只编写更少的代码。如果您不熟悉，请稍等。太酷了！
对于标记和灰质，这非常简单：markdown 规则，我希望我的帖子有适当的元数据，我计划使用 frontmatter 创建这些元数据。
好吧，说回正事！
现在在您最喜欢的 IDE 中打开您的项目并创建 main.js 文件。我知道我们需要以下路由：/、/:post，并且我们需要在公共文件夹上有相关的内容，因此我们最初的 main.js 可以如下所示：
// main.js
const express = require("express");
const fs = require("fs");
const path = require("path");
const { marked } = require("marked");
const matter = require("gray-matter");
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/", (req, res) => {});
app.get("/:post", (req, res) => {});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
非常简单，对吧？这个想法是在我的主页（或/）上有帖子列表，并且只有我的帖子的单独页面。
是时候以前所未有的方式进行模板化了！
随着基础设置的完成，我们还需要一个基础结构，EJS 将提供它。
首先创建一个名为views的文件夹；这将是您的 pages 的根，可以这么说，这意味着您可以在其中创建一个 home.ejs 和一个 post.ejs 只是为了标记我们将拥有的两种类型的页面。
在views内部创建一个文件夹，命名为partials；您可以将其视为我们的组件，并且您已经可以在此处创建 3 个文件：header.ejs、footer.ejs 和 head.ejs。
这是我们博客的基本结构：2 个页面和 3 个组件，仅此而已。其余的将在 main.js 中处理
偏音
就像我提到的，模板允许我们不必像手动创建每个页面那样重复那么多代码，并且我们的设置使我们在这方面完全放心。
npm init npm install body-parser ejs express marked gray-matter
// main.js
const express = require("express");
const fs = require("fs");
const path = require("path");
const { marked } = require("marked");
const matter = require("gray-matter");
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/", (req, res) => {});
app.get("/:post", (req, res) => {});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
// head.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Here's my blog</title>
</head>
</html>
基本上，常规的头部位于头部，页脚的结束标签和导航栏，以及页眉的开始标签。很简单吧？
意见
现在我们有了组件我们可以让页面运行起来。
// footer.ejs
</main>
</body>
</html>
// header.ejs
<body>
<main>
<header>
<a href="/">Blog</a>
</header>
是的，它看起来很奇怪，但只要知道 include 将部分内容带入我们的视图中，并且有额外的语法使其工作（如果您对它的工作原理感兴趣，请参阅文档）。
但是，庆幸的是，您现在已经与新工具进行了交互！ ？
博客帖子！ ？
在项目的根目录下创建一个 posts 文件夹，并在其中创建第一个 blog-post-1.md，其中包含以下内容：
// home.ejs
<%- include('./partials/head') %>
<%- include('./partials/header') %>
<div>
<h2>The posts:</h2>
<ul>
<% posts.forEach((post)=> { %>
<li>
<a href="<%= post.link %>"><%= post.title %></a>
</li>
<% }) %>
</ul>
</div>
<%- include('./partials/footer') %>
里面的---是我们的frontmatter，你马上就能使用它！
是时候在屏幕上看到一些东西了！
回到我们的main.js，我们首先处理 / 路由。正如我们所看到的，我们希望能够获取我们的帖子并循环它们以在屏幕上显示有关它们的信息。
为了简化内容，我将在每个相关行旁边留下注释，而不是编写大量文本来解释内容！ ？
// post.ejs
<%- include('./partials/head') %>
<%- include('./partials/header') %>
<h1><%= frontmatter.title %></h1>
<p><%= frontmatter.date %></p>
<p><%= frontmatter.author %></p>
<%- content %>
<%- include('./partials/footer') %>
现在在终端中运行 node main.js 并访问 localhost:3000。您应该看到您的 / 路线填充了指向您创建的 Markdown 文件的链接！ ？
这里有很多东西需要消化，所以请自己尝试每一行代码，看看它是否有意义。实际上，尝试做不同的事情！获取帖子的摘要并找到在 home.ejs 文件中显示它的方法。为它疯狂吧！附加图像网址并尝试显示它们。玩吧！
现在，对于 /post 本身：
--- title: "Blog post 1" date: 2024-10-31 author: "Rui Sousa" summary: "Here's the first blog post" --- # A blog post Here's my first blog post!
再次运行node main.js，并选择主页中的链接之一。您应该会看到您的 Markdown 文件呈现为 HTML！
像以前一样，尝试一些东西；将元素添加到 Markdown 并查看它们如何呈现；将新字段添加到 frontmatter 并让它们显示。
您现在是使用 Node 创建的博客的自豪拥有者！ ？
就是这样
我们还有很多事情可以做，但这超出了我们的范围，不是吗？我们得到了一些工作，符合我们的意图，这是完美的。现在轮到你了 ✨ 让它发光 ✨
看看是否可以通过向 head.ejs 传递属性来更改它的信息！理想情况下，选项卡名称将随所选内容而变化。当我们在社交媒体上分享网站时，我们还应该拥有适当的元数据，因此我们还需要在头部中添加 frontmatter 信息。听起来是一个很好的挑战，嗯？ ？
一如既往，如果您有任何疑问，请随时通过 X 与我联系。
以上是如何使用 NodeJS 构建博客的详细内容。更多信息请关注PHP中文网其他相关文章！