Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jekyll the static site generator Liquid For Des...
Search
bruno2ms
August 20, 2015
Technology
0
61
Jekyll the static site generator Liquid For Designers
Jekyll the static site generator Liquid For Designers
bruno2ms
August 20, 2015
Tweet
Share
More Decks by bruno2ms
See All by bruno2ms
Will Js Kill CSS
bruno2ms
0
170
Google Design Sprints
bruno2ms
0
170
Building UX Team
bruno2ms
3
85
Jekyll the static site generator
bruno2ms
0
43
Bad Leaders - Manual de como falhar como líder
bruno2ms
0
36
Lean UX
bruno2ms
3
250
Other Decks in Technology
See All in Technology
In Praise of "Normal" Engineers (LDX3)
charity
3
1.2k
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
150
原則から考える保守しやすいComposable関数設計
moriatsushi
3
500
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
140
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
520
A2Aのクライアントを自作する
rynsuke
1
150
成立するElixirの再束縛(再代入)可という選択
kubell_hr
0
950
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
220
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.4k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
230
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
140
Definition of Done
kawaguti
PRO
6
460
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
How STYLIGHT went responsive
nonsquared
100
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Review Best Practice
trishagee
68
18k
How GitHub (no longer) Works
holman
314
140k
Gamification - CAS2011
davidbonilla
81
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Transcript
Static Site Generator @bruno2ms Liquid for Designers
Syntax {{ matched pairs of curly brackets (ie, braces) }}
{% matched pairs of curly brackets and percent signs %} Output markup (que pode retornar texto) Tag markup (não pode retornar texto)
Output Markup {{ output markup }} Hello {{ user.name }}
-> Hello Bruno Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO Letters: {{ 'bruno' | size }} -> Letters 5 Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
Filtros Concatenados {{ output markup }} Hello {{ user.name }}
-> Hello Bruno Hello {{ ‘Bruno' | upcase }} -> Hello BRUNO Letters: {{ 'bruno' | size }} -> Letters 5 Hello {{ 'now' | date: "%Y %h" }} -> Hello 2015 Mar {{ 5 | times:4 | plus:5 | divided_by:2 }} -> 12 {{ "a~b" | split:"~" }} -> ab • Aceita que você concatene filtros • Trata o conteúdo e retorna um texto
Ruby + Liquid + YAML
Como funciona? • Converte Markdown, Textile e HTML com Liquid
Tags • Aplica templates e Layout Pages • Converte arquivos sass • Se aproveita da estrutura de pastas para gerar blog e posts • Transforma isso tudo em HTML estático
O que já vem pronto? • Paginação • Estrutura personalizada
de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Textile
Estrutura Inicial
Configuração Centralizada _config.yml
Configuração YAML • Configuração de variáveis globais • Variáveis reutilizáveis
de acordo com estrutura dos arquivos • Adicione as chaves que desejar para reaproveitar em todo o site
Exemplo
YAML Front Matter --- layout: post title: Blogging Like a
Hacker permalink: /path/to/my/page/ published: true categories: [categoria1, categoria2] --- <!DOCTYPE HTML> <html> <head> <title>{{ site.name }} - {{ page.title }}</title> </head> <body> ...
Deploy? • Instancia grátis do Heroku • GitHub Pages •
Direto para a Amazon S3 • Qualquer lugar que aceite páginas estáticas • http://jekyllrb.com/docs/deployment- methods/
Comentários do Blog? Extender - Disqus (exemplo) - Intense Debate
- Facebook Comments
Disqus ... layout: default comments: true # other options ...
{% if page.comments %} {% include disqus.html %} {% endif %} <div id="disqus_thread"></div> <script type="text/javascript"> var disqus_shortname = ‘your_user'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/ javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> sua_pagina.html _includes/disqus.html
Data Files? _data/*/*.yml _data/*/*.csv _data/*/*.json
Data Files - name: Tom Preston-Werner github: mojombo - name:
Parker Moore github: parkr - name: Liu Fengyun github: liufengyun <ul> {% for member in site.data.members %} <li> <a href="https://github.com/{{ member.github }}"> {{ member.name }} </a> </li> {% endfor %} </ul> index.yml _data/members.yml
Data Files name: Bluesoft members: - name: Tom Preston-Werner github:
mojombo - name: Parker Moore github: parkr _data/orgs/bluesoft.yml _data/orgs/webgoal.yml name: Webgoal members: - name: Tom Preston-Werner github: mojombo - name: Parker Moore github: parkr <ul> {% for org_hash in site.data.orgs %} {% assign org = org_hash[1] %} <li> <a href="https://github.com/{{ org.username }}"> {{ org.name }} </a> ({{ org.members | size }} members) </li> {% endfor %} </ul>
Arquitetura de Plugins (facilidade de extender) _plugins/*.rb http://jekyllrb.com/docs/plugins/
OBRIGADO (confira as próximas apresentações avançadas) @bruno2ms