node.js零基础实战教程：搭建个人博客项目详解

admin node.js框架教程 2025-10-24 15

是不是很多零基础的朋友都想拥有自己的个人博客，却卡在技术门槛上？“想搭博客但不会服务器开发，只能用别人的模板”“看了一堆教程，全是复杂术语，不知道从哪下手”“跟着做了一半，页面打不开或者数据不显示，只能放弃”？别慌，用 Node.js 搭建个人博客没那么难，零基础也能学会。今天兔子哥就带大家从零开始做一个简单的个人博客项目，从环境准备到功能开发，每一步都有详细说明，跟着做就能成功，一起往下看吧！

基础问题：为啥用 Node.js 搭个人博客？零基础能学会吗？

很多新手好奇，“搭博客用 PHP、Python 不行吗？为啥选 Node.js？” 其实 Node.js 对前端新手特别友好 —— 如果你会一点 JavaScript，学 Node.js 会很快；而且它轻量、灵活，搭简单博客不用复杂配置，几个模块组合起来就能跑。

用 Node.js 搭博客的 3 个优势

上手快：语法和浏览器 JavaScript 相通，前端新手不用学新语言
模块多：有现成的框架（如 Express）和模板引擎（如 EJS），不用自己写复杂逻辑
易扩展：后期想加评论、搜索功能，直接加模块就行，不用重构整个项目

做设计的小林分享：“我零基础学 Node.js，花了两周就搭好了自己的博客，现在能自己发文章、改样式，成就感特别强。” 所以别担心基础不够，跟着步骤做，你也能搞定。

搭建博客需要哪些工具？新手必备清单

不用准备太多工具，这几个就够了：

Node.js 环境：基础运行环境，官网下载 LTS 版本安装
VS Code：写代码的编辑器，有代码提示，新手不容易写错
Express 框架：简化服务器开发，npm 一键安装
EJS 模板引擎：让 HTML 能嵌入 JavaScript，动态显示文章内容
fs 模块：Node.js 自带，用来读写博客文章数据

这些工具安装和使用都很简单，后面会一步步教大家操作，不用提前准备。

场景问题：从零开始搭博客，具体怎么做？分步骤详解

咱们的博客项目包含 3 个核心功能：显示文章列表、查看文章详情、发布简单文章。跟着这几步做，2 小时就能跑起来。

步骤 1：准备环境，初始化项目

首先确保电脑装了 Node.js，打开命令提示符输入node -v，显示版本号就没问题。然后：

新建一个文件夹（比如 “my-blog”），作为项目文件夹
打开命令提示符，用cd命令进入这个文件夹
输入npm init -y，初始化项目（会生成 package.json 文件，管理项目依赖）
安装需要的模块：输入npm install express ejs，等待安装完成

这一步要是出错，大多是文件夹路径输错了，或者 Node.js 没装对。可以重新检查路径，确保命令提示符里的文件夹和你新建的一致。

步骤 2：搭建项目结构，文件放哪里？

在 “my-blog” 文件夹里新建这些文件和文件夹，结构清晰才不容易乱：
plaintext

my-blog/├─ app.js        // 入口文件，启动服务器├─ views/        // 存放页面模板│  ├─ index.ejs  // 首页（文章列表）│  └─ post.ejs   // 文章详情页├─ public/       // 存放静态文件（CSS、图片）│  └─ style.css  // 样式文件└─ posts/        // 存放文章数据（用JSON文件）└─ 1.json     // 第一篇文章示例

新手不用记这个结构，照着建就行。文件夹和文件名最好用小写，避免后面引用时出错。

步骤 3：写入口文件 app.js，启动服务器

在 app.js 里输入代码，这是项目的 “心脏”，负责启动服务器和处理请求：
javascript

const express = require('express');const fs = require('fs');const path = require('path');const app = express();// 设置模板引擎为EJSapp.set('view engine', 'ejs');// 设置静态文件目录app.use(express.static('public'));// 解析POST请求数据app.use(express.urlencoded({ extended: true }));// 首页：显示文章列表app.get('/', (req, res) => {// 读取posts文件夹里的所有文章fs.readdir('./posts', (err, files) => {if (err) {res.send('读取文章失败');return;}// 提取文章标题和ID（文件名）const posts = files.map(file => {const id = file.replace('.json', '');const content = fs.readFileSync(`./posts/${file}`, 'utf8');const post = JSON.parse(content);return { id, title: post.title };});// 渲染首页模板，传递文章列表res.render('index', { posts });});});// 文章详情页：根据ID显示文章内容app.get('/post/:id', (req, res) => {const id = req.params.id;// 读取对应ID的文章fs.readFile(`./posts/${id}.json`, 'utf8', (err, data) => {if (err) {res.send('文章不存在');return;}const post = JSON.parse(data);res.render('post', { post });});});// 启动服务器，监听3000端口app.listen(3000, () => {console.log('博客启动啦！访问：http://localhost:3000');});

