Static Site Generation for the Masses

STATIC SITE GENERATION FOR THE MASSES Denis Defreyne FOSDEM 2013
1

Me 2 ‣ Denis Defreyne

Me 2 ‣ Denis Defreyne twitter.com/ddfreyne

Me 2 ‣ Denis Defreyne twitter.com/ddfreyne github.com/ddfreyne

Me 2 ‣ Denis Defreyne twitter.com/ddfreyne github.com/ddfreyne ‣ Software Engineer

Me 2 ‣ Denis Defreyne twitter.com/ddfreyne github.com/ddfreyne ‣ Software Engineer
‣ Author of nanoc

What exactly does a STATIC SITE GENERATOR do? 3

4 Mark- down

Markdown 5 In *exactly* one month, there’s FOSDEM again!
I can barely control my excitement! * First element of a list * Second element

6 Mark- down

6 Mark- down HTML fragment

HTML from Markdown 7 <p>In <em>exactly</em> one month, there’s
FOSDEM again! I can barely control my excitement!</p> <ul> <li>First element of a list</li> <li>Second element</li> </ul>

8 Mark- down HTML fragment

8 Mark- down HTML fragment Layout

Layout 9 <!DOCTYPE html> <html> <head> <title><%= item[:title] %></title> </head>
<body> <%= yield %> </body> </html>

10 Mark- down HTML fragment Layout

10 Mark- down HTML fragment Layout + HTML

11 <!DOCTYPE html> <html> <head> <title>One Month until FOSDEM!</title> </head>
<body> <p>In <em>exactly</em> one month, there’s FOSDEM again! I can barely control my excitement!</p> <ul> <li>First element of a list</li> <li>Second element</li> </ul> </body> </html>

12 Mark- down HTML fragment Layout + HTML

VPS + 96 MB RAM + Ruby = TOO SLOW!
13

14 nanoc φϊοΫ

16 CMS Content Management System

17 SSG Static Site Generator

Road map 18

Road map 1. What are SSGs? 18

Road map 1. What are SSGs? 2. What are SSGs
capable of? 18

Road map 1. What are SSGs? 2. What are SSGs
capable of? 3. Lessons Learnt & Future Work 18

19 What are SSGs?

Tiny example – pages 20 content/ about.md blog/ 2013-‐01-‐02-‐one-‐month-‐until-‐fosdem.md 2013-‐02-‐03-‐fosdem-‐was-‐awesome.md

Tiny example – pages 21 -‐-‐-‐ title: One Month until
FOSDEM! -‐-‐-‐ In exactly one month, there’s FOSDEM again! I can barely control my excitement!

Tiny example – layouts 22 <html> <head> <title><%= item[:title] %></title>
</head> <body> <%= yield %> </body> </html>

Tiny example – result 23 <html> <head> <title>One Month until
FOSDEM!</title> </head> <body> In exactly one month, there’s FOSDEM again! I can barely control my excitement! </body> </html>

Tiny example – result 24 output/ about/index.html blog/2013/01/one-‐month-‐until-‐fosdem/index.html blog/2012/02/fosdem-‐was-‐awesome/index.html

Ace - awestruct - Blacksmith - Blogoﬁle - Bonsai -
Cactus - Chisel - coleslaw - Composer - cyrax - Deplot - Fairytale - FMPP - Frank - fugitive - Graze - Hakyll - Hammer - Hastie - Hobix - Hyde - Jekyll - jinjet - jkl - Korma - Machined - Magneto - Markbox - Markdoc - Middleman - mynt - nanoc - Nikola - Octopress - Pagegen - Pelican - Petrify - Phrozn - PieCrust - Pilcrow - Pith - poole - Punch - Quill - RakeWeb - Rassmalog - Rizzo - Rog - romulus - Rote - RubyFrontier - Ruroh - Second Crack - Socrates - Speechhub - Stasis - staticjinja - StaticMatic - StaticMatic2 - StaticWeb - Tahchee - Ultra simple Site Maker - Webby - webgen - Website Meta Language - Wintersmith - wok - yassg - yst - Yurt CMS - ZenWeb 33

