Jekyll
•
1 gostou•878 visualizações
Este documento descreve como usar uma ferramenta chamada Static Site Generator para criar sites estáticos usando Ruby, Liquid e YAML. Ele explica como converter arquivos Markdown, HTML e Sass em HTML estático usando templates e layouts e aproveitando a estrutura de pastas para gerar blogs e posts. Também discute recursos como paginação, permalinks personalizados, posts relacionados e destaque de sintaxe que vêm prontos, além de como configurar variáveis, usar arquivos de dados e estender a arquitetura por meio de plugins.
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Jekyll
Semelhante a Jekyll (20)
Mais de Bruno Mendes
Jekyll
- 3. Ruby + Liquid + YAML
- 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. O que já vem pronto? • Paginação • Estrutura personalizada de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Tex$le
- 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. Exemplo
- 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. 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. Comentários do Blog? Extender -‐ Disqus (exemplo) -‐ Intense Debate -‐ Facebook Comments
- 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
- 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. 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. Arquitetura de Plugins (facilidade de extender) _plugins/*.rb hTp://jekyllrb.com/docs/plugins/
- 18. OBRIGADO (confira as próximas apresentações avançadas) @bruno2ms