Embracing the Static Web

laktek.com

Twitter: @laktek

http://www.flickr.com/photos/james_gordon_losangeles/7165224931/

http://www.flickr.com/photos/dariawadsworth/4711228496

http://www.flickr.com/photos/whltravel/4382569524/

It's a Paradise!

Constraints create Innovation!

Created my first web site in 1999

Fast Forward to 2012...

http://www.flickr.com/photos/courosa/5536535796

How we create professional web sites?

Wordpress

Content is not just
Title and Text

www.theverge.com/2012/11/2/3589280/google-nexus-4-review

Image

Video

List

Slideshow

External Content

Infographic

"A content model helps clarify requirements and encourages collaboration between the designers, the developers creating the CMS, and the content creators."

-- Rachel Lovinger

User-generated Content

Facebook, Twitter, GitHub

Editorial Content

Your Blog, Your Company Site,
Digital Magazines

Let's focus on
Editorial Content

You control the publishing

Optimized for consumption

Permalinks, Responsive

Content doesn't change between each request.

But managing such sites is a PITA!

"Our Age of Anxiety is, in great part, the result of trying to do today's job with yesterday's tools and yesterday's concepts."

-- Marshall McLuhan

Modern Web Development Workflow

Powerful Editors

Vim, Sublime

Sexier Templates

Mustache, Handlebars, Jade, AngularJS

Markdown

_It's **pretty** awesome_

Version Controlling (Git)

Punch

How it nails the problem?

http://www.flickr.com/photos/gideon/5418734

Content

structured in JSON

{
    "site-title": "Hello JSCamp!",

    "tagline": "Semicolons FTW!",

    "host": "www.myblog.com",

    "navbar": [
       { "label": "Home", "href": "/" },
       { "label": "About", "href": "/about" }
    ]
}

Templates

Consists of Layouts and Assets

Layouts

Page, Section & Partial

Assets

Static, Pre-compiled (LESS, CoffeeScript, etc)

Let's Try...

npm install -g punch

punch setup my_site

punch s

Starts the local server

punch p

Publish the changes

Helpers

String Helpers, Current Page, Thirdparty Snippets

<h1>{{#capitalize}}{{title}}{{/capitalize}}</h1>


<div id='disqus_block'>
    {{{disqus_snippet}}}
</div>

Asset Bundling

Minifies and concatenates CSS and JS resources

Fingerprinting Bundles

{{#javascript_bundle}}/js/all.js{{/javascript_bundle}}

outputs:

<script src='/js/all-1353949310000.js'></script>

Generator Hooks

Runs after generating each page (eg. sitemap.xml plugin)

Opinionated, but
Fully Flexible

http://www.flickr.com/photos/ntr23/2338001125

Punch-Blog

github.com/laktek/punch-blog

Customizations

Favtweets

github.com/laktek/favtweets

Customizations

Try, Fork & Pull Request

github.com/laktek/punch

Questions?