The Static Web Revolution

???

---

???

---

???

---

???

---

???

---

???

---

layout: true
class: bg-cover
background-image: url(images/time-traveling.gif)
name: 88mph

---

---

---

---

---

---

---

# The Static Web Revolution

.col.col-4.about.left.centered[

## Steven Hicks
### [@pepopowitz](http://twitter.com/pepopowitz)
### steven.j.hicks@gmail.com
### [bit.ly/static-web-revolution](http://bit.ly/static-web-revolution)

]

???

thank you:
* organizers
* you!

show of hands:
* learned something new
* left a talk inspired
* met someone interesting
* tired of sitting
    if so, stretch

**Contact Info**

---
layout: false
class: bg-cover
background-image: url(images/sponsors.jpg)

???

sponsors

---
layout: true
class: middle
name: intro

.col.col-5.profile.posterized[
![Me](images/steven-hicks-2.jpg)
]

---

.col.col-5[
# Steven Hicks
## JavaScript Engineer????
]

???

I've been building websites for a while.
---
template: title

# A History Of The Web

???

So let's start with a brief history of the internet.

And the best way to talk about history

is to visit it.

---
template: image
class: delorean

![Delorean](images/delorean.png)

???

We'll climb into our time-traveling delorean

---
template: full-screen
background-image: url(images/time-circuits.jpg)

???

set our time circuits back about 20 years

---
template: 88mph

???

When this baby hits 88 mph, I'm going to need your help.

This doesn't work without sound.

I need you all to make sound effects.

---
template: title

# The "Before" Time

???

we'll come out in the "Before" time.

And we'll take a look around, in search of the internet.

---
template: full-screen
background-image: url(images/hot-topic.jpg)

???

We'll probably have to walk past hot topic to find it

---
template: full-screen
background-image: url(images/reel-big-fish.jpg)

???

and OH MY GOSH! look out for RBF!

...

But here, I ...I think I see it.

Here it is, the internet 20 years ago:

---
class: no-footer
template: image

![Geocities](images/geocities.gif)

???

It was built on static HTML

CSS

A ton of blink and marquee tags

And it was probably hosted on geocities.

---
template: full-screen
background-image: url(images/piles-of-files.jpg)

???

And it was hard to maintain all of those static files.

Things got messy pretty quickly.

So since we're developers, ...

---
template: title

# Dynamic back-ends

???

we built dynamic back-ends.

We started with scripting languages

---
template: framework

![PHP](images/php.png)
![ASP](images/aspclassic.png)

???

like PHP and asp...

And those were good

---
template: framework

![ASP.NET](images/asp-net.png)
![Rails](images/rails.jpg)
![NodeJS](images/nodejs.png)

???

Then we built fuller, better frameworks

like asp.net....

And those were great

they made developers lives easier

----eliminated a lot of copy and paste

but it was still the dev’s job to manage the content

---
template: framework

![WordPress](images/wordpress.jpg)
![Drupal](images/drupal.png)
![Umbraco](images/umbraco.png)

???

so we built cms's....

with gui’s for content editing

---
template: image

![Marketing Friend](images/drawings/marketing.png)
???

so now our friends in marketing could manage the site

and this was great, because

it freed us up to do things we want to do

---
template: image
class: no-footer
restart-animation: images/dinojump.gif
name: dino-jump-2

![Dino Jump](images/dinojump.gif)

???

like turning on airplane mode

and playing dino dash

---
template: 88mph

???

we jump back in our time travelling delorean

we'll need our sound effects again

or else we'll be stuck in 1997 listening to "sell out" on repeat for the rest of our days

and we'll come back to present day

and we step out and look around, and...

---
template: full-screen
background-image: url(images/reel-big-fish.jpg)

???

UGH, COME ON

you're still around????!!!

just ignore them - they'll go away.

---
template: image

![Bootstrap](images/bootstrap.jpg)

???

as we look around, we realize the internet now looks like this -

it's bootstrap

if you're fancy, you'll change a couple colors

---
template: image

![WordPress](images/wordpress-admin.jpg)

???

and behind the scenes, a lot of them look like this

the wordpress admin

if you've ever self-hosted wordpress,

