Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

statische sites met nanoc

2,081 views

Published on

Published in: Technology, Education
  • Be the first to comment

statische sites met nanoc

  1. 1. statische sitesmet nanocDenis Defreyne @ Fronteers, 19 juli 2012
  2. 2. twitter.com/ddfreynegithub.com/ddfreyne
  3. 3. Oorsprong
  4. 4. A long time agoin a galaxy far away… :(
  5. 5. A long time agoin a galaxy far away… :)
  6. 6. Dit is een paragraaf. Eentjemet twee zinnen zelfs!1. Een kleine lijst2. met twee elementenSectie Twee-----------Nog een kleine paragraaf.
  7. 7. <p>Dit is een paragraaf. Eentjemet twee zinnen zelfs!</p><ol><li>Een kleine lijst</li><li>met twee elementen</li></ol><h2>Sectie Twee</h2><p>Nog een kleine paragraaf.</p>
  8. 8. kdo wn HTMLMar
  9. 9. kdo wn ERB HTMLMar
  10. 10. <html> <head> <title>Pagina X</title> </head> <body> <h1>Titel Hoort Hier</h1> <%= yield %> </body></html>
  11. 11. <html> <head> <title>Pagina X</title> </head> <body> <h1>Titel Hoort Hier</h1> <p>Dit is een paragraaf. Eentje met twee zinnen zelfs!</p> <ol> <li>Een kleine lijst</li> <li>met twee elementen</li> </ol> <h2>Sectie Twee</h2> <p>Nog een kleine paragraaf.</p> </body></html>
  12. 12. about/index.html →http://example.com/about/
  13. 13. about/index.html →http://example.com/about/about.html →http://example.com/about.html
  14. 14. 1. Markdown is eenvoudigerom te schrijven dan HTML.
  15. 15. 2. ERB zorgt voor eenconsistente layout.
  16. 16. nanoc luvz <3
  17. 17. So o n!
  18. 18. “really digging nanoc for generating static sites” Rick Olson (GitHub)“I’m singing the praises of nanoc to everyone I come across” Wayne E. Seguin (RVM)
  19. 19. Het Universum
  20. 20. Ace, Bonsai, Blacksmith, Blogofile, Chisel, Deplot, Frank, Graze, Hakyll,Hobix, Hyde, Jekyll, Korma, Machined,Markdoc, Middleman, nanoc, Pagegen,Pelican, Phrozn, PieCrust, Pilcrow, Pith, Punch, Quill, RakeWeb, Rassmalog, Rizzo, Rog, Rote, RubyFrontier, Ruroh, Second Crack, Speechhub, Stasis, StaticMatic, StaticWeb, Tahchee, Ultra simple Site Maker, Webby,Website Meta Language, Wintersmith,Yurt CMS, ZenWeb, cyrax, mynt, poole, webgen, yst
  21. 21. Ace, Bonsai, Blacksmith, Blogofile, Chisel, Deplot, Frank, Graze, Hakyll,Hobix, Hyde, Jekyll, Korma, Machined,Markdoc, Middleman, nanoc, Pagegen,Pelican, Phrozn, PieCrust, Pilcrow, Pith, Punch, Quill, RakeWeb, Rassmalog, Rizzo, Rog, Rote, RubyFrontier, Ruroh, Second Crack, Speechhub, Stasis, StaticMatic, StaticWeb, Tahchee, Ultra simple Site Maker, Webby,Website Meta Language, Wintersmith,Yurt CMS, ZenWeb, cyrax, mynt, poole, webgen, yst
  22. 22. Getting Started
  23. 23. % gem install nanoc
  24. 24. % gem install nanoc% nanoc create-site fronteers
  25. 25. % gem install nanoc% nanoc create-site fronteers% cd fronteers
  26. 26. % gem install nanoc% nanoc create-site fronteers% cd fronteers% echo "Helleuw!" > content/hoi.txt
  27. 27. % gem install nanoc% nanoc create-site fronteers% cd fronteers% echo "Helleuw!" > content/hoi.txt% nanoc
  28. 28. % gem install nanoc% nanoc create-site fronteers% cd fronteers% echo "Helleuw!" > content/hoi.txt% nanoc% nanoc view
  29. 29. % gem install nanoc% nanoc create-site fronteers% cd fronteers% echo "Helleuw!" > content/hoi.txt% nanoc% nanoc view% open http://localhost:3000/hoi
  30. 30. Metadata
  31. 31. compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionstitle: :relativize_paths, :type => :css filter "Documentation"markdown: filter :rainpress basicis_dynamic: true end
  32. 32. <html> <head> <title>Pagina X</title> </head> <body> <h1>Den Titel</h1> <p>Written by Denis</p> <%= yield %> </body></html>
  33. 33. <html> <head> <title><%= item[:title] %></title> </head> <body> <h1><%= item[:title] %></h1> <p>Written by Denis</p> <%= yield %> </body></html>
  34. 34. <html> <head> <title><%= item[:title] %></title> </head> <body> <h1><%= item[:title] %></h1> <p>Written by <%= item[:author] %></p> <%= yield %> </body></html>
  35. 35. Filters, Regels, Oh My!
  36. 36. Filters voor inhoud:Markdown, Textile,RDoc, ASCIIDoc
  37. 37. Markdown filters:BlueCloth, Pandoc,RedCarpet, RDiscount,Kramdown, Maruku
  38. 38. Dynamische filters:ERB, Erubis, Haml,Mustache, Handlebars
  39. 39. Meer filters:Sass & Less!
  40. 40. Nog meer filters:Rubypants & Typogruby!
  41. 41. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  42. 42. class FronteersFilter < Nanoc::Filter compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  43. 43. class FronteersFilter < Nanoc::Filter compile /assets/style/*/ do identifier :fronteers filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  44. 44. class FronteersFilter < Nanoc::Filter compile /assets/style/*/ do identifier :fronteers filter :sass, Compass.sass_engine_options def run(content, params={}):css filter :relativize_paths, :type => filter :rainpress end
  45. 45. class FronteersFilter < Nanoc::Filter compile /assets/style/*/ do identifier :fronteers filter :sass, Compass.sass_engine_options def run(content, params={}):css filter :relativize_paths, :type => content.gsub( filter :rainpress Fronteers, end FRONTEERS!!!!!!111)
  46. 46. class FronteersFilter < Nanoc::Filter compile /assets/style/*/ do identifier :fronteers filter :sass, Compass.sass_engine_options def run(content, params={}):css filter :relativize_paths, :type => content.gsub( filter :rainpress Fronteers, end FRONTEERS!!!!!!111) endend
  47. 47. Rules
  48. 48. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  49. 49. compile /stylesheets/*/ do compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  50. 50. compile /stylesheets/*/ do filter :sass, compile /assets/style/*/ do Compass.sass_engine_options filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  51. 51. compile /stylesheets/*/ do filter :sass, compile /assets/style/*/ do Compass.sass_engine_options filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :relativize_paths, filter :rainpress :type => end :css
  52. 52. compile /stylesheets/*/ do filter :sass, compile /assets/style/*/ do Compass.sass_engine_options filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :relativize_paths, filter :rainpress :type => end :css filter :rainpressend
  53. 53. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  54. 54. compile * do compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  55. 55. compile * do compile /assets/style/*/ do filter :erb filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  56. 56. compile * do compile /assets/style/*/ do filter :erb filter :sass, Compass.sass_engine_options filter :kramdown, :type => :css filter :relativize_paths, filter :rainpress :auto_ids => false end
  57. 57. compile * do compile /assets/style/*/ do filter :erb filter :sass, Compass.sass_engine_options filter :kramdown, :type => :css filter :relativize_paths, filter :rainpress :auto_ids => false end filter :colorize_syntaxend
  58. 58. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  59. 59. compile /assets/style/*/ do<pre><code class="language-ruby">class :sass, Compass.sass_engine_options filter Bob def greet(person) :type => :css filter :relativize_paths, puts "Hi, #{person}!" filter :rainpress end endend</code></pre>
  60. 60. compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionstitle: :relativize_paths, :type => :css filter "Documentation"markdown: filter :rainpress basicis_dynamic: true end
  61. 61. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  62. 62. compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsif item[:is_dynamic] => :css filter :relativize_paths, :type filter :rainpress end
  63. 63. compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsif item[:is_dynamic] => :css filter :relativize_paths, :type filter :erb filter :rainpress end
  64. 64. compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsif item[:is_dynamic] => :css filter :relativize_paths, :type filter :erb filter :rainpressend end
  65. 65. route * do
  66. 66. route * do # /about/ # -> /about/index.html
  67. 67. route * do # /about/ # -> /about/index.html item.identifier + index.htmlend
  68. 68. route * do # /about/ # -> /about/index.html item.identifier + index.htmlendroute * do
  69. 69. route * do # /about/ # -> /about/index.html item.identifier + index.htmlendroute * do # /about/ # -> /about.html
  70. 70. route * do # /about/ # -> /about/index.html item.identifier + index.htmlendroute * do # /about/ # -> /about.html item.identifier.chop + .htmlend
  71. 71. route /style/*/ do
  72. 72. route /style/*/ do # /style/screen/ # -> /style/screen-v15.css
  73. 73. route /style/*/ do # /style/screen/ # -> /style/screen-v15.css item.identifier.chop +
  74. 74. route /style/*/ do # /style/screen/ # -> /style/screen-v15.css item.identifier.chop + "-v#{item[:version]}" +
  75. 75. route /style/*/ do # /style/screen/ # -> /style/screen-v15.css item.identifier.chop + "-v#{item[:version]}" + .cssend
  76. 76. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  77. 77. compile /assets/style/*/ docompile /images/*/ do filter :sass, Compass.sass_engine_optionsend filter :relativize_paths, :type => :css filter :rainpress end
  78. 78. compile /assets/style/*/ docompile /images/*/ do filter :sass, Compass.sass_engine_optionsend filter :relativize_paths, :type => :css filter :rainpresscompile /images/*/, :rep => :thumb do end
  79. 79. compile /assets/style/*/ docompile /images/*/ do filter :sass, Compass.sass_engine_optionsend filter :relativize_paths, :type => :css filter :rainpresscompile /images/*/, :rep => :thumb do filter :thumbnail, :size => 100x80 endend
  80. 80. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  81. 81. route /images/*/ do compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  82. 82. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  83. 83. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsroute /images/*/, :rep => :thumb do filter :relativize_paths, :type => :css filter :rainpress end
  84. 84. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsroute /images/*/, :rep => :thumb do filter :relativize_paths, :type => :css item.identifier.chop + -thumb filter :rainpress + item[:extension]end end
  85. 85. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsroute /images/*/, :rep => :thumb do filter :relativize_paths, :type => :css item.identifier.chop + -thumb filter :rainpress + item[:extension]end endcontent/images/blah.jpg
  86. 86. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsroute /images/*/, :rep => :thumb do filter :relativize_paths, :type => :css item.identifier.chop + -thumb filter :rainpress + item[:extension]end endcontent/images/blah.jpgoutput/images/blah.jpg
  87. 87. route /images/*/ do item.identifier.chop + item[:extension]end compile /assets/style/*/ do filter :sass, Compass.sass_engine_optionsroute /images/*/, :rep => :thumb do filter :relativize_paths, :type => :css item.identifier.chop + -thumb filter :rainpress + item[:extension]end endcontent/images/blah.jpgoutput/images/blah.jpgoutput/images/blah-thumb.jpg
  88. 88. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  89. 89. compilecompile /assets/style/*/ do /blog/*/, :rep => :mp3 do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  90. 90. compilecompile /assets/style/*/ do /blog/*/, :rep => :mp3 do filter :say filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  91. 91. compilecompile /assets/style/*/ do /blog/*/, :rep => :mp3 do filter :say filter :sass, Compass.sass_engine_options filter :lameend filter :relativize_paths, :type => :css filter :rainpress end
  92. 92. compilecompile /assets/style/*/ do /blog/*/, :rep => :mp3 do filter :say filter :sass, Compass.sass_engine_options filter :lameend filter :relativize_paths, :type => :css filter :rainpressroute /blog/*/,end :rep => :mp3 do
  93. 93. compilecompile /assets/style/*/ do /blog/*/, :rep => :mp3 do filter :say filter :sass, Compass.sass_engine_options filter :lameend filter :relativize_paths, :type => :css filter :rainpressroute /blog/*/,end :rep => :mp3 do item.identifier.chop + .mp3end
  94. 94. Voordelen
  95. 95. Statische web sites zijn snel!
  96. 96. % curl -I http://nanoc.stoneship.org/HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Accept-Ranges: bytesETag: "4207500908"Last-Modified: Sun, 10 Jun 2012 19:16:38 GMTContent-Length: 3418Date: Mon, 16 Jul 2012 09:45:17 GMTServer: lighttpd/1.4.31
  97. 97. Bekijk je web sitein voorvertoningvoor ze live te gooien
  98. 98. Gebruik je favorietetext/code editor (vim dus)
  99. 99. Hou je niet bezigmet security updates
  100. 100. Update softwarezonder vrees dat je siteonbereikbaar wordt
  101. 101. Maak je geen zorgen overeen vergeten mysqldumpbij het maken van backups.
  102. 102. Onthoud de historiek:steek je website in eenversiecontrolesysteem
  103. 103. Werk samen aan een site
  104. 104. Maak verschillendebranches van je site.
  105. 105. Leuke nanoc Features
  106. 106. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  107. 107. compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :cssnanoc deploy :rainpress filter end
  108. 108. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  109. 109. compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :cssnanoc deploy --target=staging filter :rainpress end
  110. 110. deploy: compile /assets/style/*/ do default: Compass.sass_engine_options filter :sass, kind: rsync filter :relativize_paths, :type => :css dst: "ectype:sites/nanoc" filter :rainpress staging: end kind: rsync dst: "ectype:sites/nanoc-staging"
  111. 111. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  112. 112. compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :cssnanoc check filter :rainpress end
  113. 113. compile /assets/style/*/ do filter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :cssnanoc check filter :rainpress end So o n!
  114. 114. compile /assets/style/*/ dofilter :sass, Compass.sass_engine_options filter :relativize_paths, :type => :css filter :rainpress end
  115. 115. % nanoc check ilinks elinksLoading site data...Running compile /assets/style/*/ do error internal_links checker...Running external_links checker... ok filter :sass, Compass.sass_engine_optionsoutput/blog/21/index.html::type => :css filter :relativize_paths, [ ERROR ] internal_links - filter :rainpress reference to ../../docs/api/3.1/ endoutput/docs/6-guides/index.html: [ ERROR ] internal_links - reference to ../api/3.4/… etc …
  116. 116. Demo Time!
  117. 117. Bijna Gereed
  118. 118. Google“nanoc”
  119. 119. freenode #nanoc
  120. 120. Q& A
  121. 121. Danku! ♥

×