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, Next.js (JavaScript). [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 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, 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.

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

<span class="mw-page-title-main">Website</span> Set of related web pages served from a single domain

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment, or social media. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page. The most-visited sites are Google, YouTube, and Facebook.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

<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.

<span class="mw-page-title-main">JSON</span> Open standard file format and data interchange

JSON 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. 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 a text-based content with a structure and syntax comprising key–value pairs for properties, and sections that organize the properties. The name of these configuration files comes from the filename extension INI, 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.

JSONP, or JSON-P, is a historical JavaScript technique for requesting data by loading a <script> element, which is an element intended to load ordinary JavaScript. It was proposed by Bob Ippolito in 2005. JSONP enables sharing of data bypassing same-origin policy, which disallows running JavaScript code to read media DOM elements or XMLHttpRequest data fetched from outside the page's originating site. The originating site is indicated by a combination of URI scheme, hostname, and port number.

Web2py is an open-source web application framework written in the Python programming language. Web2py allows web developers to program dynamic web content using Python. Web2py is designed to help reduce tedious web development tasks, such as developing web forms from scratch, although a web developer may build a form from scratch if required.

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 a web browser 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 thus 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.

Tom's Obvious, Minimal Language (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 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.

This is a list of articles related to the JavaScript programming language.

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.

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 "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.