Jekyll the static site generator Liquid For Designers

Jekyll the static site generator Liquid For Designers

Transcript

1. Static Site Generator @bruno2ms Liquid for Designers
2. 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)
3. 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
4. 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
5. Ruby + Liquid + YAML
6. 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
7. O que já vem pronto? • Paginação • Estrutura personalizada de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Textile
8. Estrutura Inicial
9. Configuração Centralizada _config.yml
10. 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
11. Exemplo
12. 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> ...
13. 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/
14. Comentários do Blog? Extender - Disqus (exemplo) - Intense Debate - Facebook Comments
15. 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
16. Data Files? _data/*/*.yml _data/*/*.csv _data/*/*.json
17. 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
18. 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>
19. Arquitetura de Plugins (facilidade de extender) _plugins/*.rb http://jekyllrb.com/docs/plugins/
20. OBRIGADO (confira as próximas apresentações avançadas) @bruno2ms