LearnViz CompSci
Home / Learn / Web Development / Static Site Generation

Intermediate Topic 33 of 51 Web Development

Static Site Generation

Prebuilding pages at compile time.

How it works

Static site generation builds pages into plain HTML, CSS and JavaScript files at build time from templates, Markdown and data sources, then serves them from a CDN with no server-side computation per request. Tools include Hugo, Jekyll, Eleventy, Astro and Next.js static export. Incremental static regeneration rebuilds pages on demand or on a schedule, and dynamic parts can be added with client-side JavaScript or APIs.

Step-by-step walkthrough

  1. Content lives in Markdown or a CMS.
  2. At build time a tool renders every page to HTML.
  3. The files are uploaded to a CDN.
  4. Visitors get instant responses.
  5. No server runs per request, but changes need a rebuild.

Where it is used

Blogs, documentation, marketing sites, portfolios and product catalogs benefit from fast loading, cheap hosting, security and easy caching.

Common pitfall

Content changes require a rebuild and deploy, which can be slow for very large sites. Personalized or real-time data needs client-side fetching or serverless functions. Preview workflows for editors take setup. Stale pages can persist in caches. Pick static generation for content that changes infrequently and hydrate only the interactive parts.

Where it fits in the course

Static Site Generation is topic 33 of 51 in Web Development, rated Intermediate. It follows Server-Side Rendering. The next topic is Backend Basics.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Static Site Generation?
Prebuilding pages at compile time. It belongs to Web Development and is an intermediate-level topic.
Where do people use Static Site Generation?
Blogs, documentation, marketing sites, portfolios and product catalogs benefit from fast loading, cheap hosting, security and easy caching.
What is the most common mistake with Static Site Generation?
Content changes require a rebuild and deploy, which can be slow for very large sites.
What should I learn before this topic?
Start with Server-Side Rendering, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Static Site Generation hard to learn?
It is an Intermediate topic. Be comfortable with the Beginner topics in this area first, then read the common pitfall carefully, since it is where most mistakes happen.
How long does it take to learn Static Site Generation?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Static Site Generation?
Server-Side Rendering, Backend Basics, Build Tools and Bundlers are closely connected. The full list is in the related topics section of this page.
What should I study after Static Site Generation?
Continue with Backend Basics, the next topic in Web Development.

Related topics