gatsby.pdf.html

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Stay Static - Build Single-Page Static (Web)Sites w/ the Great Gatsby</title>
   
   

<style>
html, body { margin: 0; padding: 0; }

body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

a:link, a:visited { color: black; }

h1 { font-size: 30pt;  }
h2 { font-size: 28pt;  }
h3 { font-size: 25pt;  }
p, li, dt, dd, td, th { font-size: 18pt; }

pre { font-size: 14pt;  }
pre.small { font-size: 11pt; }

pre.code {
        background-color: azure;
        padding: 5px;
      }
     
ul { list-style-type: square; }    
   
.center { text-align: center; }   
     
.slide { page-break-after: always;
         min-height: 100mm;
         padding: 40px;
         
         border: 1px dotted black;

/*      
  background: -moz-linear-gradient( top, maroon, red);
*/
       }


pre {
  padding: 4px 4px 4px 4px;
  border-top: #bbb 1px solid;
  border-bottom: #bbb 1px solid;
  background: #f3f3f3;
}



/*
for princexml (CSS3 paged media support)
@page { size: A4 landscape }
*/
</style>

</head>
<body>

<div class="presentation">

<div class='slide '>


<!-- _S9SLIDE_ -->
<h1 id="agenda">Agenda</h1>

<ul>
  <li>Hello, Gatsby!</li>
  <li>Gatsby Stay Static Sample Site - Posts, Pages, Datafiles</li>
  <li>Markdown Madness - Markdown Extensions n Goodies</li>
  <li>Universal (“Isomorphic”) HTML Components (Templates) in React w/ JSX</li>
  <li>Inside Gatsby - Building Blocks - React, Webpack, and Friends</li>
  <li>Demo - Go Live - Free (Static) Site Hosting Options</li>
  <li>Why Static?</li>
  <li>Thanks - Stay Static</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="dynamic-website-generators">Dynamic (Web)Site Generators</h1>

<p><strong>The Biggies</strong> (PHP Rules!)</p>

<ul>
  <li>WordPress</li>
  <li>Drupal</li>
  <li>Joomla!</li>
</ul>

<p>On your live production site requires</p>

<ul>
  <li>database (e.g. mysql)</li>
  <li>application server (e.g. mod_php)</li>
  <li>web server (e.g. apache)</li>
</ul>

<p>On every request - (re)builds the page on-the-fly e.g. queries the database, runs scripts,
merges templates, etc.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-website-generators--builders">Static (Web)Site Generators / Builders</h1>

<p>On your live production site requires</p>

<ul>
  <li>
    <p>web server (e.g. apache, ngnix, etc.) only</p>
  </li>
  <li><strong>NO</strong> database needed</li>
  <li><strong>NO</strong> application server needed</li>
</ul>

<p>Note: You can even go “server-less” e.g.
host your site on a web service e.g. Amazon S3 (Simple Storage Service).</p>

<p>You build the complete site, that is, <strong>all pages</strong> “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”.</p>

<p>(*) and media files e.g. graphics, music recordings, etc.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-website-generators--builders-1">Static (Web)Site Generators / Builders</h1>

<p><strong>The Biggies</strong> in 1999</p>

<ol>
  <li>Macromedia Dreamweaver</li>
  <li>Microsoft FrontPage</li>
  <li>Netscape Composer</li>
</ol>

<p>And today?</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="hello-gatsby">Hello, Gatsby!</h1>

<p>by Kyle Mathews et al (★3 071) -
github: <a href="https://github.com/gatsbyjs/gatsby"><code>gatsbyjs/gatsby</code></a></p>

<p><img src="i/staticgen-gatsby.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="how-did-it-all-get-started">How Did It All Get Started?</h1>

<p>Why not build (another) blog w/ React.js in 5 minutes?
The world’s 1st Gatsby site?</p>

<p><strong>Bricolage</strong> (web: <a href="https://bricolage.io">bricolage.io</a>, github: <a href="https://github.com/KyleAMathews/blog">KyleAMathews/blog</a>) - a blog written
 by <strong>Kyle Mathews</strong> who lives and works in San Francisco building useful things.</p>

<p><img src="i/bricolage.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-in-the-real-world">Static in the “Real World”</h1>

<ul>
  <li>Books</li>
  <li>Magazines</li>
  <li>Newspapers</li>
  <li>etc.</li>
</ul>

<h3 id="world-classics-trivia-quiz">World Classics Trivia Quiz</h3>

<p>Q: The Great Gatsby by <em>__</em> ?</p>

