Dynamic (Web)Site Generators

The Biggies (PHP Rules!)

On your live production site requires

On every request - (re)builds the page on-the-fly e.g. queries the database, runs scripts, merges templates, etc.

Static (Web)Site Generators / Builders

On your live production site requires

Note: You can even go “server-less” e.g. host your site on a web service e.g. Amazon S3 (Simple Storage Service).

You build the complete site, that is, all pages “ahead-of-time” on a “build” machine. You will end-up with a bunch of (static) ready-to-use HTML, CSS and JS files (*). Upload to production site and you’re live w/ a kind of “super cache”.

(*) and media files e.g. graphics, music recordings, etc.

Static (Web)Site Generators / Builders

The Biggies in 1999

  1. Macromedia Dreamweaver
  2. Microsoft FrontPage
  3. Netscape Composer

And today?

Hello, Gatsby!

by Kyle Mathews et al (★3 071) - github: gatsbyjs/gatsby

How Did It All Get Started?

Why not build (another) blog w/ React.js in 5 minutes? The world’s 1st Gatsby site?

Bricolage (web:, github: KyleAMathews/blog) - a blog written by Kyle Mathews who lives and works in San Francisco building useful things.

Static in the “Real World”

World Classics Trivia Quiz

Q: The Great Gatsby by __ ?

Q: Last Update In (Static Since) __ ?

World Classics Triva Quiz (Cont.) - Answers

The Great Gatsby is a 1925 novel written by American author Francis Scott Fitzgerald … a portrait of the Jazz Age or the Roaring Twenties …

(Source: Wikipedia - The Great Gatsby)

Getting Started w/ Gatsby

Gatsby is a JavaScript package using Webpack, React, React-Router, Markdown and more to let you build static (web)sites. Use npm to install e.g.:

$ npm install -g gatsby

Gatsby Commands


$ gatsby -h


$ gatsby -h

  gatsby [command] [options]

Available Commands:
  new [rootPath] [starter]  Create new Gatsby project.
  develop [options]         Start development server. Watches files and rebuilds and hot reloads
                              if something changes
  build [options]           Build a Gatsby project.
  serve-build [options]     Serve built site.

  -h, --help     output usage information
  -V, --version  output the version number

See the Gatsby Quick Reference (Cheat Sheet)

Gatsby Quick Starter - Ready-to-Use/Fork Themes

To get started use:

$ gatsby new blog

Basically the same as:

$ git clone
$ cd gatsby-starter-blog
$ npm install

To test drive use:

$ gatsby develop  

And open the browser. Voila.

Gatsby Stay Static Sample Site

Shows how-to-use:

Gatsby In Action - Why Gatsby? Live Hot Reloading Demo

No. 1 Selling Point - Hot (!) Reloading - Thanks to Webpack

Works for:

Does NOT Work for:

Gatsby Stay Static Site - File Structure

│   config.toml
|   html.js
|   package.json
│      Footer.js
│      Header.js
│      LinkList.js
│      PostList.js
|      style.css
|      links.js
|   |
|   |  index.js
|   |  _template.js
|   ├───pages/
|   |
|   └───posts/
|          _template.js

(Source: staystatic/gatsby)

Gatsby Stay Static Site - Posts with Front Matter

YAML + Markdown

title: "beer.db - New Repo /maps - Free 'Full-Screen' Interactive Beer Maps w/ Brewery Listings"
date:   2015-08-25
layout: post
path: "/posts/new-repo-maps/"

The beer.db project - offering free public domain beer, brewery
and brewpubs data - added a new repo, that is, `/maps`
for hosting 'full-screen' interactive beer maps with brewery listings.

