Static site generators (SSGs) are engines that use text input files (such as

Markdown Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form. Markdown i ...

reStructuredText reStructuredText (RST, ReST, or reST) is a file format for textual data used primarily in the Python programming language community for technical documentation. It is part of the Docutils project of the Python Doc-SIG (Documentation Special Inte ...

, and AsciiDoc) to generate

static web page A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user's web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application. Consequently, a static ...

s. Static sites generated by static site generators do not require a backend after site generation, making them first-class citizens on

content delivery network A content delivery network, or content distribution network (CDN), is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially re ...

s (CDNs). Some of the most popular static site generators are Jekyll,

Hugo Hugo or HUGO may refer to: Arts and entertainment * ''Hugo'' (film), a 2011 film directed by Martin Scorsese * Hugo Award, a science fiction and fantasy award named after Hugo Gernsback * Hugo (franchise), a children's media franchise based on ...

, and

Next.js Next.js is an open-source web development framework created by Vercel enabling React (JavaScript library), React-based web applications with server-side scripting, server-side rendering and generating static web page, static websites. React docu ...

(

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

). SSGs are typically for rarely-changing, informative content, such as product pages, news websites, (software) documentation, manuals, and blogs.

History

Prior to static site generators paradigm becoming widespread,

Wikipedia Wikipedia is a multilingual free online encyclopedia written and maintained by a community of volunteers, known as Wikipedians, through open collaboration and using a wiki-based editing system. Wikipedia is the largest and most-read refer ...

was an ''

avant la lettre Many words in the English vocabulary are of French origin, most coming from the Anglo-Norman spoken by the upper classes in England for several hundred years after the Norman Conquest, before the language settled into what became Modern Engli ...

'' SSG, using markdown to serve static encyclopedic articles. The first modern static site generator was Jekyll released in 2008 by

Tom Preston-Werner Thomas Preston-Werner (born May 27, 1979) is an American billionaire software developer and entrepreneur. He is an active contributor within the free and open-source software community, most prominently in the San Francisco Bay Area, where he l ...

, one of the co-founders of GitHub. It popularized a system which: * takes flat-text markdown inputs for content * stores the template and content in the same structure (like a git repository)

Architecture

SSGs typically consist of a template written in

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

with a templating system, such as liquid (Jekyll) or Go template (Hugo). The same structure (typically a

Git Git () is a distributed version control system: tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data in ...

repository) includes content in a plain-text format such as

markdown Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form. Markdown i ...

. A single file often corresponds to a single web page. The website variable settings are stored in a flat-text configuration file _config.yml (

YAML YAML ( and ) (''see '') is a human-readable data-serialization language. It is commonly used for configuration files and in applications where data is being stored or transmitted. YAML targets many of the same communications applications as Exte ...

), _config.toml (

TOML TOML is a file format for configuration files. It is intended to be easy to read and write due to obvious semantics which aim to be "minimal", and is designed to map unambiguously to a dictionary. Its specification is open-source, and receives ...

) or _config.json (

JSON JSON (JavaScript Object Notation, pronounced ; also ) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other ser ...

). Page files typically also start with a YAML, TOML or JSON preamble to define variables such as title, permalink, date, etc. Files with names that begin with an underscore (_) such as _index.md (as opposed to index.md) are considered templates or archetypes and are thus not rendered as pages themselves.

Examples

Several hundreds SSGs have been documented to exist, with the vast majority being written in languages that are already prominent on the web, such as Python, Go, and JavaScript.

Comparison with server-side systems

Many ''server-side template systems'' have an option to publish output pages on the server, where the published pages are

static Static may refer to: Places *Static Nunatak, a nunatak in Antarctica United States * Static, Kentucky and Tennessee *Static Peak, a mountain in Wyoming **Static Peak Divide, a mountain pass near the peak Science and technology Physics *Static el ...

. This is common on

content management system A content management system (CMS) is computer software used to manage the creation and modification of digital content (content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...

s, like

Vignette Vignette may refer to: * Vignette (entertainment), a sketch in a sketch comedy * Vignette (graphic design), decorative designs in books (originally in the form of leaves and vines) to separate sections or chapters * Vignette (literature), short, i ...

, but is not considered out-server generation. In the majority of cases, this "publish option" doesn't interfere with the ''template system'', and it can be made by external software, as

Wget GNU Wget (or just Wget, formerly Geturl, also written as its package name, wget) is a computer program that retrieves content from web servers. It is part of the GNU Project. Its name derives from "World Wide Web" and " ''get''." It supports do ...

People began to use server-side dynamic pages generated from templates with pre-existent software adapted for this task. This early software was the

preprocessor In computer science, a preprocessor (or precompiler) is a program that processes its input data to produce output that is used as input in another program. The output is said to be a preprocessed form of the input data, which is often used by so ...

s and macro languages, adapted for the web use, running on CGI. Next, a simple but relevant technology was the direct execution made on extension modules, started with SSI. TempEngWeb016

References

{{Reflist

External links

JavaScript template libraries
comparison from 2009
Enforcing Strict Model–View Separation in Template Engines
Scripting languages * Web design Static website generators