<ul>
  <li>[ A ] Robert Louis Stevenson</li>
  <li>[ B ] Francis Scott Fitzgerald</li>
  <li>[ C ] Stephen Edwin King</li>
  <li>[ D ] Kyle A Mathews</li>
</ul>

<p>Q: Last Update In (Static Since) <strong>__</strong> ?</p>

<ul>
  <li>[ A ] 1855</li>
  <li>[ B ] 1885</li>
  <li>[ C ] 1925</li>
  <li>[ D ] 2015</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="world-classics-triva-quiz-cont---answers">World Classics Triva Quiz (Cont.) - Answers</h1>

<p><img src="i/greatgatsby.jpg" alt="" /></p>

<p>The Great Gatsby is a <strong>1925</strong> novel written by American author
<strong>Francis Scott Fitzgerald</strong> …
a portrait of the Jazz Age or the Roaring Twenties …</p>

<p>(Source: <a href="https://en.wikipedia.org/wiki/The_Great_Gatsby">Wikipedia - The Great Gatsby</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="getting-started-w-gatsby">Getting Started w/ Gatsby</h1>

<p>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.:</p>

<pre><code>$ npm install -g gatsby
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-commands">Gatsby Commands</h1>

<p>Try:</p>

<pre><code>$ gatsby -h
</code></pre>

<p>prints</p>

<pre><code>$ gatsby -h

Usage:  
  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.

Options:
  -h, --help     output usage information
  -V, --version  output the version number
</code></pre>

<p>See the <a href="https://github.com/statictimes/quickrefs/blob/master/GATSBY.md">Gatsby Quick Reference (Cheat Sheet)</a></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-quick-starter---ready-to-usefork-themes">Gatsby Quick Starter - Ready-to-Use/Fork Themes</h1>

<ul>
  <li>Simple blog</li>
  <li>Simple documentation site</li>
  <li>Kitchen sink demo site (default)</li>
</ul>

<p>To get started use:</p>

<pre><code>$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
</code></pre>

<p>Basically the same as:</p>

<pre><code>$ git clone https://github.com/gatsbyjs/gatsby-starter-blog
$ cd gatsby-starter-blog
$ npm install
</code></pre>

<p>To test drive use:</p>

<pre><code>$ gatsby develop  
</code></pre>

<p>And open the browser. Voila.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-sample-site">Gatsby Stay Static Sample Site</h1>

<p>Shows how-to-use:</p>

<ul>
  <li>Posts (e.g. Blog News ‘n’ Updates Posts Sorted by Date)</li>
  <li>Pages  (e.g. About Page)</li>
  <li>Datafiles (e.g. Links ‘n’ Bookmarks)</li>
</ul>

<p><img src="i/staystatic-samplesite.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-in-action---why-gatsby-live-hot-reloading-demo">Gatsby In Action - Why Gatsby? Live Hot Reloading Demo</h1>

<p>No. 1 Selling Point - Hot (!) Reloading - Thanks to Webpack</p>

<p>Works for:</p>

<ul>
  <li>React Web Components (Templates)</li>
  <li>Your Writing (in Markdown) e.g. Posts / Pages</li>
  <li>Styles</li>
  <li>Configuration in config.toml e.g. Site Title, Author Name, etc.</li>
</ul>

<p>Does NOT Work for:</p>

<ul>
  <li>Adding New Files (Requires Server Restart - Sorry.)</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---file-structure">Gatsby Stay Static Site - File Structure</h1>

<pre><code>│   config.toml
|   html.js
|   package.json
├───components/
│      Footer.js
│      Header.js
│      LinkList.js
│      PostList.js
├───css/
|      style.css
├───data/
|      links.js
├───pages/
|   |  404.md
|   |  index.js
|   |  _template.js
|   ├───pages/
|   |      about.md
|   └───posts/
|          2014-11-11-new-repo-maps.md
|          2014-12-12-new-build-system.md
|          2015-08-25-new-season.md
|          _template.js
└───wrappers/
      md.js
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby"><code>staystatic/gatsby</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---posts-with-front-matter">Gatsby Stay Static Site - Posts with Front Matter</h1>

<p>YAML + Markdown</p>

<pre><code>---
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](http://openbeer.github.io/maps/at)
(~200 breweries n brewpubs) live or
[check the source](https://github.com/openbeer/maps) using the mapbox.js mapping library.

...
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/pages/posts/2014-11-11-new-repo-maps.md"><code>staystatic/gatsby/pages/posts/new-repo-maps.md</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---pages-with-front-matter">Gatsby Stay Static Site - Pages with Front Matter</h1>

<p>YAML + Markdown</p>

<pre><code>---
title: About
path:  "/about/"
---

Gatsby Static Site Sample. Shows how to use:

1. Pages (see `pages/pages/about.md`)
2. Posts (see `pages/posts/*.md`)
3. Custom Content Types (see `data/links.js`)
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/pages/pages/about.md"><code>staystatic/gatsby/pages/pages/about.md</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="markdown-madness---markdown-library-options-in-gatsby">Markdown Madness - Markdown Library Options in Gatsby</h1>

<p><strong>markdown-it</strong> ★1 858 by Vitaly Puzrin, Alex Kocharin et al (github: <a href="https://github.com/markdown-it/markdown-it">markdown-it/markdown-it</a>)</p>

<p>Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins &amp; high speed</p>

<p>Extensions / Goodies Include:</p>

<ul>
  <li>Tables</li>
  <li>Fenced Code Blocks (“GitHub”-Style)</li>
  <li>Footnotes</li>
  <li>And Much more</li>
</ul>

<p><a href="https://markdown-it.github.io">Try it live</a></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="markdown-madness---markdown-goodies---tables">Markdown Madness - Markdown Goodies - Tables</h1>

<pre><code>Feature                  | Gatsby
------------------------ | ------------
Settings / Configuration | TOML
Front Matter / Meta Data | YAML
Datafiles                | JavaScript
HTML Templates           | JSX
HTML "Shortcodes"        | Markdown
</code></pre>

<p>becomes</p>

<table>
  <thead>
    <tr>
      <th>Feature</th>
      <th>Gatsby</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Settings / Configuration</td>
      <td>TOML</td>
    </tr>
    <tr>
      <td>Front Matter / Meta Data</td>
      <td>YAML</td>
    </tr>
    <tr>
      <td>Datafiles</td>
      <td>JavaScript</td>
    </tr>
    <tr>
      <td>HTML Templates</td>
      <td>JSX</td>
    </tr>
    <tr>
      <td>HTML “Shortcodes”</td>
      <td>Markdown</td>
    </tr>
  </tbody>
</table>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="markdown-madness---markdown-goodies---fenced-code-blocks">Markdown Madness - Markdown Goodies - Fenced Code Blocks</h1>

<pre><code>```
// Enable everything
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true,
});
```
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="markdown-madness---markdown-goodies---footnotes">Markdown Madness - Markdown Goodies - Footnotes</h1>

<pre><code>This is a footnote.[^1]

[^1]: the footnote text.
</code></pre>

<p>becomes</p>

<p>This is a footnote. <sup>1</sup></p>

<ol>
  <li>the footnote text. ↩</li>
</ol>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---datafiles">Gatsby Stay Static Site - Datafiles</h1>

<p><strong>Datafile</strong> - JavaScript</p>

<pre><code>//////////////////////////
//  Links 'n' Bookmarks

export default [
 { title: "football.db - Open Football Data",
   url:   "https://github.com/openfootball" },
 { title: "beer.db - Open Beer, Brewery 'n' Brewpub Data",
   url:   "https://github.com/openbeer" },
 { title: "world.db - Open World Data",
   url:   "https://github.com/openmundi" }
]
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/data/links.js"><code>staystatic/gatsby/data/links.js</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site----html-web-components---loops">Gatsby Stay Static Site  - HTML Web Components - Loops</h1>

<p><strong>Templates</strong> - React HTML Web Components</p>

<pre><code>class LinkList extends React.Component {
  render() {
    const {links} = this.props;
    return (
      &lt;ul&gt;
        {links.map( link =&gt; &lt;li&gt;&lt;a href={link.url}&gt;{link.title}&lt;/a&gt;&lt;/li&gt; )}
      &lt;/ul&gt;
    )
  }
}

// Use like:
//   &lt;LinkList links={links}/&gt;
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/components/LinkList.js"><code>staystatic/gatsby/components/LinkList.js</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site----html-web-components---loops-cont">Gatsby Stay Static Site  - HTML Web Components - Loops (Cont.)</h1>

<pre><code>import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'

class PostList extends React.Component {
  render () {
    const {posts} = this.props;
    return (
      &lt;ul&gt;
        {posts.map( post =&gt; &lt;li&gt;&lt;Link to={prefixLink(post.path)}&gt;{post.data.title}&lt;/Link&gt;&lt;/li&gt; )}
      &lt;/ul&gt;
    )
  }
}

// Use like:
//  &lt;PostList posts={posts}/&gt;
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/components/PostList.js"><code>staystatic/gatsby/components/PostList.html</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---html-web-components---includes">Gatsby Stay Static Site - HTML Web Components - Includes</h1>

<p><strong>Templates</strong> - React HTML Web Components</p>

<pre><code>import Header from 'components/Header'
import Footer from 'components/Footer'

class MasterTemplate extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;Header/&gt;
        &lt;div&gt;
          {this.props.children}
        &lt;/div&gt;
        &lt;Footer/&gt;
      &lt;/div&gt;
    )
  }
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/pages/_template.js"><code>staystatic/gatsby/pages/_templates.js</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---html-web-components---includes-cont">Gatsby Stay Static Site - HTML Web Components - Includes (Cont.)</h1>

