SlideShare uma empresa Scribd logo
1 de 36
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

Mais conteúdo relacionado

Mais procurados

Neo 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 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 Layman
 
Contributing to the Community
Contributing to the CommunityContributing to the Community
Contributing to the Community
WO Community
 
CSS Lessons Learned the Hard Way (Generate Conf)
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 Gillenwater
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 

Mais procurados (13)

J query intro_29thsep_alok
J query intro_29thsep_alokJ query intro_29thsep_alok
J query intro_29thsep_alok
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
Neo 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 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
 
Blog World 2010 - How to Keep Your Blog from Being Hacked
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
 
Contributing to the Community
Contributing to the CommunityContributing to the Community
Contributing to the Community
 
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi LHTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Take your drupal sites offline
Take your drupal sites offlineTake your drupal sites offline
Take your drupal sites offline
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 

Semelhante a Static website generators

Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
Lauren Roth
 
Vipul divyanshu mahout_documentation
Vipul divyanshu mahout_documentationVipul divyanshu mahout_documentation
Vipul divyanshu mahout_documentation
Vipul Divyanshu
 
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)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Thinkful
 

Semelhante a Static website generators (20)

Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
 
Présentation du générateur de site statique eleventy
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
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Swf search final
Swf search finalSwf search final
Swf search final
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
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
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
Expanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate UsabilityExpanding XPages with Bootstrap Plugins for Ultimate Usability
Expanding XPages with Bootstrap Plugins for Ultimate Usability
 
Implementing a Symfony Based CMS in a Publishing Company
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
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 
Os php-wiki1-pdf
Os php-wiki1-pdfOs php-wiki1-pdf
Os php-wiki1-pdf
 
Working with Shortcodes in WordPress
Working with Shortcodes in WordPressWorking with Shortcodes in WordPress
Working with Shortcodes in WordPress
 
Dolibarr information for developers - Christmas devcamp in Valence
Dolibarr information for developers - Christmas devcamp in ValenceDolibarr information for developers - Christmas devcamp in Valence
Dolibarr information for developers - Christmas devcamp in Valence
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
 
Emergency WordPress Troubleshooting
Emergency WordPress TroubleshootingEmergency WordPress Troubleshooting
Emergency WordPress Troubleshooting
 
Recipes for Drupal distributions
Recipes for Drupal distributionsRecipes for Drupal distributions
Recipes for Drupal distributions
 
Vipul divyanshu mahout_documentation
Vipul divyanshu mahout_documentationVipul divyanshu mahout_documentation
Vipul divyanshu mahout_documentation
 
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)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
 
An Introduction To The Use Of Widgets in libraries
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
 
CrowdFusion: The Front-End Edition, Part I: Presentation Layer
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
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 

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.