Bagaimana untuk membina blog dengan NodeJS

Hanya mahu kod? Lawati repo

Jika anda ingin memulakan blog (atau jika anda berfikir untuk mereka bentuk semula blog anda walaupun anda tidak menyiarkan dalam 2 tahun), anda akan terjumpa banyak pilihan dan ia boleh menjadi sangat menakutkan; dan jika anda tersandung dengan siaran Josh yang terbaharu tentang timbunannya, anda mudah merasa terharu dengan timbunan yang ditunjukkan.

Tetapi anda tidak sepatutnya berasa seperti itu dan bermula dari kecil adalah kunci untuk menjadi mampan

Dan bagaimana saya tahu itu? Sebab rasa terharu jugak!
Pada tarikh ini, tapak web ini telah selesai dengan NextJS, Contentful dan Markdown dan semasa menambah siaran padanya tidaklah sukar, mengekalkannya!

Saya tidak menambah apa-apa kod yang berkaitan dengan tapak web ini sejak 2021 dan pada ketika ini saya tidak tahu sama ada saya boleh menjalankannya secara tempatan (dan saya enggan untuk mencubanya)!

Untuk ini ? sebab tertentu, saya ingin berkhutbah untuk timbunan yang mudah; sesuatu yang bertahan dalam ujian masa; sesuatu yang 'hanya berfungsi'; jadi mari kita terjun terus ke dalamnya, boleh?

Mulakan projek itu!

Perlu diingat bahawa projek ini akan menjadi sangat, sangat barebones tetapi ia harus memberi anda asas yang baik untuk anda mengembangkan di atasnya dan mencapai langit.

Kita akan mulakan dengan memulakan projek Node di dalam folder yang dipilih (nodejs-blog untuk saya) dengan dan memasang beberapa kebergantungan yang saya rasa akan menjadikan hidup kita lebih mudah, seperti Express, EJS, Marked, ol yang baik ' penghurai badan dan jirim kelabu.

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

Menjelaskan kebergantungan

Sebab mengapa saya memilih untuk menambahkan EJS ke dalam campuran adalah untuk memudahkan saya, dengan memanfaatkan templat dan hanya menulis kurang kod secara keseluruhan. Jika anda tidak biasa dengannya, tunggu sahaja. Ia cukup keren!

Untuk Marked and grey-matter, ia agak mudah: peraturan penurunan harga dan saya mahu siaran saya mempunyai metadata yang betul, yang saya rancang untuk buat dengan frontmatter.

Baiklah, kembali padanya!

Sekarang buka projek anda dalam IDE kegemaran anda dan buat fail main.js anda. Saya tahu bahawa kita akan mahukan laluan berikut: /, /:post, dan kita perlu mempunyai bahan yang berkaitan pada folder awam, jadi main.js awal kita boleh kelihatan seperti ini:

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

Agak mudah, bukan? Ideanya ialah untuk mempunyai senarai siaran di rumah saya (atau /) dan hanya mempunyai halaman individu untuk siaran saya.

Masa untuk membuat templat seperti yang anda tidak pernah templat sebelum ini!

Dengan persediaan asas tidak tersedia, kami juga memerlukan struktur asas dan EJS akan menyediakannya.
Mulakan dengan mencipta folder bernama pandangan; ini akan menjadi punca halaman anda, boleh dikatakan, yang bermaksud anda boleh membuat home.ejs dan post.ejs di dalamnya hanya untuk menandakan dua jenis halaman yang akan kami miliki.

Buat juga folder, paparan dalam, dinamakan separa; anda boleh menganggapnya sebagai komponen kami dan anda sudah boleh membuat 3 fail di sini: header.ejs, footer.ejs dan head.ejs.

Ini adalah struktur asas blog kami: 2 halaman dan 3 komponen, itu sahaja. Semua selebihnya akan diuruskan di dalam main.js

separa

Seperti yang saya nyatakan, templat membolehkan kami tidak perlu mengulang kod sebanyak yang kami perlu lakukan jika kami membuat setiap halaman dengan tangan, dan persediaan kami memberikan kami kemudahan fikiran mengenainya.

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>

