使用nodejs搭建个人博客网站

使用 Node.js 搭建一个个人博客网站是一个很好的项目，可以帮助你熟悉 Node.js 和前端技术。以下是一个基本的步骤指南，帮助你从头开始搭建一个简单的个人博客网站。

1. 环境准备

确保你已经安装了 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官方网站下载并安装最新版本。

2. 创建项目目录

mkdir personal-blog
cd personal-blog

3. 初始化项目

使用 npm 初始化一个新的 Node.js 项目：

npm init -y

这将生成一个 package.json 文件，包含项目的默认配置。

4. 安装依赖

你需要安装一些基本的依赖项，如 Express.js（一个流行的 Node.js 框架）和一些中间件。

npm install express mongoose body-parser ejs

express: 用于构建服务器。
mongoose: 用于与 MongoDB 数据库交互。
body-parser: 用于解析请求体。
ejs: 用于模板渲染。

5. 设置服务器

在项目根目录下创建一个 server.js 文件，并添加以下代码：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = express();

// 连接 MongoDB 数据库
mongoose.connect('mongodb://localhost:27017/blog-db', { useNewUrlParser: true, useUnifiedTopology: true });

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
    console.log('Connected to the database');
});

// 设置模板引擎
app.set('view engine', 'ejs');

// 中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public')); // 用于静态文件（如 CSS、JS、图片）

// 路由
const postRoutes = require('./routes/posts');
app.use('/posts', postRoutes);

// 首页路由
app.get('/', (req, res) => {
    res.render('index');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

6. 创建数据库模型

在项目根目录下创建一个 models 文件夹，并在其中创建一个 Post.js 文件：

const mongoose = require('mongoose');

const PostSchema = new mongoose.Schema({
    title: String,
    content: String,
    createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Post', PostSchema);

7. 创建路由

在项目根目录下创建一个 routes 文件夹，并在其中创建一个 posts.js 文件：

const express = require('express');
const router = express.Router();
const Post = require('../models/Post');

// 获取所有文章
router.get('/', async (req, res) => {
    const posts = await Post.find().sort({ createdAt: -1 });
    res.render('posts', { posts });
});

// 创建新文章（假设通过表单提交）
router.post('/new', async (req, res) => {
    const newPost = new Post({
        title: req.body.title,
        content: req.body.content
    });
    await newPost.save();
    res.redirect('/posts');
});

module.exports = router;

8. 创建视图

在项目根目录下创建一个 views 文件夹，并在其中创建两个 EJS 模板文件：index.ejs 和 posts.ejs。

`index.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
</head>
<body>
    <h1>Welcome to My Blog</h1>
    <a href="/posts/new">New Post</a>
    <a href="/posts">View Posts</a>
</body>
</html>

`posts.ejs`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posts</title>
</head>
<body>
    <h1>Posts</h1>
    <a href="/posts/new">New Post</a>
    <ul>
        <% posts.forEach(post => { %>
            <li>
                <h2><%= post.title %></h2>
                <p><%= post.content %></p>
                <small>Created at: <%= post.createdAt %></small>
            </li>
        <% }); %>
    </ul>
    <a href="/">Back to Home</a>
</body>
</html>

9. 创建新文章表单

在 views 文件夹中创建一个 new-post.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Post</title>
</head>
<body>
    <h1>Create New Post</h1>
    <form action="/posts/new" method="POST">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" required><br><br>
        <label for="content">Content:</label>
        <textarea id="content" name="content" rows="10" cols="30" required></textarea><br><br>
        <button type="submit">Submit</button>
    </form>
    <a href="/">Cancel</a>
</body>
</html>

并在 server.js 中添加对应的路由：

app.get('/posts/new', (req, res) => {
    res.render('new-post');
});

10. 启动服务器

确保你的 MongoDB 数据库正在运行，然后在终端中运行以下命令启动服务器：

node server.js

现在你可以访问 http://localhost:3000 查看你的博客网站，并通过 /posts/new 路径创建新的文章。

11. 进一步优化

样式：添加 CSS 文件来美化你的网站。
用户认证：使用如 passport.js 实现用户登录和注册功能。
评论系统：添加文章评论功能。
部署：将你的网站部署到如 Heroku 或 Vercel 等平台上。

这是一个基本的个人博客网站示例，希望能帮助你入门。祝你编码愉快！

nodejs 博客网站个人博客博客博客网

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/116.html

博客站