Comment créer un blog avec NodeJS

Vous voulez juste le code ? Visitez le dépôt

Si vous cherchez à créer un blog (ou si vous envisagez de repenser le vôtre même si vous n'avez pas publié depuis 2 ans), vous tomberez sur de nombreuses options et cela peut être incroyablement intimidant ; et si vous tombez sur le dernier message de Josh concernant son stack, il est facile de se sentir dépassé par le stack affiché.

Mais vous ne devriez pas ressentir cela et commencer petit est la clé pour être durable

Et comment puis-je le savoir ? Parce que je ressens aussi ce sentiment d’être dépassé !
À ce jour, ce site Web est réalisé avec NextJS, Contentful et Markdown et même si y ajouter des articles n'est pas particulièrement difficile, le maintenir l'est !

Je n'ai rien ajouté de code à ce site Web depuis 2021 et à ce stade, je ne sais même pas si je suis capable de l'exécuter localement (et je suis même réticent à l'essayer) !

Pour ça ? raison particulière, je veux prêcher pour une pile simple ; quelque chose qui résiste à l’épreuve du temps ; quelque chose qui « fonctionne » ; alors allons-y directement, d'accord ?

Commencez ce projet !

Gardez à l'esprit que ce projet sera très, très simple, mais il devrait vous donner une bonne base pour vous développer par-dessus et atteindre le ciel.

Nous allons commencer par initialiser un projet Node dans un dossier choisi (nodejs-blog pour moi) avec et installer quelques dépendances qui, selon moi, nous faciliteront la vie, comme Express, EJS, Marked, le bon vieux ' analyseur de corps et matière grise.

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

Expliquer les dépendances

La raison pour laquelle j'ai choisi d'ajouter EJS au mix était pour me faciliter un peu les choses, en tirant parti des modèles et en écrivant simplement moins de code dans l'ensemble. Si vous ne le connaissez pas, attendez. C'est plutôt cool !

Pour Marked et gray-matter, c'est assez simple : les règles de démarque et je veux que mes publications aient des métadonnées appropriées, que je prévois de créer avec frontmatter.

Très bien, revenons-y !

Ouvrez maintenant votre projet dans votre IDE préféré et créez votre fichier main.js. Je sais que nous aurons besoin des itinéraires suivants : /, /:post, et que nous aurons besoin d'éléments pertinents dans le dossier public, pour que notre main.js initial puisse ressembler à ceci :

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

Assez simple, non ? L'idée est d'avoir la liste des publications sur mon accueil (ou/) et d'avoir juste des pages individuelles pour mes publications.

Il est temps de créer un modèle comme vous ne l'avez jamais fait auparavant !

Une fois la configuration de base réglée, nous avons également besoin d'une structure de base et EJS la fournira.
Commencez par créer un dossier nommé vues ; ce sera la racine de vos pages, pour ainsi dire, ce qui signifie que vous pouvez créer un home.ejs et un post.ejs à l'intérieur juste pour marquer les deux types de pages que nous aurons.

Créez également un dossier, à l'intérieur des vues, nommé partials ; vous pouvez le considérer comme nos composants et vous pouvez déjà créer 3 fichiers ici : header.ejs, footer.ejs et head.ejs.

Voici la structure de base de notre blog : 2 pages et 3 composants, c'est tout. Tout le reste sera traité dans main.js

Les partiels

Comme je l'ai mentionné, les modèles nous permettent de ne pas avoir à répéter autant de code que si nous créions chaque page à la main, et notre configuration nous offre exactement une tranquillité d'esprit à ce sujet.

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>

Fondamentalement, la tête normale à, eh bien, la tête, les balises de fermeture au pied de page et la barre de navigation, et les balises d'ouverture à l'en-tête. Assez simple, non ?

Les vues

Maintenant que nous avons nos composants, nous pouvons lancer les pages.

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

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

Ouais, ça a l'air assez bizarre, mais sachez simplement que l'inclusion amène les partiels dans nos vues et qu'il y a une syntaxe supplémentaire pour le faire fonctionner (allez à la documentation si vous êtes intéressé par son fonctionnement).

Le <%- nous permet de ne pas double-échapper notre HTML (essayez-le avec <% ou <%= à la fin et voyez ce qui se passe) et le forEach(), eh bien, fait exactement ce qu'un forEach le fait. Rien de particulièrement nouveau ici, juste une façon différente d'écrire des trucs que vous connaissez déjà !

Mais réjouissez-vous, vous avez désormais interagi avec un nouvel outil ! ?

Les articles du blog ! ?

À la racine de votre projet, créez un dossier posts et votre premier blog-post-1.md à l'intérieur avec le contenu suivant :

// 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>Ce qu'il y a à l'intérieur du --- est notre frontmatter, et vous pourrez l'utiliser tout de suite !</p>

<h2>
  
  
  Il est temps de voir des trucs à l'écran !
</h2>

<p>De retour à notre main.js, nous allons d'abord traiter de la route /. Comme nous l'avons vu, nous voulons pouvoir récupérer nos publications et les parcourir en boucle pour afficher des informations les concernant à l'écran.</p>

<p>Pour simplifier les choses, je laisserai des commentaires à côté de chaque ligne pertinente au lieu d'écrire d'énormes blocs de texte expliquant des choses ! ?<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') %>

Maintenant, exécutez node main.js dans votre terminal et visitez localhost:3000. Vous devriez voir votre /route remplie de liens vers les fichiers markdown que vous avez créés ! ?

Il y a beaucoup de choses à digérer là-bas, alors s'il vous plaît, essayez chaque ligne de code par vous-même et voyez si cela a du sens. Essayez de faire des choses différentes, en fait ! Obtenez le résumé de vos publications et trouvez un moyen de l'afficher dans le fichier home.ejs. Devenez fou avec ça ! Joignez les URL des images et essayez également de les afficher. JOUEZ AVEC !

Maintenant, pour le /post lui-même :

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

Encore une fois, exécutez node main.js et choisissez l'un des liens de la page d'accueil. Vous devriez voir votre fichier de démarque rendu au format HTML !

Comme avant, essayez des trucs ; ajoutez des éléments à la démarque et voyez comment ils s'affichent ; ajoutez de nouveaux champs au frontmatter et faites-les également afficher.

Vous êtes désormais l'heureux propriétaire d'un blog réalisé avec Node ! ?

C'est ça

Nous pourrions faire beaucoup plus ici, mais cela dépasse le cadre, n'est-ce pas ? Nous avons quelque chose qui fonctionne, avec ce que nous avions l’intention de faire, et c’est parfait. Maintenant c'est à votre tour de ✨le faire briller✨
Voyez si vous pouvez modifier les informations head.ejs en lui transmettant des propriétés ! Idéalement, le nom de l'onglet changerait avec le contenu choisi. Et nous devrions également disposer de métadonnées appropriées lorsque nous partageons le site Web sur les réseaux sociaux, nous avons donc également besoin de ces informations de base dans la tête. Cela ressemble à un bon défi, hein ? ?

Comme toujours, si vous avez des doutes, n'hésitez pas à me joindre via X.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!