jekyll
TRANSCRIPT
Sta$c Site Generator
@bruno2ms
Como começar?
Ruby + Liquid + YAML
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
O que já vem pronto?• Paginação • Estrutura personalizada de permalinks • Posts relacionados • Syntax highlight • Conversão Markdown/Tex$le
Estrutura Inicial
Configuração Centralizada
_config.yml
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
Exemplo
YAML Front MaJer---layout: posttitle: Blogging Like a Hackerpermalink: /path/to/my/page/published: truecategories: [categoria1, categoria2]---
<!DOCTYPE HTML><html> <head> <title>{{ site.name }} - {{ page.title }}</title> </head> <body> ...
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/
Comentários do Blog?Extender -‐ Disqus (exemplo) -‐ Intense Debate -‐ Facebook Comments
Disqus...layout: defaultcomments: 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 Filesname: Bluesoftmembers: - name: Tom Preston-Werner github: mojombo
- name: Parker Moore github: parkr
_data/orgs/blueso\.yml _data/orgs/webgoal.ymlname: Webgoalmembers: - 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
hTp://jekyllrb.com/docs/plugins/
OBRIGADO(confira as próximas apresentações avançadas)
@bruno2ms