Ace - awestruct - Blacksmith - Blogoﬁle - Bonsai -
Cactus - Chisel - coleslaw - Composer - cyrax - Deplot - Fairytale - FMPP - Frank - fugitive - Graze - Hakyll - Hammer - Hastie - Hobix - Hyde - Jekyll - jinjet - jkl - Korma - Machined - Magneto - Markbox - Markdoc - Middleman - mynt - nanoc - Nikola - Octopress - Pagegen - Pelican - Petrify - Phrozn - PieCrust - Pilcrow - Pith - poole - Punch - Quill - RakeWeb - Rassmalog - Rizzo - Rog - romulus - Rote - RubyFrontier - Ruroh - Second Crack - Socrates - Speechhub - Stasis - staticjinja - StaticMatic - StaticMatic2 - StaticWeb - Tahchee - Ultra simple Site Maker - Webby - webgen - Website Meta Language - Wintersmith - wok - yassg - yst - Yurt CMS - ZenWeb 33 INCOMPLETE

37 Why static sites?

37 1. Fast Why static sites?

37 1. Fast 2. Secure Why static sites?

37 1. Fast 2. Secure 3. Works with your own
tools (vim!) Why static sites?

tools (vim!) 4. Content is in plain text Why static sites?

tools (vim!) 4. Content is in plain text 5. Easy to deploy Why static sites?

tools (vim!) 4. Content is in plain text 5. Easy to deploy 6. Easy to preview Why static sites?

tools (vim!) 4. Content is in plain text 5. Easy to deploy 6. Easy to preview 7. Makes collaboration easy Why static sites?

39 What are SSGs capable of?

Arbitrary metadata 40

Arbitrary metadata 41 title: Braid kind:
review subtype: game year: 2008 rating: 5

Arbitrary metadata 42 <ul> <% @item.children do |review| %> <li>
<%= '˒' * review[:rating] %> <%= review[:title] %> </li> <% end %> </ul>

Arbitrary metadata 43 <ul> <li>˒˒˒˒ˑ Borderlands</li> <li>˒˒˒˒˒ Braid</li> <li>˒˒˒˒ˑ Legend
of Grimrock</li> <li>˒˒˒˒˒ Max Payne</li> <li>˒˒˒˒ˑ Minecraft</li> </ul>

Filters 44

Filters – Markdown A First Level Header ==================== A Second
Level Header -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ Now is the time for all good men to come to the aid of their country. This is just a regular paragraph. * Quick brown fox * Lazy dog 45

Filters – Textile h1. Give RedCloth a try! A *simple*
paragraph with a line break, some _emphasis_ and a "link":http://redcloth.org * an item * and another # one # two 46

Filters – ERB <!DOCTYPE html> <html> <head> <title><%= item[:title] %></title>
</head> <body> <%= yield %> </body> </html> 47

Filters – Mustache <!DOCTYPE html> <html> <head> <title>{{ title }}</title>
</head> <body> {{ yield }} </body> </html> 48

Filters – Haml !!! %html %head %title= @item[:title] %body =
yield 49

Filters – Colorize Syntax <pre><code class="language-‐ruby"> def my_function (1..10).map
do |i| "#{i} is #{i % 2 == 1 ? 'odd' : 'even'}" end end </code></pre> 50

Filters – Colorize Syntax def my_function (1..10).map do |i|
"#{i} is #{i % 2 == 1 ? 'odd' : 'even'}" end end 51

Filters – Typogruby 52 "Typogruby makes HTML look smarter &
better, don't you think?" “Typogruby makes HTML look smarter & better, don’t you think?”

Filters – Custom class CensorFilter < Nanoc::Filter identifier :censor def
run(content, params={}) content.gsub('nanoc sucks', 'nanoc rocks') end end 53

Rules 54

Rules 55 compile '*' do if @item[:kind] == 'article' filter
:bluecloth end layout 'default' end

Rules 56 compile '/images/*/' do filter :img_optimize end

Rules 57 compile '/images/*/' do filter :img_optimize end compile
'/images/*/', :rep => :thumbnail do filter :scale, :width => 140 end

Rules 58 compile '/blog/*/', :rep => :mp3 do filter
:say filter :lame end

Rules versus Makefiles 59

Rules versus Makefiles 59 ‣ Push vs. pull

Rules versus Makefiles 59 ‣ Push vs. pull ‣ Cleaner
syntax

Rules versus Makefiles 59 ‣ Push vs. pull ‣ Cleaner
syntax ‣ Automatic dependency tracking

Helpers 60

61 module Nanoc::Helpers::Tagging # Find all items with the given
tag. # # @param [String] tag The tag for which to find all items # # @return [Array] All items with the given tag def items_with_tag(tag) @items.select do |i| (i[:tags] || []).include?(tag) end end end

Helpers – example 62 <h1>Tags for <%= @item[:tag] %></h1> <ul>
<% items_with_tag(@item[:tag]).each do |i| %> <li><%= link_to(@item[:tag], i) %></li> <% end %> </ul>

Workflow 63

Workflow 63 1. Development

