static site gen talk

Static Site GeneratorsDESIGN-DEV MEETUP 6/15/2016

How to make a dope website.

DESIGN 101

STEP 1.

Wordpress or Squarespace?

STEP 2.

Choose a ! theme.

STEP 3.

Profit """

But in reality it’s more like this ...

STEP 1.

Buy a domain from GoDaddy

STEP 2.

Buy hosting from GoDaddy ...

STEP 2.

Buy Hosting from ________Buy Hosting from ________

(Because ... ???)

STEP 2.

Buy hosting from GoDaddy ...

STEP 3.

YouTube for hours to change DNS & setup WordpressYouTube for hours to change DNS & setup Wordpress

STEP 4.

Weep QuietlyWeep Quietly

STEP 5.

Buy a ! Wordpress ThemeBuy a ! Wordpress Theme

STEP 6.

Decide to change this 1 little thing ....Decide to change this 1 little thing ....

STEP 7.

Open the WP Admin code viewOpen the WP Admin code view

STEP 8.

WTF IS ALL OF THIS ?!!!WTF IS ALL OF THIS ?!!!

STEP 9.

Make a change and everything breaksMake a change and everything breaks

STEP 10.


STEP 11.

Spend hours reading docsSpend hours reading docs

STEP 12.

Download MampDownload Mamp

STEP 13.

Install Wordpress LocallyInstall Wordpress Locally

STEP 14.

Break site with a trailing space in WP ConfigBreak site with a trailing space in WP Config

STEP 15.


STEP 16.

WTF ?!! None of my content is hereWTF ?!! None of my content is here

STEP 17.

Download & Import DatabaseDownload & Import Database

STEP 18.

Hack at PHP until something works Hack at PHP until something works

STEP 19.

Spend hours trying to redeploy your siteSpend hours trying to redeploy your site

STEP 20.


GREAT USER EXPERIENCEGREAT DEVELOPER EXPERIENCE + =

Fast Previews of change

Great tooling (preprocessors etc.)

Simple Templating Language

Simple Deploys

GREAT DEVELOPER EXPERIENCE

Fast Page Loads

Focused / Relevant Content

Great Design

Accessible

GREAT USER EXPERIENCE

The value of Simplicity

“If you don’t actively fight for simplicity in software,

complexity will win … and it will suck”

- Henrik Joreteg

SIMPLICITY:

Predictable results

Makes things easier to use / learn

Allows you to focus

Reduces the cost of change

By simplifying the development experience, you are able to focus

on the things that matter - design and content.

www.something.com

BrowserDatabase

Webpage

HTML / CSS / JS

Server

User

JS CSS

{template.data}

PHP loop()

Sever Rendered Dynamic Site - Page Load Process

www.something.com

Browser

Webpage

HTML / CSS / JS

Server

User

Static Site - Page Load Process

You keep saying this word "static" ... but what

does that mean ... really?

“Static content are files that don't change based on user input,

and they consist of things like JavaScript, Cascading Style

Sheets, Images, and HTML files.”

- Wikipedia

Pages display viewer-specific content (eg. user profiles)

Pages have content that changes too quickly to easily republish

Pages display content conditionally (ie. member-only pages)

Pages have information that is calculated on the fly

WHY I WOULDN’T USE A STATIC SITE:

I want my website to load really fast

I want want to focus on design and content

Don’t want to deal with database or server hassle

I don’t want to worry about security

WHY I WOULD USE A STATIC SITE:

If Static Sites are so great - then why do I need a

“Static Site Generator” ?

www.something.com

Browser

Webpage

HTML / CSS / JS

Server

User

Static Site Generator JS CSS

{template.data}

Static Site Gen.

Generator

The Anatomy of a Static Site Generator:

{ header.html }

{ footer.html }

<h1>{data.postTitle}</h1>

<span>{data.date}</span>

Templates / Partials Compiler / Plugins

———postTitle: My Awesome SitepostDate: 6/15/2016___

YAML / JSON / Data

Markdown

# Heading 1

## Heading 2

Paragraph Content

JS CSS

Static Assets

<%= underscore.js %>

{{ handlebars.js }}

{% django.py %}

{{ liquid.rb }}

Template Language

templates / data / assets

static html / css / js

Static Site Structure

posts

post.md

static

styles

js

images

partials

header.html

footer.html

templates

.build

index.html

post.html

home.html

posts.html# Hello World

post.md

## Mardown 101 - Static Awesomeness

## Doge ... Such Wow

This article is floated online with an aim to help you find the best dvd printing solution. Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs. Actually, dvd printing is a labeling technique that helps to identify DVDs. Thus, dvd printing is essential part of your commercial DVD production.

Your DVDs usually come coated with directly printable lacquer films with ability to absorb ink, and the process of directly printing the lacquer films on your DVDs is technically known as dvd printing. Your dvd printing solution lies in – inkjet dvd printing, thermal transfer dvd printing, screen dvd printing, and offset dvd printing – which you may choose according to need and requirement. The printing process using CMYK Inkjet printers is known as inkjet printing.

This article is floated online with an aim to help you find the best dvd printing solution. Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs. Actually, dvd printing is a labeling technique that helps to identify DVDs.

Popular Static Site Generators

BEGINNER INTERMEDIATE ADVANCED

Cactus - Python

Middleman - Ruby Docpad - Node

Gatsby.js - React

Roll Your Own

Jekyll - Ruby

(This is me having so much fun with wordpress in 2009)

+ =

Demo Time ...

@benadam11

Thank You!!