Static website generators provide a solution for creating simple, stable, and secure websites that are rarely updated. They allow content to be written in Markdown or HTML along with configuration and layout templates. When the generate command is run, a complete static website is produced that can be hosted anywhere without additional server-side software. This provides the benefits of static sites while eliminating maintenance issues like repetition and lack of interactivity that affected early static sites. User interaction can still be supported through JavaScript.

1. Static website generators

2. First websites were static.

3. As those websites grew, problems
became more obvious.

4. Maintenance (repetition) …
Flickr - nh567

5. … and no user interaction.
Flickr - dmclear

6. The solution is soon found in
server-side programs. But they bring
their own set of problems.

7. A hunger for resources …
Flickr – clover_1

8. … complexity …
Flickr – dominik99

9. … and security threats.
Flickr – llreadll

10. Is it worth it? Not always.

11. 1. Simple websites
(but not necessarily small)
Many private and business, product and service
websites are updated rarely, if ever. And when they
are, it is often by a tech-savvy person.

12. 2. Online books
Unless it is a collaborative project, it will probably
change as often as the paper version on a bookshelf.
Check out http://progit.org/book/, it is very good.

13. 3. Blogs
If you write a blog post, there is a 99.99% chance it
will not see any update. Ever. So why do you need to
recreate the post for every page request?

14. 4. Presentations
Very soon most of the presentations will be written
(or at least presented) in HTML and JavaScript. And
you will need a tool for that.

15. Static website generator
It provides all the good things of static websites
(speed, stability and security) and eliminates most
of the problems.

16. How does it work?
Flickr – shinythings

17. Let us look at Hyde, one of the
generators.

18. Shell interface
$ hyde create
$ hyde gen
$ hyde serve
$ hyde publish

19. After “$ hyde create”, the project
contains configuration, layout and
content.

20. 1. Configuration
Very simple YAML file containing settings and
context data.
mode: development
media_root: media
media_url: /media
base_url: /
template: hyde.ext.templates.jinja.Jinja2Template
plugins:
- hyde.ext.plugins.meta.MetaPlugin
- hyde.ext.plugins.auto_extend.AutoExtendPlugin
context:
data:
...

21. 2. Layout
Everything repeatable resides in Jinja templates
which 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. 3. Content
Markdown or plain HTML content with metadata.
---
index: 2
tags: 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 the
Predefined settings in your configuration file.

23. “$ hyde gen” takes all of that and
generates a complete static website
(HTML, CSS, images and JavaScript).

24. Use Hyde’s “serve” and “publish”
commands to facilitate faster
development and deployment.

25. And that’s it! All web servers can
serve static content without
any extra configuration.

26. Deploy anywhere.
Flickr – toasty

27. Show me some names!

28. Python: Hyde, Blogofile, Cactus
Ruby: Jekyll, nanoc, Bonsai
PHP: Phrozn
JavaScript: Petrify, DocPad

29. What about user interaction?

30. You can use JavaScript.
Many applications can run solely on the client. For
example, Chinese calendar or body mass index
calculators. Even some more complex ones, like a
typography lab (http://www.typetester.org/).

31. Conclusion
Flickr – yanboechat

32. If you are a designer/developer …

33. … who is creating web content for
yourself or for somebody who will
leave it to you to update it …

34. … and you care about simplicity and
speed …

35. … give static websites a try.

36. Thank you :)
@merlinrebrovic