Learning Objectives

• Understand the advantages of static web sites
• Understand what a static site generator does
• Create a simple static site generator with Node.js and NPM modules

Static Web Pages

Wikipedia static web page

A static web page is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application.

Why Static Websites?

Read: 6 Reasons Why You Should Go for a Static Website

1. Security
2. Reliability
3. Speed
4. Hosting and Price
5. Scalability
6. Technology Advancements

Managing Static Websites

1. Creating multiple pages with consistent look and feel
2. Linking multiple pages
3. Updating multiple pages
4. Checking/Testing multiple pages

Static Site Generators

• Software to help create and maintain static sites
• Huge range of functionality from very specific blog or documentation generators to general purpose libraries/platforms
• Main languages used: JavaScript, Python, Ruby, and Go
• For up to date list of popular frameworks see StaticGen

Modern Examples

JavaScript/Node.js very general generators with no framework dependencies

• Metalsmith Home Page: “An extremely simple, pluggable static site generator.”

• Eleventy: “Eleventy is a simpler static site generator.”

Basic Concepts I

From Metalsmith:

The task of a static site generator is to produce static build files that can be deployed to a web server. These files are built from source files.

Basic Concepts II

From Metalsmith basic processing flow:

1. from a source directory read the source files and extract their information
2. manipulate the information
3. write the manipulated information to files into a destination directory

Ingredients

• Source files: Markdown, partial HTML, data/JSON
• Metadata extraction: extract meta from source files (not needed if data files)
• Templates: Used for “layout” of processed source
• Driver program or tool (with configuration) to control processing

Attaching Metadata to Markdown

YAML frontmatter

---
title: About the Windsurf Foiling Club
author: Dr. B.
description: The Bay area windsurf foiling club is my club!
moreStuff: This is a front matter in YAML
---

# The Bay Area Windsurf Foiling Club

## Windsurf Foiling

What is *foiling*? This is the practice and art of adding an
underwater **wing** to a water craft which under appropriate
conditions will raise the bulk of the water craft out of the
water thus reducing drag.

Yes *foiling* literally gets you *high*. Foils have
been applied to watercraft as diverse as Americas cup
yachts to kite surfers . Our club, however,
is non-exclusively concerned with *foiling* **windsurfers**.

Splitting Front Matter and Content 1

Both metalsmith and eleventy use the gray-matter to separate the metadata from the content.

Splitting Front Matter and Content 2

gray-matter takes something like this

---
title: Hello
slug: home
---
<h1>Hello world!</h1>

Splitting Front Matter and Content 3

gray-matter separates content and data

{
  content: '<h1>Hello world!</h1>',
  data: { 
    title: 'Hello', 
    slug: 'home' 
  }
}

Process Content

• For content that is Markdown run content through a Markdown processor.

• Send processed content and metadata to template engine for processing

• Write output to files in appropriate directories.