Static Site Generators Group 2 Reinhard Egger, Daniel Geiger, Lorenz Leitner and Peter Oberrauner 706.041 Information Architecture and Web Usability WS 2019/2020 Graz University of Technology 02 Dec 2019 Abstract Static Site Generators are tools to automatically create fully-fledged HTML web pages that can be served statically to each client with no need for regeneration. In an age of per-client dynamically created web pages, static web pages offer a valuable alternative, the benefits of which are discussed in this survey paper. The way in which Static Site Generators work and what technologies they use is described, as well as how content can be rendered on the web in general. An overview of the most relevant Static Site Generators and their features is given, although not all can be mentioned due to the sheer number of Static Site Generators in existence. A concluding recommendation for people looking to choose a tool suited to their liking is provided as well. © Copyright 2019 by the author(s), except as otherwise noted. This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Contents Contents iii List of Figures v List of Tables vii List of Listings ix 1 Introduction 1 1.1 Basics . .1 1.1.1 How They Work . .1 1.1.2 Example . .1 1.2 Alternatives . .1 1.2.1 CMS . .2 1.2.2 Flat-File CMS . .2 2 Methods of Rendering Content on the Web5 2.1 Server-Side Rendering (SSR) . .5 2.1.1 Strengths . .5 2.1.2 Weaknesses . .5 2.2 Client-Side Rendering (CSR) . .6 2.2.1 Strengths . .6 2.2.2 Weaknesses . .6 2.3 Static Rendering . .6 2.3.1 Strengths . .6 2.3.2 Weaknesses . .7 2.3.3 Rendering of Dynamic Content . .7 3 Templating Engines9 3.1 Advantages . .9 3.2 Example . .9 3.3 Types of Different Templating Engines . .9 3.4 Consolidate.js . .9 3.5 Syntax Similarities . 10 i 4 Overview of Static Site Generators (Standout Features) 11 4.1 Jekyll (Ruby) . 11 4.1.1 Input Languages . 11 4.1.2 Main Use . 11 4.1.3 Templating Engine . 12 4.1.4 Content Model . 12 4.1.5 Asset Pipeline . 12 4.1.6 Extension Possibility . 12 4.2 Hugo (Go) . 12 4.2.1 Input Languages . 12 4.2.2 Usability . 13 4.2.3 Community . 13 4.2.4 Build Performance . 13 4.2.5 Main Use . 13 4.2.6 Templating Engine . 13 4.2.7 Content Model . 13 4.2.8 Asset Pipeline . 13 4.2.9 Extension Possibility . 13 4.3 Metalsmith (JS) . 14 4.3.1 Input Languages . 14 4.3.2 Usability . 14 4.3.3 Community . 14 4.3.4 Build Performance . 14 4.3.5 Main Use . 14 4.3.6 Templating Engine . 14 4.3.7 Extension Possibility . 14 4.4 Wintersmith (JS) . 15 4.4.1 Input Languages . 15 4.4.2 Usability . 15 4.4.3 Community . 15 4.4.4 Build Performance . 15 4.4.5 Main Use . 15 4.4.6 Templating Engine . 15 4.4.7 Extension Possibility . 15 4.5 Sculpin (PHP) . 15 4.5.1 Input Languages . 16 4.5.2 Usability . 16 4.5.3 Community . 16 4.5.4 Build Performance . 16 4.5.5 Main Use . 16 4.5.6 Templating Engine . 16 4.5.7 Extension Possibility . 16 4.6 Frontend-Framework-Based SSGs (JS) . 16 4.6.1 Input Languages . 16 ii 4.6.2 Usability . 17 4.6.3 Community . 17 4.6.4 Build Performance . 17 4.6.5 Main Use . 17 4.6.6 Extension Possibility . 17 4.6.7 Gatsby . 17 4.6.8 React Static . 18 4.6.9 Next . 18 4.6.10 Nuxt . 19 4.6.11 Gridsome . 19 4.7 Overview of SSG Characteristics . 19 5 Concluding Remarks 25 5.1 Ranking . 25 5.2 Recommendation . 25 Bibliography 27 iii iv List of Figures 1.1 Static Site Generator Diagram . .2 1.2 Hugo Example . .3 v vi List of Tables 4.1 Characteristics overview of Hugo, Metalsmith, Next.js, Jekyll . 20 4.2 Characteristics overview of Nuxt, Mikser, Harp, Wintersmith . 21 4.3 Characteristics overview of Roots, Middleman, Kirby, Grav . 22 4.4 Characteristics overview of Pico CMS, Gatsby, React Static, Sculpin . 23 vii viii List of Listings 1.1 Hugo Example..........................................2 3.1 Pug Syntax Example....................................... 10 3.2 Pug Generated Code Example.................................. 10 4.1 FrontMatter............................................ 12 4.2 GatsbyFileStructure....................................... 17 4.3 GatsbyTemplateExample.................................... 18 ix x Chapter 1 Introduction Static Site Generators are increasingly popular tools to generate Hypertext Markup Language (HTML) web pages. Before static site generators existed, web developers wrote HTML web pages by hand, which is time-consuming and does not adhere to the Don’t Repeat Yourself (DRY) principle, as much of the HTML code is essentially the same, most often only differing in content, while the structure code necessary for the page setup remains the same. 1.1 Basics Static site generators take care of much of the leg work web developers used to have to do. Only the content and some optional metadata need to be entered manually, the surrounding HTML code is created.