本篇文章向大家介绍《用JavaScript打造静态站点生成器教程》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

答案：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学习网公众号！