Static website generators
First websites were static.
As those websites grew, problems      became more obvious.
Maintenance (repetition) …                             Flickr - nh567
… and no user interaction.                             Flickr - dmclear
The solution is soon found inserver-side programs. But they bring     their own set of problems.
A hunger for resources …                           Flickr – clover_1
… complexity …                 Flickr – dominik99
… and security threats.                          Flickr – llreadll
Is it worth it? Not always.
1. Simple websites        (but not necessarily small)Many private and business, product and servicewebsites are updated ra...
2. Online booksUnless it is a collaborative project, it will probablychange as often as the paper version on a bookshelf.C...
3. BlogsIf you write a blog post, there is a 99.99% chance itwill not see any update. Ever. So why do you need torecreate ...
4. PresentationsVery soon most of the presentations will be written(or at least presented) in HTML and JavaScript. Andyou ...
Static website generatorIt provides all the good things of static websites(speed, stability and security) and eliminates m...
How does it work?                    Flickr – shinythings
Let us look at Hyde, one of the          generators.
Shell interface$ hyde create$ hyde gen$ hyde serve$ hyde publish
After “$ hyde create”, the projectcontains configuration, layout and            content.
1. ConfigurationVery simple YAML file containing settings andcontext data.mode: developmentmedia_root: mediamedia_url: /me...
2. LayoutEverything repeatable resides in Jinja templateswhich provide placeholders for content.<article id="content">{# M...
3. ContentMarkdown or plain HTML content with metadata.---index: 2tags: sort---Sorting=======There will come a time when y...
“$ hyde gen” takes all of that andgenerates a complete static website(HTML, CSS, images and JavaScript).
Use Hyde’s “serve” and “publish”  commands to facilitate faster development and deployment.
And that’s it! All web servers can  serve static content without    any extra configuration.
Deploy anywhere.                   Flickr – toasty
Show me some names!
Python: Hyde, Blogofile, CactusRuby: Jekyll, nanoc, BonsaiPHP: PhroznJavaScript: Petrify, DocPad
What about user interaction?
You can use JavaScript.Many applications can run solely on the client. Forexample, Chinese calendar or body mass indexcalc...
Conclusion             Flickr – yanboechat
If you are a designer/developer …
… who is creating web content foryourself or for somebody who will  leave it to you to update it …
… and you care about simplicity and            speed …
… give static websites a try.
Thank you :)@merlinrebrovic
Upcoming SlideShare
Loading in …5
×

Static website generators

1,589 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,589
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Static website generators

  1. 1. Static website generators
  2. 2. First websites were static.
  3. 3. As those websites grew, problems became more obvious.
  4. 4. Maintenance (repetition) … Flickr - nh567
  5. 5. … and no user interaction. Flickr - dmclear
  6. 6. The solution is soon found inserver-side programs. But they bring their own set of problems.
  7. 7. A hunger for resources … Flickr – clover_1
  8. 8. … complexity … Flickr – dominik99
  9. 9. … and security threats. Flickr – llreadll
  10. 10. Is it worth it? Not always.
  11. 11. 1. Simple websites (but not necessarily small)Many private and business, product and servicewebsites are updated rarely, if ever. And when theyare, it is often by a tech-savvy person.
  12. 12. 2. Online booksUnless it is a collaborative project, it will probablychange as often as the paper version on a bookshelf.Check out http://progit.org/book/, it is very good.
  13. 13. 3. BlogsIf you write a blog post, there is a 99.99% chance itwill not see any update. Ever. So why do you need torecreate the post for every page request?
  14. 14. 4. PresentationsVery soon most of the presentations will be written(or at least presented) in HTML and JavaScript. Andyou will need a tool for that.
  15. 15. Static website generatorIt provides all the good things of static websites(speed, stability and security) and eliminates mostof the problems.
  16. 16. How does it work? Flickr – shinythings
  17. 17. Let us look at Hyde, one of the generators.
  18. 18. Shell interface$ hyde create$ hyde gen$ hyde serve$ hyde publish
  19. 19. After “$ hyde create”, the projectcontains configuration, layout and content.
  20. 20. 1. ConfigurationVery simple YAML file containing settings andcontext data.mode: developmentmedia_root: mediamedia_url: /mediabase_url: /template: hyde.ext.templates.jinja.Jinja2Templateplugins: - hyde.ext.plugins.meta.MetaPlugin - hyde.ext.plugins.auto_extend.AutoExtendPlugincontext: data: ...
  21. 21. 2. LayoutEverything repeatable resides in Jinja templateswhich provide placeholders for content.<article id="content">{# Main content block. Notice it has to pass through the Markdown filter to generate HTML. #} {% filter markdown -%} {% block content %}{% endblock %} {%- endfilter %}</article><aside> <p>Created by <a href="{{ author.url }}">{{ author.name }}</a> for <a href="{{ project.url }}">{{ project.name }}</a></p></aside>
  22. 22. 3. ContentMarkdown or plain HTML content with metadata.---index: 2tags: sort---Sorting=======There will come a time when you will need to list and sort resources.Hyde allows you to walk the site tree and sort the resources by thePredefined settings in your configuration file.
  23. 23. “$ hyde gen” takes all of that andgenerates a complete static website(HTML, CSS, images and JavaScript).
  24. 24. Use Hyde’s “serve” and “publish” commands to facilitate faster development and deployment.
  25. 25. And that’s it! All web servers can serve static content without any extra configuration.
  26. 26. Deploy anywhere. Flickr – toasty
  27. 27. Show me some names!
  28. 28. Python: Hyde, Blogofile, CactusRuby: Jekyll, nanoc, BonsaiPHP: PhroznJavaScript: Petrify, DocPad
  29. 29. What about user interaction?
  30. 30. You can use JavaScript.Many applications can run solely on the client. Forexample, Chinese calendar or body mass indexcalculators. Even some more complex ones, like atypography lab (http://www.typetester.org/).
  31. 31. Conclusion Flickr – yanboechat
  32. 32. If you are a designer/developer …
  33. 33. … who is creating web content foryourself or for somebody who will leave it to you to update it …
  34. 34. … and you care about simplicity and speed …
  35. 35. … give static websites a try.
  36. 36. Thank you :)@merlinrebrovic

×