---
template: image

![Mauled by a bear](images/bear.jpg)

???

you know that some days feel like this

---
template: title

# How did we get here?

???

---

# The Allure Of The Dynamic CMS

.col.col-5.posterized.profile[
![Fabio](images/fabio-2.jpg)
]

---

???

Who can blame us?

Fabio comes riding in on horseback

Long hair flowing in the wind

Nearly shirtless

Representing the dynamic CMS

And he tells us....

---

## "I'm so easy to set up."

???

---

## "I'm simple enough for anyone to use."

???

Anyone can use my admin

---

## "Any other way would be a maintenance nightmare."

???

And he harkens back to our good old days

Of GeoCities and blink tags and scrolling marquees

And he reminds how difficult it was to maintain static content back then

---

## "That's just how you do it."

???

And eventually we've heard his arguments so many times

that we just go on autopilot.

...

But today...

---
layout: true
template: soliloquy
name: johnny-five

# A Hero Rises

.col.col-5.posterized.profile[
![Supercat](images/supercat-2.jpg)
]

---

???

A hero rises.

for the record - this hero is named supercat...

And she has some questions for us.

---

## "Are we using the right tool?"

???

Supercat wants to know if we are

using the right tool to build our sites.

---

## "Is your content truly dynamic?"

???

she wants to know if our content is as dynamic

as we think it is.

If every user sees the same thing,

isn't that really static content?

---

## "How often does your content change?"

???

And if the content doesn't change that frequently,

why do we need to drive it dynamically?

---

## "Is a dynamic site worth the cost of support?"

???

And one other question she asks is rarely thought about

until you realize you've spent 4 mornings this month trying to get the site back up.

---
layout: true
template: facts

# Surprising Numbers

---

???

And she shows us some surprising numbers.

---

## 32%

### of websites on the internet run on WordPress

