Static site generator

Last updated

Static site generators (SSGs) are 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 websites, (software) documentation, manuals, 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 corresponds to a single web page while a single structural meta file may result in a whole Website through a SPA framework like Angular. The website variable settings are stored in a flat-text 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, 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, 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]

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

<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 networking. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page. As of May 2023, the top 5 most visited websites are Google Search, YouTube, Facebook, Twitter, and Instagram.

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. They are used for user 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 common 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.

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 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 World Wide Web "with its own address". Web pages are delivered by a web server to the user and displayed in a web browser to act as a "retrieval unit" for the information stored within it. A website consists of many web pages linked together under a common domain name. The name "web page" is 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.

<span class="mw-page-title-main">TOML</span> Configuration file format

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 community contributions. TOML is used in a number of software projects, and is implemented in many programming languages. The name "TOML" is an acronym for "Tom's Obvious, Minimal Language" referring to its creator, Tom Preston-Werner.

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. The platform is built on open web standards, making it possible to integrate build tools, web frameworks, APIs, and various web technologies into a unified developer workflow.

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 to create for static and server‑rendered applications

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 offers a cloud service, Gatsby Cloud, for hosting Gatsby websites.

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. CloudFlare (2022-09-18). "What is a static site generator?". 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.