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

Real World Content Strategy with Jekyll

Real World Content Strategy with Jekyll

for JekyllConf 2016

Bud Parr

May 07, 2016

More Decks by Bud Parr

Other Decks in Technology


  1. Real World Content Strategy with

  2. {static is} The New Dynamic www.thenewdynamic.org

  3. • Links to articles, tutorials, presentations • Events • Original

    Articles • Showcase of Interesting Use-cases • Opinionated list of tools and resources • Job Board (soon!) {static is} The New Dynamic
  4. –Tom Preston-Werner, 2008 “Blogging Like a Hacker”

  5. Why wouldn’t anyone want their site to be… • Faster

    • More secure • Really efficient to build
  6. Simplicity

  7. Too Simple?

  8. Why not, really? Content can get complex Non-technical content creators

    image: complexityandthebeast.com
  9. –Eric Gunderson, Development Seed, 2013 “It's Called Jekyll, and It

    Works” “Good morning tech pundits! The main HealthCare.gov landing page and the thousands of subpages that educate the public on Affordable Care Act insurance are powered by Jekyll. This portion of the website has experienced 100% uptime and has functioned perfectly since we launched it in June. The site and our approach is all part of how we build CMS free websites.”
  10. 18F

  11. –Dave Cole, 2012 “We pushed the boundaries of what we

    could do with these standards and avoided building server applications at all costs. As a result, we were able to build some of our best work.”
  12. –Bruce Lee “The height of cultivation runs to simplicity. It

    is not the daily increase but daily decrease —  hack away the unessentials!”
  13. –Kyle Rush, 2012 “Meet the Obama campaign's $250 million fundraising

  14. Enhancements since 2014 • Collections in 2.0: not just a

    blogging framework any longer. • Build-time improvements, 3.0 • Gem-based themes • New Tags/Filters (help minimize for loops): ‘slug,’ ‘where expression’ • Growing Ecosystem
  15. The Expanding Ecosystem

  16. Four Pillars of a Website Make life easy for these

    people and everybody wins content creators designers/ developers site owners end-user audience
  17. What content strategy looks like to our audience end-user audience

  18. “don’t make me think” Goal

  19. Respond to variety of screens with appropriate content

  20. What content strategy looks like to our content producers content

  21. Goals for Content Creators • Logical Structure: Will they “get”

    it or will they need a manual to figure it out? • Keep things in as few “buckets” as possible. • Be Dry: Don’t Repeat Yourself. • Reduce opportunities for error. content creators
  22. • Contributors collection: • name (for main, and each book

    for translators, etc.) • mage • image credit • banner image • bio • tagline • Posts, if any related • Events collection, only if any coming up • Books collection • title • cover • category (fiction, etc) • was it translated? • related translator, related editor, related contributor • synopsis • message • editions available • links to purchase • Reviews collection (on some pages) • Genre (yaml, in config)
  23. _authors _editors _translators _contributors name image bio similar attributes ranslators

    authors edrs ributors Go in the same They’re all people
  24. None
  25. _books

  26. _reviews

  27. _articles

  28. What content strategy looks like to the Dev/ Design Team

    designers/ developers
  29. The Importance of Experimentation One thing that Jekyll does really

    well is allow us to experiment with our content structure.
  30. The CMS Way

  31. –Stephen Hawking “Intelligence is the ability to adapt to change.”

  32. None
  33. • A text-based system is much faster to iterate on

    than wrangling forms in the back-end of a CMS. • And, because every bit of our site, including the content, is in version control, it's quite easy to create an entirly new version of the site, experiment, and throw up a staging copy for review and either fold that work in or discard it. Build & Iterate
  34. gist: bit.ly/jekyll-output

  35. demo-2016-05-03-01.surge.sh demo-2016-05-03-02.surge.sh demo-2016-05-03-03.surge.sh demo-2016-05-03-04.surge.sh demo-2016-05-03-05.surge.sh

  36. Best Thing Ever

  37. What about Real Life?

  38. Where Jeyll really shines is how it lets us use

    content however it best suits the content, not the system.
  39. Jekyll Core Concept Documents Collections Pages Posts Data YAML JSON

    CSV internal content, or external
  40. Content out via JSON -> Jekyll-get Content In via Tumblr

  41. If all you need is a list, use a list

    genres: - Fiction - Poetry - Nonfiction - Theater YAML is both human readable and computationally powerful
  42. Jekyll Core Concept Documents Collections Pages Posts Data YAML JSON

  43. bit.ly/jekyll-content-decision-tree Jekyll Content Decision Tree

  44. Jekyll Core Concept Collections may or may not map to

    a URL. Don’t think of them as pages, but merely objects, structured as documents for the convenience of editing.
  45. Documents front matter

  46. Setting defaults helps us reduce errors and eliminate repetition

  47. Collection Defaults

  48. Getting at Collection Metadata config template output to page

  49. Defaults for Documents template output to page config

  50. This starts to get interesting --- --- key value title:

    Why is it called *or, The Whale*?
  51. What can these be?

  52. Output Dates to compare format however you want Can get

    precise, but this is messy
  53. Output Dates to compare Less precise (can’t format date), but

    much easier
  54. _articles Rich Relationships

  55. Rich Relationships slug for a contributor’s document

  56. Rich Relationships template output to page

  57. Rich Relationships output to page

  58. Complex Metadata

  59. Complex Metadata template

  60. Complex Metadata Output to page

  61. So we've gone from a simple text document, to an

    item holding multi-faceted data with dates, images, relationships.
  62. “I thought you said we want to reduce errors?”

  63. Editing Tools content creators

  64. None
  65. Editing Tools: prose.io

  66. Editing Tools: Cloudcannon dates boolean Relationship Single Relationships Multiple

  67. None
  68. The Expanding Ecosystem

  69. 71 pt Editing Tools: Contentful

  70. Editing Tools: Siteleaf

  71. Editing Tools: Netflify CMS

  72. Choose your tools wisely

  73. {static is} The New Dynamic www.thenewdynamic.org