Static website generators

Merlin Rebrović
Merlin RebrovićUX Designer at Google
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 in
server-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 service
websites are updated rarely, if ever. And when they
are, it is often by a tech-savvy person.
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.
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?
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.
Static website generator

It provides all the good things of static websites
(speed, stability and security) and eliminates most
of the problems.
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 project
contains configuration, layout and
            content.
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:
        ...
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>
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.
“$ hyde gen” takes all of that and
generates 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, Cactus

Ruby: Jekyll, nanoc, Bonsai

PHP: Phrozn

JavaScript: Petrify, DocPad
What about user interaction?
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/).
Conclusion

             Flickr – yanboechat
If you are a designer/developer …
… who is creating web content for
yourself 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
1 of 36

Recommended

Jeteye Presentation by
Jeteye PresentationJeteye Presentation
Jeteye PresentationJeteye.Team
317 views6 slides
d.mix: Programming by a Sample by
d.mix: Programming by a Sampled.mix: Programming by a Sample
d.mix: Programming by a SampleLeslie W
1.1K views49 slides
Introduction to jQuery by
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryJames Johnson
522 views12 slides
Blogging On Owd by
Blogging On OwdBlogging On Owd
Blogging On OwdAlejandro Ribó Labastida
324 views13 slides
Let's Take Drupal Offline! by
Let's Take Drupal Offline!Let's Take Drupal Offline!
Let's Take Drupal Offline!Dick Olsson
6.7K views42 slides
JQuery Comprehensive Overview by
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive OverviewBenha University
822 views28 slides

More Related Content

What's hot

J query intro_29thsep_alok by
J query intro_29thsep_alokJ query intro_29thsep_alok
J query intro_29thsep_alokSPRITLE SOFTWARE PRIVATE LIMIT ED
740 views16 slides
jQuery Conference Chicago - September 2014 by
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014dmethvin
5.2K views38 slides
Neo word press meetup ehermits - how to keep your blog from being hacked 2012 by
Neo word press meetup   ehermits - how to keep your blog from being hacked 2012Neo word press meetup   ehermits - how to keep your blog from being hacked 2012
Neo word press meetup ehermits - how to keep your blog from being hacked 2012Brian Layman
962 views22 slides
Blog World 2010 - How to Keep Your Blog from Being Hacked by
Blog World 2010 - How to Keep Your Blog from Being HackedBlog World 2010 - How to Keep Your Blog from Being Hacked
Blog World 2010 - How to Keep Your Blog from Being HackedBrian Layman
923 views22 slides
Contributing to the Community by
Contributing to the CommunityContributing to the Community
Contributing to the CommunityWO Community
349 views19 slides
HTML5 Introduction by Dhepthi L by
HTML5 Introduction by Dhepthi LHTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi LSPRITLE SOFTWARE PRIVATE LIMIT ED
1.1K views18 slides

What's hot(13)

jQuery Conference Chicago - September 2014 by dmethvin
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
dmethvin5.2K views
Neo word press meetup ehermits - how to keep your blog from being hacked 2012 by Brian Layman
Neo word press meetup   ehermits - how to keep your blog from being hacked 2012Neo word press meetup   ehermits - how to keep your blog from being hacked 2012
Neo word press meetup ehermits - how to keep your blog from being hacked 2012
Brian Layman962 views
Blog World 2010 - How to Keep Your Blog from Being Hacked by Brian Layman
Blog World 2010 - How to Keep Your Blog from Being HackedBlog World 2010 - How to Keep Your Blog from Being Hacked
Blog World 2010 - How to Keep Your Blog from Being Hacked
Brian Layman923 views
Contributing to the Community by WO Community
Contributing to the CommunityContributing to the Community
Contributing to the Community
WO Community349 views
jQuery Conference Toronto by dmethvin
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
dmethvin1.8K views
Accessibility - A feature you can build by Monika Piotrowicz
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz7.1K views
Take your drupal sites offline by Chris Ward
Take your drupal sites offlineTake your drupal sites offline
Take your drupal sites offline
Chris Ward4.2K views
CSS Lessons Learned the Hard Way (Generate Conf) by Zoe Gillenwater
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater3.1K views
jQueryTO: State of jQuery March 2013 by dmethvin
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin1.5K views
jQuery in the [Aol.] Enterprise by Dave Artz
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz6K views
State of jQuery June 2013 - Portland by dmethvin
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin6.4K views

