Jekyll

650 visualizações

Publicada em

Jekyll the static site generator

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
650
No SlideShare
0
A partir de incorporações
0
Número de incorporações
57
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Jekyll

  1. 1. Sta$c  Site  Generator @bruno2ms
  2. 2. Como  começar?
  3. 3. Ruby  +  Liquid  +  YAML
  4. 4. Como  funciona? • Converte  Markdown,  Tex$le  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á$co
  5. 5. O  que  já  vem  pronto? • Paginação   • Estrutura  personalizada  de  permalinks   • Posts  relacionados   • Syntax  highlight   • Conversão  Markdown/Tex$le
  6. 6. Estrutura  Inicial
  7. 7. Configuração  Centralizada _config.yml
  8. 8. Configuração  YAML • Configuração  de  variáveis  globais   • Variáveis  reu$lizáveis  de  acordo  com   estrutura  dos  arquivos   • Adicione  as  chaves  que  desejar  para   reaproveitar  em  todo  o  site
  9. 9. Exemplo
  10. 10. YAML  Front  MaJer --- 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> ...
  11. 11. Deploy? • Instancia  grá$s  do  Heroku   • GitHub  Pages   • Direto  para  a  Amazon  S3   • Qualquer  lugar  que  aceite  páginas  está$cas   • hTp://jekyllrb.com/docs/deployment-­‐ methods/
  12. 12. Comentários  do  Blog? Extender   -­‐ Disqus  (exemplo)   -­‐ Intense  Debate   -­‐ Facebook  Comments
  13. 13. 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
  14. 14. Data  Files? _data/*/*.yml _data/*/*.csv _data/*/*.json
  15. 15. 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
  16. 16. Data  Files name: Bluesoft members: - name: Tom Preston-Werner github: mojombo - name: Parker Moore github: parkr _data/orgs/blueso.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>
  17. 17. Arquitetura  de  Plugins (facilidade  de  extender) _plugins/*.rb hTp://jekyllrb.com/docs/plugins/
  18. 18. OBRIGADO (confira  as  próximas  apresentações  avançadas) @bruno2ms

×