Jekyll the static site generator Liquid For Designers

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 ﬁltros • 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 ﬁltros • 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

Conﬁguração Centralizada _config.yml

Conﬁguração YAML • Conﬁguraçã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 (conﬁra as próximas apresentações avançadas) @bruno2ms

Jekyll the static site generator Liquid For Designers

Jekyll the static site generator Liquid For Designers

bruno2ms

More Decks by bruno2ms

Other Decks in Technology

Featured

Transcript

Static Site Generator @bruno2ms Liquid for Designers

Syntax {{ matched pairs of curly brackets (ie, braces) }}

Output Markup {{ output markup }} Hello {{ user.name }}

Filtros Concatenados {{ output markup }} Hello {{ user.name }}

Ruby + Liquid + YAML

Como funciona? • Converte Markdown, Textile e HTML com Liquid

O que já vem pronto? • Paginação • Estrutura personalizada

Estrutura Inicial

Conﬁguração Centralizada _config.yml

Conﬁguração YAML • Conﬁguração de variáveis globais • Variáveis reutilizáveis

Exemplo

YAML Front Matter --- layout: post title: Blogging Like a

Deploy? • Instancia grátis do Heroku • GitHub Pages •

Comentários do Blog? Extender - Disqus (exemplo) - Intense Debate

Disqus ... layout: default comments: true # other options ...

Data Files? _data//.yml _data//.csv _data//.json

Data Files - name: Tom Preston-Werner github: mojombo - name:

Data Files name: Bluesoft members: - name: Tom Preston-Werner github:

Arquitetura de Plugins (facilidade de extender) _plugins/*.rb http://jekyllrb.com/docs/plugins/

OBRIGADO (conﬁra as próximas apresentações avançadas) @bruno2ms