Workflow 63 1. Development 1. Version controlled

Workflow 63 1. Development 1. Version controlled 2. Branched development

3. Pull requests

3. Pull requests 2. Release

3. Pull requests 2. Release 1. Preview

3. Pull requests 2. Release 1. Preview 2. Check

3. Pull requests 2. Release 1. Preview 2. Check 3. Deploy

64 Data Sources

65 Data Sources – nanoc

66 nanoc site CLI YARD FS {

67 nanoc CLI – definition name
'dostuff' usage 'dostuff [options]' aliases :ds, :stuff summary 'does stuff' description 'This command does a lot!' GITHUB.COM/DDFREYNE/CRI

68 nanoc CLI – generated help NAME
dostuff -‐ does stuff USAGE dostuff [options] DESCRIPTION This command does a lot of stuff. I really mean a lot. OPTIONS -‐h -‐-‐help show help for this command -‐m -‐-‐more do even more stuff -‐s -‐-‐stuff specify stuff to do GITHUB.COM/DDFREYNE/CRI

nanoc filter class CensorFilter < Nanoc::Filter identifier :censor # Some
documentation goes here… def run(content, params={}) content.gsub('nanoc sucks', 'nanoc rocks') end end 70

74 Data Sources – FOSDEM

{ 75 FOSDEM site PentaBarf FS

78 github.com/fosdem/website

SSGs advantages 79

SSGs advantages ‣ More than Markdown + layout → HTML!
79

‣ Satisfactory in many cases 79

‣ Satisfactory in many cases ‣ Dynamic with JavaScript 79

‣ Satisfactory in many cases ‣ Dynamic with JavaScript ‣ Usable for publishing your data 79

80 Lessons Learnt

Internal DSLs 81

Internal DSLs compile '/about/' do filter :kramdown end 82

Internal DSLs – side effects compile '/about/' do filter :kramdown
File.open('output/stuff.txt', 'w') do |f| f.write(item.raw_content) end end 83

Internal DSLs – mutability compile '/articles/*/' do unless @item[:layout]
@item[:layout] = 'article' end layout @item[:layout] end 84

Speed 85

Incremental compilation 86

Incremental compilation 86 ‣ Recompile only what’s necessary

Incremental compilation 86 ‣ Recompile only what’s necessary ‣ Ω
(#items) → Ω(#changed-items)

(#items) → Ω(#changed-items) ‣ Scenarios

(#items) → Ω(#changed-items) ‣ Scenarios Single changed page

(#items) → Ω(#changed-items) ‣ Scenarios Single changed page Changed page that is included elsewhere

(#items) → Ω(#changed-items) ‣ Scenarios Single changed page Changed page that is included elsewhere Changed rules

Pick the right libraries 87

Pick the right libraries ‣ RubyPants, Typogruby 87

Pick the right libraries ‣ RubyPants, Typogruby Winner: Fast Aleck
87

‣ pygmentize, pygments.rb 87

‣ pygmentize, pygments.rb Winner: pygments.rb 87

90 Future Work

Future Work 91

Future Work 91 ‣ Improving speed (Parallellisation)

Future Work 91 ‣ Improving speed (Parallellisation) ‣ Supporting huge
sites

sites ‣ Writing great documentation

sites ‣ Writing great documentation ‣ Building an active contributors’ community

sites ‣ Writing great documentation ‣ Building an active contributors’ community ‣ GUI?

92 Recap

SSGs… 93

SSGs… 93 ‣ have big obvious advantages

SSGs… 93 ‣ have big obvious advantages fast, secure, easy
to deploy, …

to deploy, … ‣ have big non-obvious advantages

to deploy, … ‣ have big non-obvious advantages metadata, data sources, checks, …

to deploy, … ‣ have big non-obvious advantages metadata, data sources, checks, … ‣ turn your web site into an open-source project!

to deploy, … ‣ have big non-obvious advantages metadata, data sources, checks, … ‣ turn your web site into an open-source project! share, learn, collaborate

94 MAIL [email protected] TWITTER @ddfreyne GITHUB github.com/ddfreyne WWW nanoc.ws GITHUB
github.com/nanoc IRC freenode #nanoc

95 Extra Slides!

Preprocessing 96 preprocess do ts = Set.new(@items.map { |i| i[:tags]
}.flatten) ts.each do |tag| @items << Nanoc::Item.new( "", { :tag => tag }, "/tags/#{tag}/") end end

Static Site Generation for the Masses

Static Site Generation for the Masses

More Decks by Denis Defreyne

Other Decks in Technology

Featured

Transcript