See an example [beer map for Austria](
(~200 breweries n brewpubs) live or
[check the source]( using the mapbox.js mapping library.


(Source: staystatic/gatsby/pages/posts/

Gatsby Stay Static Site - Pages with Front Matter

YAML + Markdown

title: About
path:  "/about/"

Gatsby Static Site Sample. Shows how to use:

1. Pages (see `pages/pages/`)
2. Posts (see `pages/posts/*.md`)
3. Custom Content Types (see `data/links.js`)

(Source: staystatic/gatsby/pages/pages/

Markdown Madness - Markdown Library Options in Gatsby

markdown-it ★1 858 by Vitaly Puzrin, Alex Kocharin et al (github: markdown-it/markdown-it)

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

Extensions / Goodies Include:

Try it live

Markdown Madness - Markdown Goodies - Tables

Feature                  | Gatsby
------------------------ | ------------
Settings / Configuration | TOML
Front Matter / Meta Data | YAML
Datafiles                | JavaScript
HTML Templates           | JSX
HTML "Shortcodes"        | Markdown


Feature Gatsby
Settings / Configuration TOML
Front Matter / Meta Data YAML
Datafiles JavaScript
HTML Templates JSX
HTML “Shortcodes” Markdown

Markdown Madness - Markdown Goodies - Fenced Code Blocks

// Enable everything
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true,

Markdown Madness - Markdown Goodies - Footnotes

This is a footnote.[^1]

[^1]: the footnote text.


This is a footnote. 1

  1. the footnote text. ↩

Gatsby Stay Static Site - Datafiles

Datafile - JavaScript

//  Links 'n' Bookmarks

export default [
 { title: "football.db - Open Football Data",
   url:   "" },
 { title: "beer.db - Open Beer, Brewery 'n' Brewpub Data",
   url:   "" },
 { title: "world.db - Open World Data",
   url:   "" }

(Source: staystatic/gatsby/data/links.js)

Gatsby Stay Static Site - HTML Web Components - Loops

Templates - React HTML Web Components

class LinkList extends React.Component {
  render() {
    const {links} = this.props;
    return (
        { link => <li><a href={link.url}>{link.title}</a></li> )}

// Use like:
//   <LinkList links={links}/>

(Source: staystatic/gatsby/components/LinkList.js)

Gatsby Stay Static Site - HTML Web Components - Loops (Cont.)

import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'

class PostList extends React.Component {
  render () {
    const {posts} = this.props;
    return (
        { post => <li><Link to={prefixLink(post.path)}>{}</Link></li> )}

// Use like:
//  <PostList posts={posts}/>

(Source: staystatic/gatsby/components/PostList.html)

Gatsby Stay Static Site - HTML Web Components - Includes

Templates - React HTML Web Components

import Header from 'components/Header'
import Footer from 'components/Footer'

class MasterTemplate extends React.Component {
  render() {
    return (

(Source: staystatic/gatsby/pages/_templates.js)

Gatsby Stay Static Site - HTML Web Components - Includes (Cont.)

class Footer extends React.Component {
  render() {
    return (
      <div id="footer">
          A <a href="">Stay Static</a> Sample Site

(Source: staystatic/gatsby/components/Footer.js)

import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'

class Header extends React.Component {
  render() {
    return (
      <div id="header">
        <table style={{width: "100%"}}>
            <Link to={prefixLink('/')}>{ config.siteTitle }</Link>
           <td style={{textAlign: "right"}}>
            <Link to={prefixLink('/about/')}>About</Link>

(Source: staystatic/gatsby/components/Header.js)

Gatsby Stay Static Site - Configuration / Settings


siteTitle  = "Gatsby Stay Static Site Sample"
linkPrefix = "/sites/gatsby"

(Source: staystatic/gatsby/config.toml)

Gatsby - Summary

- Gatsby
GitHub Stars (+1s) ★3 071
Settings / Configuration TOML
HTML Templates React
. Layouts React
. Includes React
Front Matter / Meta Data YAML
Datafiles JavaScript
CSS Preprocessing PostCSS etc.
HTML “Shortcodes” Markdown

Gatsby Stay Static Site Demo

$ gatsby build

results in

Generating CSS
Generating Static HTML
Compiling production bundle.js
Copying assets

Gatsby Stay Static Site Demo (Cont.)

File Structure in /public:

|   404.html
|   bundle.js
|   index.html
|   styles.css
|       index.html
    |       index.html
    |       index.html

Going Live - Free (Static) Site Hosting Options

Why Static? - Static is the New Dynamic

Bonus: Secure e.g. just a bunch of (static) files on your server.

Why Static? - Static is the New Dynamic (Cont.)

Some Articles:

Thanks - Stay Static

Stay Static Sample Sites (Showcase)

Stay Up-To-Date - Follow Along

Appendix: Static Site Builders / Generators

Appendix: More React.js Static Site Builders / Generators

Phenomic (web:, github: MoOx/phenomic) ★823 by Maxime Thirouin et al

Leo (github: superawesomelabs/leo) ★15 by Christopher Biscardi et al

And others.

Appendix: Vienna.html - Join Us - No Database Required

Next meetup in fall 2016. Free. Everyone Welcome.

Example talks from last July meetup include:

More info »