Getting sh*t done with Jekyll

Best practices & tools that we adopted at Wiredcraft to build large and usable websites with Jekyll.

Transcript

1. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
2. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Getting sh*t done with Jekyll
3. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 About Wiredcraft & myself 4 About Jekyll 8 Best practices 12 Multilingual 21 Dynamic Jekyll 29 Speed 35 Conclusion 38
4. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Some context
5. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 We work with digital & innovation teams within larger multinational companies. We help them move at the speed of startups & develop a product culture.
6. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 What does it mean? We’re the team behind the omnichannel strategies of Walmart, Nike, Starbucks, Hilton & many others, in Europe & China. We ship software solutions at high velocity... For tens of millions of users.
7. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Ronan Berder CEO & Founder I’m the Chief Janitor Officer: I do whatever is necessary for our team to get sh*t done and move in the right direction.
8. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Do you even Jekyll?
9. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Yes, I do… a lot. I adopted it in 2009, I’ve since used it to build sites of all sizes, including more recently for Starbucks and Zalando (shush... it's a secret).
10. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Why even Jekyll?
11. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 I’ve used “traditional” CMS a lot: — They’re mediocre at solving 2 problems. — They break & get hacked. — They’re hard to customize. I like simple tech, separation of concerns… and Liquid!
12. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Alright, how do I get sh*t done then?
13. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Installing Ruby is kinda crap. Don’t f*ck around: 1. Make sure you have Ruby 2.1.0+ ruby --version 2. Install the github-pages gem gem install github-pages
14. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Rule #1: KISS Most important thing IMHO: — Avoid adding stuff you don’t need. Example: Makefile vs. Webpack & co. — Avoid multiplying layouts; it’s fine to have Liquid code in a page. — Vanilla JS & simple Sass. — Saying no is allowed. — ...
15. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Start with a proper IA Work on the information architecture early on and define: — Collections: multiple content entries with similar fields and individual pages. — Pages: individual entries (may also include Liquid templating). — Data: everything that does not require its own page (settings, arrays, tables).
16. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Includes are the sh*t — “Functions” (e.g. teaser). — Reusable code (GA, favicons, SEO…). — Helpers (i18n.liquid, path.liquid). Remember that includes share the variable scope of the page. And, you can pass on variables: {% include note.html foo="bar" %}
17. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
18. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Configuration — Sensible defaults; permalinks, default layouts (e.g. drafts), url… — Use overrides for local, dev, staging… jekyll serve --config _config.yml, _config-dev.yml — Capture site-wide settings (e.g. GA). — Avoid defaults on too many files.
19. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
20. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 F*ck plugins Plugins are evil: — They can make things (much) slower. — They don’t work on GitHub pages. — They don’t really solve problems that can’t be addressed with vanilla Jekyll, JS or a 3rd party (e.g. i18n, rsz.io…) Also, constraints are good.
21. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Multilingual
22. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 i18n是什么? As I said, I don’t like plugins. I’ve tried several i18n plugins and none seemed to be radically more elegant than using vanilla Jekyll. What we need: — Localization to translate the UI. — Multilingual content.
23. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Localization — Declare your languages in your config (e.g. lang: [de, en]) — Keep translated strings for each language in its own file (e.g. _data/translations/de.yml) — Add some Liquid magic to assign the magic t variable. — Voilà!
24. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
25. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Multilingual content — Any content has a lang attribute. — Default language is at the root, translated content in a subfolder (e.g. about.md and de/about.md). — Collections have their own subfolders (e.g. _posts/de/2018-07-23-foo.md). — Translated content in collections also doubles lang with categories for non-default languages.
26. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 WTF? — For collections, folders are “invisible”. — Permalinks can’t use custom attributes. — Permalinks look like /:categories/:title/, with :categories being a merge of categories and category (in that order). — You can still use category for actual categories (works with arrays). — We use lang to filter content: {% assign posts = site.posts | where: ‘lang’, lang %} PS: I never remember that stuff, I leave it to the CMS.
27. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
28. Getting sh*t done with Jekyll Wiredcraft July 23, 2018
29. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Making Jekyll “dynamic”
30. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 CMS Shameless plug. Jekyll+ is a lightweight CMS for your Jekyll sites. It’s Open Source and works With GitHub. github.com/Wiredcraft/jekyllplus
31. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Search I’ve tried Algolia & co. Meh... Lunr.js with a bit a template logic for the index does the trick and will be fast af: lunrjs.com PS: we’ve added a tokenizer for Chinese: github.com/Wiredcraft/lunr-chinese
32. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 More complex stuff... — Use a 3rd party service when you can. — Zapier is your friend: zapier.com — If not, now is your friend: zeit.co/now — If not, write your own damn backend. — Embed tiny JS apps (React or Vue.js) to make it work. — As usual, “no” is a valid answer.
33. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Example with a form — Simple HTML form with jQuery (yuck). — File upload with S3. — Submits to a Zapier webhook. — Triggers a GitHub issue creation and an automated confirmation email. Simple and doesn’t require support. PS: I f*cking love Zapier.
34. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 A few more things... — jQuery is rarely the answer. — I like CSS/SASS micro frameworks (Tachyons, egg...). Also, grids suck. — Don’t be an asshole: write READMEs and comments (even for Liquid). — Spend time naming things properly and organizing your code. — Say no and refactor.
35. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Making Jekyll “fast”
36. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Fast generation — Avoid plugins (seriously, they suck). — Loops are bad, mm’kay? — Increment build: --incremental. — If you have a lot of posts: --limit_posts. — Debug with --profile. — Avoid too many files (_data is your friend). — Careful with config defaults. wiredcraft.com/blog/make-jekyll-fast/
37. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Fast Loading — Use a CDN. — Optimize your pictures (ImageOptim). — Resize your pictures (rsz.io). — Inline your CSS. — Go easy on scripts, and load them at the end of the page. — All the other shit Google tells you about.
38. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Wrapping it up
39. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 In a nutshell 90% of what I talked today is captured in Jekyll Basics: github.com/Wiredcraft/jekyll-basics Just start from this boilerplate and try to keep everything as simple as possible. Say “no” and “why?” often. The rest are common best practices.
40. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Having (some) constraints is good One of the reasons I love Jekyll is that it imposes an acceptable level of constraints. Too much or not enough of it is terrible for creativity. It’s at the core of our creative and engineering methodologies.
41. Getting sh*t done with Jekyll Wiredcraft July 23, 2018 Questions? Get in touch: hello@wiredcraft.com