代码里的注释很详细，新手不用完全看懂，知道每部分是干啥的就行，重点是能运行起来。

步骤 4：写页面模板，让博客有样子

首页模板（views/index.ejs）：显示文章列表

html

DOCTYPE html><html><head><title>我的个人博客title><link rel="stylesheet" href="/style.css">head><body><h1>我的博客h1><div class="post-list"><% posts.forEach(post => { %><div class="post-item"><a href="/post/<%= post.id %>"><%= post.title %>a>div><% }) %>div>body>html>

文章详情页模板（views/post.ejs）：显示文章内容

html

DOCTYPE html><html><head><title><%= post.title %> - 我的博客title><link rel="stylesheet" href="/style.css">head><body><a href="/">返回首页a><h1><%= post.title %>h1><div class="post-content"><%= post.content %>div>body>html>

样式文件（public/style.css）：让页面好看点

css

body {max-width: 800px;margin: 0 auto;padding: 20px;font-family: sans-serif;}.post-list {margin-top: 20px;}.post-item {margin: 10px 0;padding: 10px;border: 1px solid #ddd;}.post-item a {text-decoration: none;color: #333;}.post-content {margin-top: 20px;line-height: 1.6;}

步骤 5：添加测试文章，看看效果

在 posts 文件夹里新建 “1.json” 文件，输入文章内容：
json

{"title": "我的第一篇博客","content": "这是用Node.js搭建的个人博客，零基础也能学会！跟着兔子哥的教程做，你也能拥有自己的博客~"}

步骤 6：启动项目，访问博客

在命令提示符里输入node app.js，看到 “博客启动啦” 的提示后，打开浏览器访问http://localhost:3000，就能看到你的博客首页了！点击文章标题，能进入详情页查看内容，是不是很神奇？

解决方案：项目中常见问题，这样解决超简单

问题 1：启动后浏览器访问提示 “无法连接”

先检查命令提示符里有没有报错，如果显示 “Error: listen EADDRINUSE: address already in use :::3000”，说明 3000 端口被占用了。解决方法：把 app.js 里的app.listen(3000)改成app.listen(3001)，换个端口重启就行。我刚开始总遇到这个问题，后来每次启动前都换个端口，就很少出错了。

问题 2：页面显示 “读取文章失败”

大概率是 posts 文件夹路径错了，或者文件夹里没有文章。检查代码里的./posts路径是否正确，确保 posts 文件夹和 app.js 在同一个目录；再确认 posts 里有.json 格式的文章，文件名别写错（比如别写成 1.txt）。

问题 3：页面样式不生效，CSS 没加载

检查 link 标签的 href 是否正确，href="/style.css"中的斜杠不能少，它表示从 public 文件夹里找 style.css；再确认 public 文件夹里确实有 style.css 文件，文件名大小写要一致（比如 Style.css 会找不到）。

问题 4：EJS 模板报错 “Unexpected token”

这是模板里的 JavaScript 语法错了，比如 <% 和 %> 没配对，或者 forEach 循环里少了括号。仔细检查模板文件，确保代码格式正确，新手可以先复制教程里的代码，没问题再自己修改。

自问自答：零基础搭博客常见疑问

问：我想加个发布文章的功能，怎么做？

答：可以加一个简单的表单页面，用 POST 请求提交文章标题和内容，再用 fs 模块写入 posts 文件夹作为.json 文件。代码可以参考：在 app.js 里加app.get('/publish', (req, res) => { res.render('publish'); })，再新建 publish.ejs 表单页面，处理提交逻辑就行，不难的。

问：文章数据存在 JSON 文件里，多了会变慢吗？

答：少量文章（几十篇）没问题，太多的话可以换成数据库（如 MongoDB），但新手先不用急，先用 JSON 文件练手，熟悉后再学数据库，一步一步来。

问：能把博客放到网上让别人访问吗？

答：能！可以部署到云服务器（如阿里云、腾讯云），买个域名解析过去就行。新手先把本地项目做好，后面再学部署，难度不大。

个人心得：实战是最好的学习方式，别怕犯错

搭这个博客项目时，我踩了不少坑 —— 端口被占用、路径写错、模板语法错误，但每次解决后都记得更牢。小林说得好：“刚开始我连文件夹都建不对，后来跟着步骤一遍遍试，慢慢就找到规律了。”
零基础学技术，最忌讳怕犯错不敢动手。哪怕代码是复制的，也要亲手敲一遍、运行一遍，看看哪里会出错，怎么解决。这个博客项目虽然简单，但包含了服务器搭建、数据读写、模板渲染等核心知识，做好后再学更复杂的功能，会轻松很多。
希望这篇教程能帮你搭起自己的第一个博客，现在就动手试试吧！从创建文件夹开始，一步步跟着做，当浏览器里出现你的博客页面时，你会觉得所有努力都值得。技术学习没有捷径，多练多试，你会越来越厉害，加油！

标签：从零开始服务器

本文地址： https://www.kfyz.com/nodejs/707.html