Javascript

If you've ever wanted to create a blog, portfolio, or documentation site without wrestling with a heavy CMS, a JSON-driven static site generator can b…

Build a Static Site Generator from JSON: A Modern Approach to Content-Driven Websites

If you've ever wanted to create a blog, portfolio, or documentation site without wrestling with a heavy CMS, a JSON-driven static site generator can be a game-changer. By separating content from presentation, you get flexibility, simplicity, and speed—all while keeping your workflow entirely in your control.

In this post, we’ll explore what a JSON-based site generator is, why it’s useful, and how you can build one using Node.js and vanilla JavaScript. Plus, we’ll show how your JSON content can live in a Cloudflare Worker, making it globally available and serverless.

What Is a JSON Site Generator?

At its core, a site generator takes structured content—often stored in JSON files—and outputs static HTML pages. Unlike traditional CMSs, which generate pages dynamically on every request, static generators produce ready-to-serve HTML files.

Why JSON? JSON is lightweight, easy to read and write, and universally supported in web development. Your articles, projects, or portfolio entries can live in simple JSON files, leaving your templates and styles to handle presentation.

Cloudflare Workers: Serverless JSON Endpoint

Instead of storing your JSON content locally, you can host it on a Cloudflare Worker. This approach has several advantages:

  • Global availability: Your JSON is served from Cloudflare's edge network, so fetching it is fast worldwide.
  • No backend server: You don’t need to manage a traditional database or CMS.
  • Dynamic updates: Update the JSON in the Worker, regenerate the site, and your content is live everywhere.

Here’s a simple Cloudflare Worker script to serve JSON:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const articles = [
    {
      "title": "My First Post",
      "slug": "my-first-post",
      "date": "2026-03-28",
      "body": "<p>Welcome to my new site powered by JSON!</p>"
    },
    {
      "title": "Another Post",
      "slug": "another-post",
      "date": "2026-03-27",
      "body": "<p>Static site generators are awesome.</p>"
    }
  ];

  return new Response(JSON.stringify(articles), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Once deployed, you can fetch this JSON from your generator script instead of reading a local file.

Benefits of Using JSON for Site Generation

  1. Decoupled Content and Layout Your content lives in JSON files, while templates handle layout. This separation makes updating and styling much easier.

  2. Performance Since pages are pre-built HTML, there’s no database query at runtime. Fast load times and minimal server overhead.

  3. Version Control Friendly JSON files are text-based. This makes it easy to track content changes with Git.

  4. Serverless Content Hosting JSON in a Cloudflare Worker gives you a globally available, zero-maintenance backend.

Anatomy of a JSON Site Generator

A basic site generator has three parts:

  1. Content: JSON served locally or from a Cloudflare Worker.
  2. Templates: HTML templates with placeholders for JSON content.
  3. Generator Script: Node.js script that fetches JSON, populates templates, and writes HTML files.

Project structure example:

site-generator/
├── templates/
│   └── article.html
├── dist/
├── generator.mjs
└── package.json

Step 1: Fetch JSON from Cloudflare Worker

Update your Node.js generator to fetch the JSON:

import fs from 'fs';
import path from 'path';
import fetch from 'node-fetch';

const templatePath = './templates/article.html';
const outputDir = './dist/';
const apiUrl = 'https://your-worker.example.workers.dev/articles';

// Ensure output directory exists
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

const template = fs.readFileSync(templatePath, 'utf-8');

const response = await fetch(apiUrl);
const articles = await response.json();

articles.forEach(article => {
  let html = template
    .replace(/<!-- ARTICLE_TITLE -->/g, article.title)
    .replace(/<!-- ARTICLE_DATE -->/g, article.date)
    .replace(/<!-- ARTICLE_BODY -->/g, article.body);

  const filename = path.join(outputDir, `${article.slug}.html`);
  fs.writeFileSync(filename, html);
  console.log(`Generated: ${filename}`);
});

Now, your site generator works entirely with JSON served from a cloud endpoint!

Step 2: HTML Template

Same as before—your article.html template uses placeholders like <!-- ARTICLE_TITLE -->.

Step 3: Enhancements

Once the basics are working, you can add:

  • Syntax highlighting for code blocks (using highlight.js)
  • Markdown support (convert Markdown to HTML)
  • Index page generation that lists all articles
  • Image optimization for faster loading
  • Client-side search with JavaScript

Why This Approach Works

By combining JSON-driven static site generation with a Cloudflare Worker backend, you get:

  • Fully decoupled content
  • Extremely fast static HTML pages
  • Global, serverless content delivery
  • Easy updates without a traditional CMS

It’s a modern, maintainable approach that scales from a personal blog to a small documentation platform.

Final Thoughts

JSON-based site generation, combined with serverless endpoints, offers simplicity, performance, and flexibility. It’s a perfect solution for developers who want total control over their content, presentation, and deployment workflow.