<pre><code>class Footer extends React.Component {
  render() {
    return (
      &lt;div id="footer"&gt;
          A &lt;a href="http://staystatic.github.io"&gt;Stay Static&lt;/a&gt; Sample Site
      &lt;/div&gt;
      )
  }
}
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/components/Footer.js"><code>staystatic/gatsby/components/Footer.js</code></a>)</p>

<pre><code>import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'


class Header extends React.Component {
  render() {
    return (
      &lt;div id="header"&gt;
        &lt;table style={{width: "100%"}}&gt;
         &lt;tbody&gt;
         &lt;tr&gt;
           &lt;td&gt;
            &lt;Link to={prefixLink('/')}&gt;{ config.siteTitle }&lt;/Link&gt;
           &lt;/td&gt;
           &lt;td style={{textAlign: "right"}}&gt;
            &lt;Link to={prefixLink('/about/')}&gt;About&lt;/Link&gt;
           &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      )
  }
}
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/components/Header.js"><code>staystatic/gatsby/components/Header.js</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site---configuration--settings">Gatsby Stay Static Site - Configuration / Settings</h1>

<p>TOML</p>

<pre><code>siteTitle  = "Gatsby Stay Static Site Sample"
linkPrefix = "/sites/gatsby"
</code></pre>

<p>(Source: <a href="https://github.com/staystatic/gatsby/blob/master/config.toml"><code>staystatic/gatsby/config.toml</code></a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby---summary">Gatsby - Summary</h1>

<table>
  <thead>
    <tr>
      <th>-</th>
      <th>Gatsby</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>GitHub Stars (+1s)</td>
      <td>★3 071</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Settings / Configuration</td>
      <td>TOML</td>
    </tr>
    <tr>
      <td>HTML Templates</td>
      <td>React</td>
    </tr>
    <tr>
      <td>. Layouts</td>
      <td>React</td>
    </tr>
    <tr>
      <td>. Includes</td>
      <td>React</td>
    </tr>
    <tr>
      <td>Front Matter / Meta Data</td>
      <td>YAML</td>
    </tr>
    <tr>
      <td>Datafiles</td>
      <td>JavaScript</td>
    </tr>
    <tr>
      <td>CSS Preprocessing</td>
      <td>PostCSS etc.</td>
    </tr>
    <tr>
      <td>HTML “Shortcodes”</td>
      <td>Markdown</td>
    </tr>
  </tbody>
</table>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site-demo">Gatsby Stay Static Site Demo</h1>

<pre><code>$ gatsby build
</code></pre>

<p>results in</p>

<pre><code>Generating CSS
Generating Static HTML
Compiling production bundle.js
Copying assets
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="gatsby-stay-static-site-demo-cont">Gatsby Stay Static Site Demo (Cont.)</h1>

<p>File Structure in <code>/public</code>:</p>

<pre><code>|   404.html
|   bundle.js
|   bundle.js.map
|   index.html
|   styles.css
├───about/
|       index.html
└───post/
    ├───new-build-system/
    |       index.html
    ├───new-repo-maps/
    |       index.html
    |
    └───new-season/
            index.html
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="going-live---free-static-site-hosting-options">Going Live - Free (Static) Site Hosting Options</h1>

<ul>
  <li>GitHub Pages      – use git push</li>
  <li>GitLab Pages      – use git push</li>
  <li>Surge.sh  – go live with six keystrokes - s u r g e [ENTER]</li>
  <li>Google Firebase (Free Tier)</li>
  <li>And Many More</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="why-static---static-is-the-new-dynamic">Why Static? - Static is the New Dynamic</h1>

<ul>
  <li>
    <p>Fast, Faster, Fastest</p>
  </li>
  <li>
    <p>Simple, Simpler, Simplest</p>
  </li>
  <li>
    <p>Pretty, Prettier, Prettiest</p>
    <ul>
      <li>e.g. designer nirvana - do-it-yourself - full control over your design; use Bootstrap, Material, or what not.</li>
    </ul>
  </li>
</ul>

<p>Bonus: Secure e.g. just a bunch of (static) files on your server.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="why-static---static-is-the-new-dynamic-cont">Why Static? - Static is the New Dynamic (Cont.)</h1>

<p>Some Articles:</p>

<ul>
  <li><a href="https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing"><strong>Why Static Website Generators Are The Next Big Thing</strong></a> by Mathias Biilmann Christensen, Nov 2015; Smashing Magazine</li>
  <li><a href="https://www.sitepoint.com/7-reasons-use-static-site-generator"><strong>Seven Reasons to Use a Static Site Generator</strong></a> by Craig Buckler, March 2016; Site Point</li>
  <li><a href="https://www.netlify.com/blog/2016/05/18/9-reasons-your-site-should-be-static"><strong>Nine Reasons Your Site Should Be Static</strong></a> by Aaron Autrand, May 2016; Netlify</li>
  <li><a href="https://www.netlify.com/blog/2016/05/24/5-bullst-reasons-not-to-use-a-static-generator"><strong>Five Bullshit Reasons Not to Use a Static Generator</strong></a>
by Aaron Autrand, May 2016; Netlify
    <ul>
      <li>I want good SEO!</li>
      <li>Updating content is too hard! I can’t use a CMS!</li>
      <li>There’s no way for users to interact with my content!</li>
      <li>There are too many choices!</li>
      <li>It takes too long to set up!</li>
    </ul>
  </li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="thanks---stay-static">Thanks - Stay Static</h1>

<p><strong>Stay Static Sample Sites (Showcase)</strong></p>

<ul>
  <li><a href="http://staystatic.github.io">Stay Static</a>
    <ul>
      <li><a href="https://github.com/staystatic/hugo"><code>/hugo</code></a></li>
      <li><a href="https://github.com/staystatic/jekyll"><code>/jekyll</code></a></li>
      <li><a href="https://github.com/staystatic/middleman"><code>/middleman</code></a></li>
      <li><a href="https://github.com/staystatic/webgen"><code>/webgen</code></a></li>
      <li><a href="https://github.com/staystatic/metalsmith-handlebars"><code>/metalsmith-handlebars</code></a></li>
      <li><a href="https://github.com/staystatic/metalsmith-nunjucks"><code>/metalsmith-nunjucks</code></a></li>
      <li><a href="https://github.com/staystatic/gatsby"><code>/gatsby</code></a></li>
    </ul>
  </li>
</ul>

<p><strong>Stay Up-To-Date - Follow Along</strong></p>

<ul>
  <li>For Vienna.html News =&gt; Follow <a href="https://twitter.com/viennahtml">@viennahtml</a></li>
  <li>For Static Site News =&gt; Follow <a href="https://twitter.com/statictimes">@statictimes</a></li>
  <li>For Writing in Plain Text w/ Markdown News =&gt; Follow <a href="https://twitter.com/manuscriptsnews">@manuscriptsnews</a></li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="appendix-static-site-builders--generators">Appendix: Static Site Builders / Generators</h1>

<p>StaticGen.com</p>

<p><img src="i/site-staticgen-com-2016.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="appendix-more-reactjs-static-site-builders--generators">Appendix: More React.js Static Site Builders / Generators</h1>

<p><strong>Phenomic</strong> (web: <a href="https://phenomic.io">phenomic.io</a>, github: <a href="https://github.com/MoOx/phenomic">MoOx/phenomic</a>) ★823
by Maxime Thirouin et al</p>

<p><strong>Leo</strong> (github: <a href="https://github.com/superawesomelabs/leo">superawesomelabs/leo</a>) ★15
by Christopher Biscardi et al</p>

<p>And others.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="appendix-viennahtml---join-us---no-database-required">Appendix: Vienna.html - Join Us - No Database Required</h1>

<p>Next meetup in fall 2016. Free. Everyone Welcome.</p>

<p>Example talks from last July meetup include:</p>

<ul>
  <li>Using PostCSS with Static Site Builders by Max Stoiber</li>
  <li>Real World Static Site Showcase I - Inside ColorSnapper - Changelog Generation w/ Metalsmith.js and a Custom Plugin by Andrey Okonetchnikov</li>
  <li>Real World Static Site Showcase II - Inside Contentful - Turn Your Blog Posts into Facebook Instant Articles w/ Middleman by Rouven Weßling (Contentful)</li>
  <li>Real World Static Site Showcase III - Inside Chip Shop - Build Your Silicon Empire - Build A Cards Game w/ Jekyll (n Markdown) by Chris Ward</li>
</ul>

<p>More info <a href="http://viennahtml.github.io"><code>viennahtml.github.io »</code></a></p>
</div>


  </div> <!-- presentation -->
</body>
</html> 