Similar to Static website generators

Introduction To Drupal by
Introduction To DrupalIntroduction To Drupal
Introduction To DrupalLauren Roth
4.5K views53 slides
Présentation du générateur de site statique eleventy by
Présentation du générateur de site statique eleventyPrésentation du générateur de site statique eleventy
Présentation du générateur de site statique eleventyGilles Vauvarin
76 views60 slides
Business of Front-end Web Development by
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
1.4K views84 slides
Swf search final by
Swf search finalSwf search final
Swf search finalDuane Nickull
1.2K views46 slides
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development by
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
356 views124 slides
Html5 basics by
Html5 basicsHtml5 basics
Html5 basicssagaroceanic11
1.5K views40 slides

Similar to Static website generators(20)

Introduction To Drupal by Lauren Roth
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
Lauren Roth4.5K views
Présentation du générateur de site statique eleventy by Gilles Vauvarin
Présentation du générateur de site statique eleventyPrésentation du générateur de site statique eleventy
Présentation du générateur de site statique eleventy
Gilles Vauvarin76 views
Business of Front-end Web Development by Rachel Andrew
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew1.4K views
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development by Evan Mullins
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins356 views
Expanding XPages with Bootstrap Plugins for Ultimate Usability by Teamstudio
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Teamstudio2.7K views
Implementing a Symfony Based CMS in a Publishing Company by Marcos Labad
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
Marcos Labad5.9K views
HAXTheWeb @ Apereo 19 by btopro
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
btopro189 views
Working with Shortcodes in WordPress by chaefele
Working with Shortcodes in WordPressWorking with Shortcodes in WordPress
Working with Shortcodes in WordPress
chaefele361 views
Dolibarr information for developers - Christmas devcamp in Valence by Laurent Destailleur
Dolibarr information for developers - Christmas devcamp in ValenceDolibarr information for developers - Christmas devcamp in Valence
Dolibarr information for developers - Christmas devcamp in Valence
DrupalEasy: Intro to Theme Development by ultimike
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
ultimike2.4K views
Emergency WordPress Troubleshooting by Tiffany Bridge
Emergency WordPress TroubleshootingEmergency WordPress Troubleshooting
Emergency WordPress Troubleshooting
Tiffany Bridge440 views
Vipul divyanshu mahout_documentation by Vipul Divyanshu
Vipul divyanshu mahout_documentationVipul divyanshu mahout_documentation
Vipul divyanshu mahout_documentation
Vipul Divyanshu717 views
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles) by Thinkful
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Thinkful205 views
An Introduction To The Use Of Widgets in libraries by Aaron Tay
An Introduction To The Use Of Widgets in librariesAn Introduction To The Use Of Widgets in libraries
An Introduction To The Use Of Widgets in libraries
Aaron Tay2.5K views
CrowdFusion: The Front-End Edition, Part I: Presentation Layer by graybill
CrowdFusion: The Front-End Edition, Part I: Presentation LayerCrowdFusion: The Front-End Edition, Part I: Presentation Layer
CrowdFusion: The Front-End Edition, Part I: Presentation Layer
graybill592 views

Recently uploaded

