Real World Content Strategy with Jekyll

by Bud Parr

Slide 1

Slide 1 text

Real World Content Strategy with

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

• 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

Slide 4

Slide 4 text

–Tom Preston-Werner, 2008 “Blogging Like a Hacker”

Slide 5

Slide 5 text

Why wouldn’t anyone want their site to be… • Faster • More secure • Really efﬁcient to build

Slide 6

Slide 6 text

Simplicity

Slide 7

Slide 7 text

Too Simple?

Slide 8

Slide 8 text

Why not, really? Content can get complex Non-technical content creators image: complexityandthebeast.com

Slide 9

Slide 9 text

–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.”

Slide 10

Slide 10 text

18F

Slide 11

Slide 11 text

–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.”

Slide 12

Slide 12 text

–Bruce Lee “The height of cultivation runs to simplicity. It is not the daily increase but daily decrease — hack away the unessentials!”

Slide 13

Slide 13 text

–Kyle Rush, 2012 “Meet the Obama campaign's $250 million fundraising platform”

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

The Expanding Ecosystem

Slide 16

Slide 16 text

Four Pillars of a Website Make life easy for these people and everybody wins content creators designers/ developers site owners end-user audience

Slide 17

Slide 17 text

What content strategy looks like to our audience end-user audience

Slide 18

Slide 18 text

“don’t make me think” Goal

Slide 19

Slide 19 text

Respond to variety of screens with appropriate content

Slide 20

Slide 20 text

What content strategy looks like to our content producers content creators

Slide 21

Slide 21 text

Goals for Content Creators • Logical Structure: Will they “get” it or will they need a manual to ﬁgure it out? • Keep things in as few “buckets” as possible. • Be Dry: Don’t Repeat Yourself. • Reduce opportunities for error. content creators

Slide 22

Slide 22 text

• 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 (ﬁction, 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 conﬁg)

Slide 23

Slide 23 text

_authors _editors _translators _contributors name image bio similar attributes ranslators authors edrs ributors Go in the same They’re all people

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

_books

Slide 26

Slide 26 text

_reviews

Slide 27

Slide 27 text

_articles

Slide 28

Slide 28 text

What content strategy looks like to the Dev/ Design Team designers/ developers

Slide 29

Slide 29 text

The Importance of Experimentation One thing that Jekyll does really well is allow us to experiment with our content structure.

Slide 30

Slide 30 text

The CMS Way

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

gist: bit.ly/jekyll-output

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Best Thing Ever

Slide 37

Slide 37 text

What about Real Life?

Slide 38

Slide 38 text

Where Jeyll really shines is how it lets us use content however it best suits the content, not the system.

Slide 39

Slide 39 text

Jekyll Core Concept Documents Collections Pages Posts Data YAML JSON CSV internal content, or external

Slide 40

Slide 40 text

Content out via JSON -> Jekyll-get Content In via Tumblr API

Slide 41

Slide 41 text

If all you need is a list, use a list genres: - Fiction - Poetry - Nonﬁction - Theater YAML is both human readable and computationally powerful

Slide 42

Slide 42 text

Jekyll Core Concept Documents Collections Pages Posts Data YAML JSON CSV

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Documents front matter

Slide 46

Slide 46 text

Setting defaults helps us reduce errors and eliminate repetition

Slide 47

Slide 47 text

Collection Defaults

Slide 48

Slide 48 text

Getting at Collection Metadata conﬁg template output to page

Slide 49

Slide 49 text

Defaults for Documents template output to page conﬁg

Slide 50

Slide 50 text

This starts to get interesting --- --- key value title: Why is it called *or, The Whale*?

Slide 51

Slide 51 text

What can these be?

Slide 52

Slide 52 text

Output Dates to compare format however you want Can get precise, but this is messy

Slide 53

Slide 53 text

Output Dates to compare Less precise (can’t format date), but much easier

Slide 54

Slide 54 text

_articles Rich Relationships

Slide 55

Slide 55 text

Rich Relationships slug for a contributor’s document

Slide 56

Slide 56 text

Rich Relationships template output to page

Slide 57

Slide 57 text

Rich Relationships output to page

Slide 58

Slide 58 text

Complex Metadata

Slide 59

Slide 59 text

Complex Metadata template

Slide 60

Slide 60 text

Complex Metadata Output to page

Slide 61

Slide 61 text

So we've gone from a simple text document, to an item holding multi-faceted data with dates, images, relationships.

Slide 62

Slide 62 text

“I thought you said we want to reduce errors?”

Slide 63

Slide 63 text

Editing Tools content creators

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Editing Tools: prose.io

Slide 66

Slide 66 text

Editing Tools: Cloudcannon dates boolean Relationship Single Relationships Multiple