想知道如何用 JavaScript 打造一个轻量级的静态站点生成器 (SSG) 吗？本教程将带你从零开始，无需依赖复杂框架，利用 Node.js 的强大功能，实现一个可控性强的 SSG。我们将深入了解 SSG 的核心流程：包括设计 content、templates、public 目录结构，使用 fs 模块进行文件读写，通过简单的模板引擎进行内容替换，以及使用 marked 库将 Markdown 文件转换为 HTML。你将学会如何批量生成页面，甚至可以扩展实现首页聚合链接、Front Matter 解析和 CSS 注入等高级功能。掌握这些关键点，你就能轻松构建自己的个性化静态站点！

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

实现一个 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. 渲染模板

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

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

例如模板

{{title}}

，传入 { title: "首页" } 后会替换为实际标题。

4. 处理 Markdown 内容

安装 marked 解析 Markdown：

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(`public/${slug}.html`, page);
  }
});

7. 添加首页或路由索引

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

let links = '';
fs.readdirSync('content').forEach(file => {
  const slug = path.basename(file, '.md');
  links += `

${slug}

`; }); const homeHtml = renderTemplate(homeTemplate, { links }); writeFile('public/index.html', homeHtml); 基本上就这些。不复杂但容易忽略细节，比如路径处理、错误捕获和输出目录清理。你可以逐步扩展功能，比如支持 Front Matter（用 gray-matter 解析）、CSS 自动注入、或者生成 RSS。核心是：读数据、套模板、写文件。

终于介绍完啦！小伙伴们，这篇关于《用JavaScript做静态站点生成器教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！