如何实现一个JavaScript驱动的静态站点生成器（SSG）？-js教程-PHP中文网

如何实现一个JavaScript驱动的静态站点生成器（SSG）？

夜晨

发布： 2025-10-12 09:16:02

原创

783人浏览过

答案：JavaScript 驱动的静态站点生成器通过 Node.js 读取模板与内容，利用字符串替换或 Markdown 解析渲染 HTML，再批量输出文件。核心流程为：设计 content、templates、public 目录结构；使用 fs 模块读写文件；通过简单模板引擎替换 {{key}} 插值；借助 marked 库将 Markdown 转为 HTML；遍历内容文件批量生成页面；可额外构建首页聚合链接。关键点包括路径处理、错误捕获与输出清理，后续可扩展 Front Matter、CSS 注入等功能。整个过程不依赖框架，突出轻量与可控性。

如何实现一个javascript驱动的静态站点生成器（ssg）？

实现一个 JavaScript 驱动的静态站点生成器（SSG）并不需要依赖复杂的框架。核心思路是：用 Node.js 读取模板和内容文件，通过 JavaScript 处理数据并渲染 HTML，最后输出静态文件到指定目录。

1. 基本结构设计

一个最简 SSG 包含以下几个部分：

content/：存放 Markdown 或 JSON 内容文件
templates/：HTML 模板文件（可用简单的字符串模板）
public/：输出静态文件的目录
build.js：主构建脚本

2. 使用 Node.js 读写文件

利用 fs 和 path 模块处理文件系统操作：

const fs = require('fs');
const path = require('path');

function readFile(filePath) {
  return fs.readFileSync(filePath, 'utf-8');
}

function writeFile(filePath, content) {
  fs.writeFileSync(filePath, content);
  console.log(`已生成: ${filePath}`);
}

登录后复制

3. 渲染模板

可以使用简单的字符串替换实现模板引擎：

立即学习“Java免费学习笔记（深入）”；

function renderTemplate(template, data) {
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return data[key] || match;
  });
}

登录后复制

例如模板 <h1>{{title}}</h1>，传入 { title: "首页" } 后会替换为实际标题。

4. 处理 Markdown 内容

安装 marked 解析 Markdown：

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

查看详情

npm install marked

登录后复制

在构建脚本中使用：

const { marked } = require('marked');

const mdContent = readFile('content/post1.md');
const htmlContent = marked.parse(mdContent);

登录后复制

5. 构建页面流程

以生成一篇文章为例：

const template = readFile('templates/post.html');
const content = readFile('content/post1.md');

const data = {
  title: '我的第一篇文章',
  content: marked.parse(content)
};

const html = renderTemplate(template, data);
writeFile('public/post1.html', html);

登录后复制

6. 批量生成多页

遍历 content 目录自动生成所有文章：

fs.readdirSync('content').forEach(file => {
  if (path.extname(file) === '.md') {
    const slug = path.basename(file, '.md');
    const content = readFile(`content/${file}`);
    const html = marked.parse(content);

    const page = renderTemplate(template, {
      title: `关于 ${slug}`,
      content: html
    });

    writeFile(`publichttps://www.php.cn/link/eb22f88f11afb43e5ad8075fc7b2491e`, page);
  }
});

登录后复制

7. 添加首页或路由索引

可以额外生成一个首页，列出所有文章链接：

let links = '';
fs.readdirSync('content').forEach(file => {
  const slug = path.basename(file, '.md');
  links += `<li><a href="https://www.php.cn/link/eb22f88f11afb43e5ad8075fc7b2491e">${slug}</a></li>`;
});

const homeHtml = renderTemplate(homeTemplate, { links });
writeFile('public/index.html', homeHtml);

登录后复制

基本上就这些。不复杂但容易忽略细节，比如路径处理、错误捕获和输出目录清理。你可以逐步扩展功能，比如支持 Front Matter（用 gray-matter 解析）、CSS 自动注入、或者生成 RSS。核心是：读数据、套模板、写文件。

以上就是如何实现一个JavaScript驱动的静态站点生成器（SSG）？的详细内容，更多请关注php中文网其它相关文章！