JCon Live 2023 - Lice coding some integration problems by
JCon Live 2023 - Lice coding some integration problemsJCon Live 2023 - Lice coding some integration problems
JCon Live 2023 - Lice coding some integration problemsBernd Ruecker
67 views85 slides
ChatGPT and AI for Web Developers by
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
174 views82 slides
MemVerge: Gismo (Global IO-free Shared Memory Objects) by
MemVerge: Gismo (Global IO-free Shared Memory Objects)MemVerge: Gismo (Global IO-free Shared Memory Objects)
MemVerge: Gismo (Global IO-free Shared Memory Objects)CXL Forum
112 views16 slides
TE Connectivity: Card Edge Interconnects by
TE Connectivity: Card Edge InterconnectsTE Connectivity: Card Edge Interconnects
TE Connectivity: Card Edge InterconnectsCXL Forum
96 views12 slides
"How we switched to Kanban and how it integrates with product planning", Vady... by
"How we switched to Kanban and how it integrates with product planning", Vady..."How we switched to Kanban and how it integrates with product planning", Vady...
"How we switched to Kanban and how it integrates with product planning", Vady...Fwdays
61 views24 slides
MemVerge: Past Present and Future of CXL by
MemVerge: Past Present and Future of CXLMemVerge: Past Present and Future of CXL
MemVerge: Past Present and Future of CXLCXL Forum
110 views26 slides

Recently uploaded(20)

JCon Live 2023 - Lice coding some integration problems by Bernd Ruecker
JCon Live 2023 - Lice coding some integration problemsJCon Live 2023 - Lice coding some integration problems
JCon Live 2023 - Lice coding some integration problems
Bernd Ruecker67 views
MemVerge: Gismo (Global IO-free Shared Memory Objects) by CXL Forum
MemVerge: Gismo (Global IO-free Shared Memory Objects)MemVerge: Gismo (Global IO-free Shared Memory Objects)
MemVerge: Gismo (Global IO-free Shared Memory Objects)
CXL Forum112 views
TE Connectivity: Card Edge Interconnects by CXL Forum
TE Connectivity: Card Edge InterconnectsTE Connectivity: Card Edge Interconnects
TE Connectivity: Card Edge Interconnects
CXL Forum96 views
"How we switched to Kanban and how it integrates with product planning", Vady... by Fwdays
"How we switched to Kanban and how it integrates with product planning", Vady..."How we switched to Kanban and how it integrates with product planning", Vady...
"How we switched to Kanban and how it integrates with product planning", Vady...
Fwdays61 views
MemVerge: Past Present and Future of CXL by CXL Forum
MemVerge: Past Present and Future of CXLMemVerge: Past Present and Future of CXL
MemVerge: Past Present and Future of CXL
CXL Forum110 views
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy by Fwdays
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
Fwdays40 views
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen... by NUS-ISS
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
Upskilling the Evolving Workforce with Digital Fluency for Tomorrow's Challen...
NUS-ISS23 views
Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst449 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10165 views
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor... by Vadym Kazulkin
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
Vadym Kazulkin70 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada110 views
Spesifikasi Lengkap ASUS Vivobook Go 14 by Dot Semarang
Spesifikasi Lengkap ASUS Vivobook Go 14Spesifikasi Lengkap ASUS Vivobook Go 14
Spesifikasi Lengkap ASUS Vivobook Go 14
Dot Semarang35 views
"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi by Fwdays
"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi
"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi
Fwdays26 views
Understanding GenAI/LLM and What is Google Offering - Felix Goh by NUS-ISS
Understanding GenAI/LLM and What is Google Offering - Felix GohUnderstanding GenAI/LLM and What is Google Offering - Felix Goh
Understanding GenAI/LLM and What is Google Offering - Felix Goh
NUS-ISS39 views
CXL at OCP by CXL Forum
CXL at OCPCXL at OCP
CXL at OCP
CXL Forum208 views
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by NUS-ISS
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
NUS-ISS28 views
Future of Learning - Yap Aye Wee.pdf by NUS-ISS
Future of Learning - Yap Aye Wee.pdfFuture of Learning - Yap Aye Wee.pdf
Future of Learning - Yap Aye Wee.pdf
NUS-ISS38 views
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu... by NUS-ISS
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
NUS-ISS32 views

Static website generators

  • 3. As those websites grew, problems became more obvious.
  • 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.