Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jekyll the static site generator Liquid For Designers

C8156ce921d0d9b743cebff74c96d6c8?s=47 bruno2ms
August 20, 2015

Jekyll the static site generator Liquid For Designers

Jekyll the static site generator Liquid For Designers

C8156ce921d0d9b743cebff74c96d6c8?s=128

bruno2ms

August 20, 2015
Tweet

More Decks by bruno2ms

Other Decks in Technology

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