Pada asasnya, head biasa di, well, head, teg penutup di footer dan navbar, dan teg pembukaan di header. Cukup mudah, bukan?

Pandangan

Sekarang kita mempunyai komponen kita boleh meneruskan halaman.

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

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

Ya, ia kelihatan agak pelik tetapi ketahui bahawa termasuk membawa bahagian ke dalam pandangan kami dan terdapat sintaks tambahan untuk menjadikannya berfungsi (pergi ke dokumen jika anda berminat dengan cara ia berfungsi).

<%- membenarkan kami untuk tidak melarikan diri dua kali ganda HTML kami (cuba dengan <% atau <%= pada penghujung dan lihat apa yang berlaku) dan forEach(), baik, melakukan apa yang forEach lakukan. Tiada apa-apa yang baharu di sini, cuma cara penulisan berbeza yang anda sudah tahu!

Tetapi, bergembiralah, anda kini telah berinteraksi dengan alat baharu! ?

Catatan blog! ?

Pada akar projek anda buat folder siaran dan blog-post-1.md pertama anda di dalamnya dengan kandungan berikut:

// 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>Apa yang ada di dalam --- adalah bahan utama kami, dan anda akan dapat menggunakannya dengan segera!</p>

<h2>
  
  
  Masa untuk melihat beberapa perkara pada skrin!
</h2>

<p>Kembali ke main.js kami, kami akan berurusan dengan laluan / dahulu. Seperti yang telah kita lihat, kami mahu mendapatkan siaran kami dan menggelungkannya untuk memaparkan maklumat tentangnya pada skrin.</p>

<p>Untuk memudahkan perkara, saya akan meninggalkan komen di sebelah setiap baris yang berkaitan dan bukannya menulis blok besar teks yang menerangkan perkara! ?<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') %>

Sekarang jalankan node main.js dalam terminal anda dan lawati localhost:3000. Anda sepatutnya melihat / laluan anda diisi dengan pautan ke fail penurunan nilai yang anda buat! ?

Terdapat banyak yang perlu dihadam di sana, jadi sila cuba setiap baris kod sendiri dan lihat sama ada ia masuk akal. Cuba lakukan perkara yang berbeza, sebenarnya! Dapatkan ringkasan untuk siaran anda dan cari cara untuk memaparkannya di dalam fail home.ejs. Gila dengannya! Lampirkan url imej dan juga cuba paparkannya. BERMAIN DENGANNYA!

Sekarang, untuk /post itu sendiri:

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

Sekali lagi, jalankan node main.js, dan pilih salah satu pautan dalam halaman utama. Anda sepatutnya melihat fail penurunan nilai anda dipaparkan sebagai HTML!

Seperti sebelum ini, cuba bahan; tambahkan elemen pada penurunan nilai dan lihat cara ia dipaparkan; tambah medan baharu pada bahagian hadapan dan juga tunjukkan medan tersebut.

Anda kini pemilik bangga blog yang dibuat dengan Node! ?

Itu sahaja

Ada banyak lagi yang boleh kita lakukan di sini tetapi itu di luar skop, bukan? Kami mendapat sesuatu yang berjaya, dengan perkara yang kami ingin lakukan, dan itu adalah sempurna. Kini giliran anda untuk ✨ menjadikannya bersinar ✨
Lihat jika anda boleh menukar maklumat head.ejs dengan memberikan sifat kepadanya! Sebaik-baiknya, nama tab akan berubah dengan kandungan yang dipilih. Dan kita juga harus mempunyai metadata yang betul apabila kita berkongsi laman web di media sosial jadi kita juga memerlukan maklumat frontmatter di dalam kepala. Kedengarannya seperti cabaran yang bagus, eh? ?

Seperti biasa, jika anda mempunyai sebarang keraguan, sila hubungi saya melalui X.

Atas ialah kandungan terperinci Bagaimana untuk membina blog dengan NodeJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!