NodeJSを使ってブログを構築する方法-jsチュートリアル-php.cn

How to build a blog with NodeJS

コードが欲しいだけですか？リポジトリにアクセス

ブログを始めようとしている場合 (または、2 年間投稿していないがブログのデザインを変更したいと考えている場合)、たくさんの選択肢に遭遇することになり、信じられないほど気が遠くなるかもしれません。そして、Josh のスタックに関する最新の投稿を偶然目にした場合、表示されているスタックに圧倒されてしまいがちです。

しかし、そのように感じる必要はありません。持続可能であるためには、小さく始めることが重要です

そして、どうやってそれを知ることができるのでしょうか?私もその圧倒される気持ちを感じているからです！
現時点では、この Web サイトは NextJS、Contentful、Markdown を使用して作成されており、投稿を追加するのは特に難しくありませんが、維持するのは大変です!

2021 年以降、この Web サイトにコード関連のコードを追加していません。現時点では、ローカルで実行できるかどうかさえわかりません (そして、試してみることさえ消極的です)。

このために?特に、私は単純なスタックについて説教したいと思っています。時の試練に耐えるもの。「ちょうどうまくいく」もの。それでは早速始めましょう?

そのプロジェクトを始めましょう！

このプロジェクトは非常に必要最低限のものですが、その上で開発を進め、大空に到達するための良い基盤となるはずであることに留意してください。

まず、選択したフォルダー (私の場合は nodejs-blog) 内の Node プロジェクトを初期化し、Express、EJS、Marked など、作業を楽にしてくれると思われるいくつかの依存関係をインストールします。 ' ボディパーサーと灰白質。

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

ログイン後にコピー

依存関係の説明

私が EJS をミックスに追加することを選択した理由は、テンプレートを利用し、全体的に記述するコードを少なくすることで、作業を少し簡単にするためでした。慣れていない場合は、ちょっと待ってください。かなりかっこいいですね！

マーク付きおよびグレーマターの場合、それは非常に簡単です。マークダウンルールと、投稿に適切なメタデータが必要であり、フロントマターを使用して作成する予定です。

さて、元に戻りましょう！

次に、お気に入りの 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 という名前のフォルダーを作成します。これは、いわば ページ のルートになります。これは、作成する 2 種類のページをマークするためだけに、その中に home.ejs と post.ejs を作成できることを意味します。

ビュー内に、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>

ログイン後にコピー

基本的に、通常の head は head にあり、終了タグはフッターと navbar にあり、開始タグはヘッダーにあります。とてもシンプルですよね?

景色

コンポーネントが完成したので、ページを開始できます。

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

ログイン後にコピー

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

ログイン後にコピー

はい、かなり奇妙に見えますが、インクルードによってパーシャルがビューに取り込まれ、それを機能させるための追加の構文があることを知っておいてください (仕組みに興味がある場合は、ドキュメントを参照してください)。

<%- を使用すると、HTML を二重エスケープすることができなくなります (最後に <% または <%= を付けて試してみて、何が起こるか確認してください)。forEach() は、まさにそのとおりのことを行います。 forEach はそうします。ここでは特に新しいことはありません。すでに知っていることを別の方法で書いているだけです!

しかし、うれしいことに、新しいツールを操作できるようになりました。 ?

ブログの投稿です！ ?

プロジェクトのルートに、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') %>




</p>
<p>--- の中にあるものは私たちの前の問題であり、すぐに使用できるようになります!</p>

<h2>
  
  
  スクリーンに何かを表示する時間です!
</h2>

<p>main.js に戻り、最初に / ルートを扱います。これまで見てきたように、投稿を取得してループして、投稿に関する情報を画面に表示できるようにしたいと考えています。</p>

<p>内容を単純化するために、内容を説明する膨大なテキストのブロックを書く代わりに、関連する各行の横にコメントを残します。 ?<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') %>

ログイン後にコピー

次に、ターミナルでノード main.js を実行し、localhost:3000 にアクセスします。 / ルートに作成したマークダウンファイルへのリンクが表示されるはずです。 ?

そこには理解すべきことがたくさんあるので、すべてのコード行を自分で試して、意味があるかどうかを確認してください。実際に、さまざまなことをやってみてください。投稿の概要を取得し、home.ejs ファイル内にそれを表示する方法を見つけます。夢中になろう！画像のURLも添付して表示してみます。遊んでみてください!

次に、/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 を実行し、ホームページ内のリンクの 1 つを選択します。マークダウンファイルが HTML として表示されるはずです!

前と同じように、いろいろ試してみましょう。要素をマークダウンに追加し、それらがどのようにレンダリングされるかを確認します。フロントマターに新しいフィールドを追加し、それらを表示させます。

あなたは、Node で作成されたブログの誇り高きオーナーです。 ?

それでおしまい

ここでできることは他にもたくさんありますが、それは範囲外ですよね。私たちが意図したとおりに何かが機能し、それは完璧でした。次はあなたが✨輝かせる番です✨
head.ejs 情報にプロパティを渡して変更できるかどうかを確認してください。理想的には、タブ名は選択したコンテンツに応じて変更されます。また、Web サイトをソーシャルメディアで共有する場合は、適切なメタデータも必要です。そのため、頭の中のフロントマター情報も必要になります。良い挑戦だと思いますね? ?

いつものように、ご不明な点がございましたら、X 経由でお気軽にご連絡ください。

以上がNodeJSを使ってブログを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。