Static Site Generation: How It Works from Scratch

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

⚙

Interactive Workshop

Build an SSG Pipeline from Scratch

Walk through building a minimal static site generator using renderToStaticMarkup — from an empty directory to rendered HTML on disk, with no bundler or Babel needed.

1

Initialize with "type": "module" so you can use ES import syntax in Node.js. Install React and react-dom — that is all you need for a basic SSG pipeline.

jsonpackage.json
1{
2  "name": "ssg",
3  "type": "module",
4  "scripts": {
5    "build": "node build.js"
6  },
7  "dependencies": {
8    "react": "^19.0.0",
9    "react-dom": "^19.0.0"
10  }
11}
1 / 4
MCP Client
stdio · connectedssg-build
build

Simulate "npm run build" — see the final dist/index.html output.

string
string
compare

See the difference between renderToStaticMarkup and renderToString output.

Re-read the lectureAll lectures →