So erstellen Sie ein Blog mit NodeJS

Möchten Sie nur den Code? Besuchen Sie das Repo

Wenn Sie einen Blog starten möchten (oder darüber nachdenken, Ihren Blog neu zu gestalten, obwohl Sie seit zwei Jahren nichts gepostet haben), werden Sie auf viele Optionen stoßen und es kann unglaublich entmutigend sein; Und wenn man über den neuesten Beitrag von Josh über seinen Stapel stolpert, fühlt man sich leicht von dem gezeigten Stapel überwältigt.

Aber Sie sollten sich nicht so fühlen und klein anzufangen ist der Schlüssel zur Nachhaltigkeit

Und woher weiß ich das? Weil ich dieses Gefühl der Überforderung auch verspüre!
Zum jetzigen Zeitpunkt ist diese Website mit NextJS, Contentful und Markdown erstellt und das Hinzufügen von Beiträgen ist zwar nicht besonders schwierig, die Pflege jedoch schon!

Ich habe dieser Website seit 2021 nichts mehr hinzugefügt, was mit Code zu tun hat, und zu diesem Zeitpunkt weiß ich noch nicht einmal, ob ich es lokal ausführen kann (und ich schrecke davor zurück, es überhaupt auszuprobieren)!

Dafür? Aus besonderem Grund möchte ich für einen einfachen Stapel predigen; etwas, das den Test der Zeit übersteht; etwas, das „einfach funktioniert“; Also lasst uns gleich loslegen, ja?

Starten Sie dieses Projekt!

Denken Sie daran, dass dieses Projekt sehr, sehr einfach sein wird, aber es sollte Ihnen eine gute Grundlage bieten, auf der Sie sich weiterentwickeln und nach dem Himmel streben können.

Wir beginnen mit der Initialisierung eines Node-Projekts in einem ausgewählten Ordner (für mich „nodejs-blog“) und der Installation einiger Abhängigkeiten, die meiner Meinung nach unser Leben einfacher machen werden, wie Express, EJS, Marked, die guten alten ' Körperparser und graue Substanz.

npm init
npm install body-parser ejs express marked gray-matter

Erläuterung der Abhängigkeiten

Der Grund, warum ich mich dafür entschieden habe, EJS in den Mix aufzunehmen, bestand darin, es mir etwas einfacher zu machen, indem ich die Vorteile von Vorlagen nutzte und insgesamt weniger Code schrieb. Wenn Sie damit nicht vertraut sind, warten Sie einfach. Es ist ziemlich cool!

Für Marked und Gray-Matter ist es ziemlich einfach: Markdown-Regeln und ich möchte, dass meine Beiträge die richtigen Metadaten haben, die ich mit Frontmatter erstellen möchte.

Okay, zurück zur Sache!

Öffnen Sie nun Ihr Projekt in Ihrer bevorzugten IDE und erstellen Sie Ihre main.js-Datei. Ich weiß, dass wir die folgenden Routen wollen: /, /:post und dass wir relevante Inhalte im öffentlichen Ordner haben müssen, damit unsere ersten main.js so aussehen können:

// 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}`);
});

Ganz einfach, oder? Die Idee ist, die Liste der Beiträge auf meiner Startseite (oder /) zu haben und nur einzelne Seiten für meine Beiträge zu haben.

Es ist Zeit, Vorlagen zu erstellen, wie Sie sie noch nie zuvor erstellt haben!

Da das Basis-Setup erledigt ist, benötigen wir auch eine Basisstruktur und EJS wird diese bereitstellen.
Erstellen Sie zunächst einen Ordner mit dem Namen „views“. Dies wird sozusagen das Stammverzeichnis Ihrer Seiten sein, was bedeutet, dass Sie darin eine home.ejs und eine post.ejs erstellen können, um nur die beiden Arten von Seiten zu markieren, die wir haben werden.

Erstellen Sie auch einen Ordner mit Innenansichten und dem Namen „Partials“. Sie können es sich als unsere Komponenten vorstellen und hier können Sie bereits drei Dateien erstellen: header.ejs, footer.ejs und head.ejs.

Das ist die Grundstruktur unseres Blogs: 2 Seiten und 3 Komponenten, das ist alles. Der Rest wird in main.js

erledigt

Die Teiltöne

Wie ich bereits erwähnt habe, ermöglichen uns Vorlagen, nicht so viel Code wiederholen zu müssen, wie wenn wir jede Seite von Hand erstellen würden, und unser Setup gibt uns diesbezüglich genau die Sicherheit.

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>