.footnote[
[http://stevenhicks.me/wordpress-runs-25-percent](http://stevenhicks.me/wordpress-runs-25-percent)
]
???

And when I started doing this talk a year and a half ago, it was 25%

So it is growing

---

## 70%

### of WordPress installs are vulnerable

.footnote[
[http://stevenhicks.me/wordpress-vulnerabilities](http://stevenhicks.me/wordpress-vulnerabilities)
]

???

XSS

SQL injection

CSRF

---

## 20%

### of the top 50 WordPress plugins are vulnerable

.footnote[
[http://stevenhicks.me/wordpress-vulnerabilities](http://stevenhicks.me/wordpress-vulnerabilities)
]

???

one of the great things about wordpress is the plugin ecosystem

there are a ton of them

unfortunately, many of them are vulnerable to the same types of attacks

the scariest part about vulnerable plugins is that you don’t know

if the developer even knows it’s vulnerable,

or when they’ll fix it,

or if they even know how.

---
template: johnny-five

## "There is a better way."

???

And our hero looks back at us

And she says "there is a better way."

---
template: title
# Goals

???

I've said a lot of things about WordPress

And I don't mean to dismiss the value of it

It is a great platform that has worked for millions of people

My goal today isn't to tell you what's wrong with WordPress.

---
template: title

# A compelling alternative
## To the traditional dynamic website

???

My goal today is to offer you a compelling alternative

to the traditional dynamic website

---
template: title

# Dynamic Websites

???

So let's talk about dynamic websites.

---
layout: true
template: level-2
class: statement

# Dynamic Websites

---

## Content is stored in a database

---

## HTML is generated when the user requests it

???

HTML is generated dynamically based on that content

When the user requests it

---

## Content is often managed with a CMS

---
class: image

![Dynamic 1](images/drawings/dynamic-1.png)

???

in a nutshell...

---
class: image

![Dynamic 2](images/drawings/dynamic-2.png)

---
class: image

![Dynamic 3](images/drawings/dynamic-3.png)

???

Contrast this with static websites.

---

# Static Websites

---

## Content is stored as static files

---

## HTML is generated when content is changed

---

## Content can be managed with a static site generator

---
class: image

![Static 1](images/drawings/static-1.png)

???

in a nutshell...

---
class: image

![Static 2](images/drawings/static-2.png)

---
class: image

![Static 3](images/drawings/static-3.png)

???

If you look back 20 years to the before time

When we were on Geocities

and a marquee tag was the best way to make a statement

It's not much different than the static sites I'm describing here

** the difference is that the tooling is so much better **

---
template: title
# Why Should You Go Static?

???

I have 5 reasons you should consider static sites

And it is coincidence that they all begin with S

---
layout: true
template: level-2
class: bold-statement

# Why

---
class: bg-cover, inverse-text
background-image: url(images/why/speed.jpg)

## Speed

???

Static html files **serve faster**

They are **CDN ready**

https://unsplash.com/search/cycling?photo=8tXukRrs7yk

---
class: bg-cover, inverse-text
background-image: url(images/why/security.jpg)

## Security

???

Dynamic back-ends are

susceptible to many different types of attacks.

Static sites **remove** so many **moving parts**

And **eliminate** so many **attack vectors**.

https://unsplash.com/search/security?photo=8yYAaguVDgY

---
class: bg-cover, inverse-text
background-image: url(images/why/simplicity.jpg)

## Simplicity

???

Fewer moving parts

= fewer points of failure

You don’t have to worry about your
**database going down**

You don’t have to worry about
when to **clear the server cache**

https://unsplash.com/search/swing?photo=gN8vJz4gPh8

---
class: bg-cover, inverse-text
background-image: url(images/why/scalability.jpg)

## Scalability

???

As a result of the simplicity,

your entire site is CDN ready.

https://unsplash.com/search/people?photo=mVhd5QVlDWw

...

Think about all the effort you’ve invested over the years in

**optimizing database calls** and **caching strategies**,

and trying to **move** as many things **to a CDN** as possible.

...

When your entire site can live on a CDN..

that is a huge scalability win,

and it **saves you a ton of time**.

---
class: bg-cover, inverse-text
background-image: url(images/why/source-control.jpg)

## Source Control

???

Your content is stored in your source control repository

If you want to know what a page looked like on a certain date,

or who changed it and when,

you just browse the commit log.

https://unsplash.com/search/photos/code?photo=xekxE_VR0Ec
---
template: title

# How Do I Get Started?

---
template: definition

# How

## Static Site Generator
### A command-line tool that takes simple, flat files as input and converts them to a complete website of static HTML files.

???

Choose a static generator

But we need to talk about a few things first.

...

So right off the bat

Know that you're going to be using the command line.

---
layout: true
template: level-3
name: how

# How

---

## How Do I Customize?

--
### CSS/LESS/SASS/PostCSS

???

Most have support for a css precompiler, if not multiple

--
### Themes (if you are lucky)

---
class: image

## How Do I Write Content?

???

It depends on what you mean by content.

![Website](images/drawings/website.png)

---
class: image
## How Do I Write Content?

![Templates](images/drawings/templates.png)

---
class: image
## How Do I Write Content?

![Content](images/drawings/content.png)

---

## How Do I Write Templates?

### With your favorite templating language

???

Maybe you don't have one!

The truth is - it doesn't much matter.

---
layout: true
template: level-3
class: image-center

# Templates

---

## EJS

![EJS](images/how/ejs.png)

???

Because you're really just deciding what syntax you want to use to inject content

---

## Handlebars

![HBS](images/how/handlebars.png)

---

## Pug (Jade)

![Pug](images/how/pug.png)

---
template: how

## How Do I Write Content?

### With a text editor

### In MarkDown

---
class: double-image
layout: false
template: level-3

# Content
## Markdown

???

If you don't like markdown

And I don't blame you

With a lot of generators, you can use the same language you used for templates.

---
class: statement
template: how

## How Do I Add Metadata?

???

Things like "this is a draft"

and "date published"

--
### Frontmatter

---
layout: false
template: level-3

# Metadata
## FrontMatter

.col.col-5.centered.frontmatter[
#### about.md
![FrontMatter](images/how/frontmatter.png)
]

---
template: title

# Choosing A Generator

---
template: title

# [staticgen.com](https://www.staticgen.com)

---
layout: true
template: level-2

# Choosing A Generator

---
class: image

![staticgen.com](images/staticgendotcom.jpg)

???

go to staticgen.com

a directory of most open source static site generators

---
class: image
restart-animation: images/staticgendotcom.gif
name: staticgendotcom

![staticgen.com](images/staticgendotcom.gif)

???

scroll....

we're going to define some criteria.

---

# Choosing A Generator

---

## Potential Criteria

### Engine Language

### Templating Language

### Simplicity vs Customization

### Extensibility

### Frontmatter Support

---
template: title

# Suggestions

---
template: level-3
layout: true
class: comparison
name: suggestions

# Suggestions

---
template: suggestions

## Jekyll

---
class: image-center

## Jekyll

.col.col-5.centered.profile.posterized[
![Dad](images/bumpa-1.jpg)
]
???

Jekyll is kind of like my dad.

---
class: image-center

## Jekyll

.col.col-5.centered.profile.posterized[
![Dad](images/bumpa-2.jpg)
]
???

He's a retired plumber.

If you give him a problem, and he can rig together a solution.

---
template: full-screen
background-image: url(images/jekyll-mess.jpg)

???

Unlike my dad, though, sometimes when you're solving problems with Jekyll,

it feels like you're just doing it this way because it works,

not because it's the right way to do it.

credit: https://unsplash.com/search/wiring?photo=qAShc5SV83M

---
template: suggestions

## Hugo

---
class: image-center

## Hugo

.col.col-5.centered.profile.posterized[
![Brandon](images/brandon.png)
]

???

Hugo is kind of like my coworker Brandon.

He gets stuff done really fast, and with great quality,

and makes you feel like a snail.

If you have a lot of content to turn into HTML, Hugo is a great option.

---
template: suggestions

## Eleventy

---
class: image-center

## Eleventy

![Banana slicer](images/banana-slicer.jpg)

???

Eleventy is kind of like a banana slicer.

it doesn't do much.

people aren't going to talk about it a whole lot.

but if you need to slice a banana..or in this case build a really simple static site.....this is how you do it.

---
template: suggestions

## Gatsby

---
class: image-center

## Gatsby

.col.col-5.centered.profile.posterized[
![Ryan](images/ryan.png)
]
???

Gatsby is kind of like my coworker Ryan.

Ryan has all the coolest, latest gadgets.

Gatsby is pretty cool technology.

---
layout: true
template: full-screen

---
background-image: url(images/cheerios.jpg)

???

But sometimes...you have a bowl of honey nut cheerios...

---
background-image: url(images/banana.jpg)

???

and a banana...

---
background-image: url(images/cheerios-bananas.jpg)

???

and you want to end up here.

---
layout: false
class: image-center

![Banana slicer](images/banana-slicer.jpg)

???

a banana slicer will get you there much more easily than a sapphire garmin watch.

seems  like a joke

but i strongly believe in using the simplest tool that accomplishes what you're trying to do

and that is often eleventy for me.

---

## How Do I Host?

---
class: bold-statement

### Anywhere.

???

It’s just static files

So you can host it anywhere.

If you're looking for some specific ideas....

---

### Existing Infrastructure

### Amazon S3

### Dropbox

### Github Pages

### Dedicated Static Hosts (surge, Aerobatic)

---
class: bold-statement

### Netlify

---
template: how

## Netlify Features

### Run builds for most static generators

### Free custom domains

### Free SSL

### Baked-in CDN

### Serverless Functions
---
template: title

# When Should You Go Static?

---
layout: true
template: level-2
name: when

# When

---
class: bold-statement

## Blogs

---
layout: true
template: level-3

# When
## Blogs

---
class: image, hide-footer

![personal blog](images/blog.jpg)

???

It might be a personal blog

---
class: image, hide-footer

![Centare.com](images/centaredotcom.jpg)

???

It might be a company website and blog

This is the actual Centare.com website, where I work

It used to be a WordPress site

We rewrote it using Harp

We used to get errors from broken plugins about once a month

Now it's never down.

---
class: image, hide-footer

![SmashingMagazine.com](images/smashing.jpg)

???

It might even be something even bigger

Like smashing magazine

---

---
class: bold-statement

## Portfolios