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
58
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
160
Google Design Sprints
bruno2ms
0
160
Building UX Team
bruno2ms
3
79
Jekyll the static site generator
bruno2ms
0
40
Bad Leaders - Manual de como falhar como líder
bruno2ms
0
34
Lean UX
bruno2ms
3
240
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
110
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
120
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
480
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
680
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
490
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
2
160
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Done Done
chrislema
181
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
RailsConf 2023
tenderlove
29
880
Happy Clients
brianwarren
97
6.7k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
The Language of Interfaces
destraynor
154
24k
How to Ace a Technical Interview
jacobian
275
23k
Producing Creativity
orderedlist
PRO
341
39k
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