Static site generator

Last updated

Static site generators (SSGs) are software engines that use text input files (such as Markdown, reStructuredText, AsciiDoc and JSON) to generate static web pages. [1] Static sites generated by static site generators do not require a backend after site generation, making them first-class citizens on content delivery networks (CDNs). Some of the most popular static site generators are Jekyll, Hugo, Eleventy, Gatsby, and Next js, [2] [3] SSGs are typically for rarely-changing, informative content, such as product pages, news articles, software documentation, and blogs.

Contents

Architecture

SSGs typically consist of a template written in HTML with a templating system, such as liquid (Jekyll) or Go template (Hugo). The same structure (typically a Git repository) includes content in a plain-text format such as Markdown or reStructuredText, or in a structural meta format such as JSON or XML. A single plain-text file may correspond to a single web page. Alternatively, a single structural metadata file may correspond to an entire website if a single-page application framework like AngularJS is used. The website variable settings are stored in a plaintext configuration file _config.yml (YAML), _config.toml (TOML) or _config.json (JSON). Page files typically also start with a YAML, TOML, or JSON preamble to define variables such as title, permalink, or date. 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 hundred 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, JavaScript and TypeScript. [4]

System label/nameLanguageNotes
Jekyll Ruby Uses Liquid templating language. [4]
Hugo Go Uses Go templates and its main selling point is its high speed when compiling. [4]
Next.js JavaScript Uses React templates. [4]
Pelican Python Uses Jinja2 templates. [4] Compiles HTML from reStructuredText or Markdown.
Astro JavaScript Uses the .astro syntax language by default (familiar to HTML or JSX). Supports multiple frameworks: Svelte, React, Preact, Vue, SolidJS, Lit, AlpineJS. Compiles HTML from Markdown or MDX. [4]
Docusaurus JavaScript Compiles HTML from MDX, Markdown, JavaScript and React. Uses Node.js. Customization with React.
Eleventy JavaScript Supports 10 template languages. [4]

Comparison with server-side systems

Server-side template system ServerSideTemplates.gif
Server-side template system

Many server-side template systems have an option to publish output pages on the server, where the published pages are static. This is common on content management systems, like Vignette, 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. [5]

People began to use server-side dynamic pages generated from templates with preexisting software adapted for this task. This early software was the preprocessors 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.

Related Research Articles

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. Scripts can be written in any of a number of server-side scripting languages that are available. Server-side scripting is distinguished from client-side scripting where embedded scripts, such as JavaScript, are run client-side in a web browser, but both techniques are often used together. The alternative to either or both types of scripting is for the web server itself to deliver a static web page.

YAML 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 Extensible Markup Language (XML) but has a minimal syntax that intentionally differs from Standard Generalized Markup Language (SGML). It uses Python-style indentation to indicate nesting and does not require quotes around most string values.

<span class="mw-page-title-main">Configuration file</span> Software file used to configure the initial settings for a computer program

In computing, configuration files are files used to configure the parameters and initial settings for some computer programs or applications, server processes and operating system settings.

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of name–value pairs and arrays. It is a commonly used data format with diverse uses in electronic data interchange, including that of web applications with servers.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

A web content management system is a software content management system (CMS) specifically for web content. It provides website authoring, collaboration, and administration tools that help users with little knowledge of web programming languages or markup languages create and manage website content. A WCMS provides the foundation for collaboration, providing users the ability to manage documents and output for multiple author editing and participation. Most systems use a content repository or a database to store page content, metadata, and other information assets the system needs.

An INI file is a configuration file for computer software that consists of plain text with a structure and syntax comprising key–value pairs organized in sections. The name of these configuration files comes from the filename extension INI, short for initialization, used in the MS-DOS operating system which popularized this method of software configuration. The format has become an informal standard in many contexts of configuration, but many applications on other operating systems use different file name extensions, such as conf and cfg.

<span class="mw-page-title-main">Web template system</span> System in web publishing

A web template system in web publishing allows web designers and developers to work with web templates to automatically generate custom web pages, such as the results from a search. This reuses static web page elements while defining dynamic elements based on web request parameters. Web templates support static content, providing basic structure and appearance. Developers can implement templates from content management systems, web application frameworks, and HTML editors.

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

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Web page</span> Content provided by a website

A web page is a document on the Web that is accessed in a web browser. A website typically consists of many web pages linked together under a common domain name. The term "web page" is therefore a metaphor of paper pages bound together into a book.

<span class="mw-page-title-main">Yesod (web framework)</span>

Yesod is a web framework based on the programming language Haskell for productive development of type-safe, representational state transfer (REST) model based, high performance web applications, developed by Michael Snoyman, et al. It is free and open-source software released under an MIT License.

<span class="mw-page-title-main">Jekyll (software)</span> Ruby-based static website generator

Jekyll is a static site generator written in Ruby by Tom Preston-Werner. It is distributed under the open source MIT license.

Caddy is an extensible, cross-platform, open-source web server written in Go.

Tom's Obvious, Minimal Language 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 it is designed to map unambiguously to a dictionary. Originally created by Tom Preston-Werner, its specification is open source. TOML is used in a number of software projects and is implemented in many programming languages.

Hugo is a static site generator written in Go. Steve Francia originally created Hugo as an open source project in 2013. Since v0.14 in 2015, Hugo has continued development under the lead of Bjørn Erik Pedersen with other contributors. Hugo is licensed under the Apache License 2.0.

<span class="mw-page-title-main">Netlify</span> American cloud computing company

Netlify is a remote-first cloud computing company that offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites.

Jamstack, previously stylized as JAMStack, is a web development architecture pattern and solution stack. The acronym "JAM" stands for JavaScript, API and Markup and was coined by Matt Biilmann in 2015. The idea of combining the use of JavaScript, APIs and markup has existed since the beginnings of HTML5.

<span class="mw-page-title-main">Gatsby (software)</span> Lightweight javascript framework

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX, images, and numerous Content Management Systems such as WordPress, Drupal and more. Since version 4 Gatsby also supports Server-Side Rendering and Deferred Static Generation for rendering dynamic websites on a Node.js server. Gatsby is developed by Gatsby, Inc. which also offered a cloud service, Gatsby Cloud, for hosting Gatsby websites, which was terminated by Netlify in August 2023 to unify it with Netlify Cloud.

Eleventy is a static site generator, a software system for creating websites. It is open source software written in JavaScript. 11ty is noted for its simplicity, and for its support of a large number of template languages. Paired with other technologies, 11ty can be used as part of a Jamstack.

References

  1. "What is a Static Site Generator? How do I find the best one to use?". Netlify. Archived from the original on 2022-09-18. Retrieved 2022-09-18.
  2. "What Is a Static Site Generator, and How Can It Help Your Website Creation Process?". TeleportHQ. 2021-12-15. Archived from the original on 2022-09-18. Retrieved 2022-09-18.
  3. "What is a static site generator?". 2022-09-18. Archived from the original on 2022-09-18. Retrieved 2022-09-18.
  4. 1 2 3 4 5 6 7 "Static Site Generators - Top Open Source SSGs | Jamstack". Jamstack.org. Archived from the original on 2022-09-18. Retrieved 2022-09-18.
  5. "Static Site Generator". Gatsby. Archived from the original on 2022-09-18. Retrieved 2022-09-18.