Im Grunde der normale Kopf, nun ja, Kopf, die schließenden Tags in der Fußzeile und der Navigationsleiste sowie öffnende Tags in der Kopfzeile. Ziemlich einfach, oder?

Die Ansichten

Jetzt, da wir unsere Komponenten haben, können wir mit den Seiten beginnen.

// footer.ejs
    </main>
  </body>
</html>

// header.ejs
<body>
  <main>
    <header>
      <a href="/">Blog</a>
    </header>

Ja, es sieht ziemlich seltsam aus, aber wissen Sie nur, dass das Include die Partials in unsere Ansichten bringt und dass es zusätzliche Syntax gibt, damit es funktioniert (sehen Sie sich die Dokumentation an, wenn Sie daran interessiert sind, wie es funktioniert).

Das <%- ermöglicht es uns, unseren HTML-Code nicht doppelt zu maskieren (probieren Sie es mit <% oder <%= am Ende aus und sehen Sie, was passiert) und das forEach() macht genau das, was a forEach tut es. Hier gibt es nichts besonders Neues, nur eine andere Art, Dinge zu schreiben, die Sie bereits kennen!

Aber freuen Sie sich, Sie haben jetzt mit einem neuen Tool interagiert! ?

Die Blogbeiträge! ?

Erstellen Sie im Stammverzeichnis Ihres Projekts einen Posts-Ordner und darin Ihren ersten blog-post-1.md mit folgendem Inhalt:

// 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') %>




</p>
<p>Was sich im --- befindet, ist unser Hauptthema, und Sie können es sofort verwenden!</p>

<h2>
  
  
  Zeit, ein paar Sachen auf dem Bildschirm zu sehen!
</h2>

<p>Zurück zu unserem main.js, wir beschäftigen uns zunächst mit der /-Route. Wie wir gesehen haben, möchten wir in der Lage sein, unsere Beiträge abzurufen und sie zu durchlaufen, um Informationen über sie auf dem Bildschirm anzuzeigen.</p>

<p>Zur Vereinfachung hinterlasse ich Kommentare neben jeder relevanten Zeile, anstatt riesige Textblöcke zu schreiben, in denen Dinge erklärt werden! ?<br>
</p>

<pre class="brush:php;toolbar:false">// post.ejs
<%- include('./partials/head') %>
<%- include('./partials/header') %>
<h1><%= frontmatter.title %></h1>
<p><%= frontmatter.date %></p>
<p><%= frontmatter.author %></p>
<%- content %>
<%- include('./partials/footer') %>

Führen Sie nun node main.js in Ihrem Terminal aus und besuchen Sie localhost:3000. Ihre /-Route sollte mit Links zu den von Ihnen erstellten Markdown-Dateien gefüllt sein! ?

Da gibt es viel zu verdauen, also probieren Sie bitte jede Codezeile selbst aus und sehen Sie, ob sie Sinn macht. Versuchen Sie tatsächlich, verschiedene Dinge zu tun! Rufen Sie die Zusammenfassung Ihrer Beiträge ab und finden Sie eine Möglichkeit, sie in der Datei home.ejs anzuzeigen. Mach dich verrückt damit! Hängen Sie Bild-URLs an und versuchen Sie auch, diese anzuzeigen. SPIELE DAMIT!

Nun zum /post selbst:

---
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!

Führen Sie erneut node main.js aus und wählen Sie einen der Links auf der Startseite aus. Ihre Markdown-Datei sollte als HTML gerendert werden!

Probieren Sie wie bisher Dinge aus; Fügen Sie dem Markdown Elemente hinzu und sehen Sie, wie sie gerendert werden. Fügen Sie der Frontmatter neue Felder hinzu und lassen Sie sie anzeigen.

Sie sind jetzt stolzer Besitzer eines mit Node erstellten Blogs! ?

Das ist es

Wir könnten hier noch viel mehr tun, aber das würde den Rahmen sprengen, nicht wahr? Wir haben mit dem, was wir vorhatten, etwas zum Laufen gebracht, und das ist perfekt. Jetzt sind Sie an der Reihe, ✨ es zum Leuchten zu bringen ✨
Sehen Sie, ob Sie die head.ejs-Informationen ändern können, indem Sie Eigenschaften daran übergeben! Im Idealfall würde sich der Tab-Name mit dem gewählten Inhalt ändern. Und wir sollten auch über die richtigen Metadaten verfügen, wenn wir die Website in den sozialen Medien teilen, also brauchen wir auch diese wichtigen Informationen im Kopf. Klingt nach einer guten Herausforderung, oder? ?

Wenn Sie irgendwelche Zweifel haben, können Sie mich wie immer gerne über X erreichen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Blog mit NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!