Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jekyll for HTML Prototyping

Jekyll for HTML Prototyping

Jekyll has all the features that help efficiently build powerful HTML prototypes. Tony Pitale will show you how to leverage templates, layouts, includes, data, and GitHub pages to make your prototypes more flexible, maintainable, and effective.


Tony Pitale

April 17, 2014

More Decks by Tony Pitale

Other Decks in Programming


  1. Jekyll for HTML Prototyping

  2. HTML Prototyping

  3. Why and then the How

  4. What is Jekyll?

  5. Static Site Generator

  6. Why use Jekyll?

  7. Why use pre-processors?

  8. Why Jekyll for HTML Prototyping?

  9. Basics

  10. Create New Project jekyll new refresh-jekyll

  11. Our Site

  12. jekyll serve --watch Run It!

  13. Site Pages

  14. Templates

  15. Layouts

  16. Front-matter

  17. Configuration

  18. Basics

  19. Advanced

  20. Status Quo

  21. Everything Old is New Again

  22. Data

  23. Includes

  24. CSS & Sass

  25. Github Pages

  26. Tony Pitale @tpitale http://tpitale.com

  27. Thanks!

  28. Resources https://github.com/tpitale/refresh-jekyll http://jekyllrb.com/ https://github.com/Shopify/liquid/wiki/Liquid-for-Designers http://tpitale.com/refresh-jekyll/ https://pages.github.com/