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
60
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
84
Jekyll the static site generator
bruno2ms
0
43
Bad Leaders - Manual de como falhar como líder
bruno2ms
0
36
Lean UX
bruno2ms
3
240
Other Decks in Technology
See All in Technology
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
190
ローカル環境でAIを動かそう!
falken
PRO
1
170
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
RDRA3.0を知ろう
kanzaki
2
430
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.2k
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Devin&Cursor、それぞれの「本質」から導く最適ユースケース戦略
empitsu
8
2.5k
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
4 Signs Your Business is Dying
shpigford
183
22k
Making Projects Easy
brettharned
116
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Bash Introduction
62gerente
614
210k
Documentation Writing (for coders)
carmenintech
71
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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