Jekyll the static site generator

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

Conﬁguração Centralizada _config.yml

Conﬁguração YAML • Conﬁguraçã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: 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> ...

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: 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

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 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>

Arquitetura de Plugins (facilidade de extender) _plugins/*.rb hTp:/ /jekyllrb.com/docs/plugins/

OBRIGADO (conﬁra as próximas apresentações avançadas) @bruno2ms

Jekyll the static site generator

Jekyll the static site generator

bruno2ms

More Decks by bruno2ms

Other Decks in Technology

Featured

Transcript

Sta$c Site Generator @bruno2ms

Como começar?

Ruby + Liquid + YAML

Como funciona? • Converte Markdown, Tex$le e HTML com

O que já vem pronto? • Paginação • Estrutura

Estrutura Inicial

Conﬁguração Centralizada _config.yml

Conﬁguração YAML • Conﬁguração de variáveis globais • Variáveis

Exemplo

YAML Front MaJer --- layout: post title: Blogging Like a

Deploy? • Instancia grá$s do Heroku • GitHub Pages

Comentários do Blog? Extender -‐ Disqus (exemplo) -‐

Disqus ... layout: default comments: true # other options ...

Data Files? _data//.yml _data//.csv _data//.json

Data Files - name: Tom Preston-Werner github: mojombo - name:

Data Files name: Bluesoft members: - name: Tom Preston-Werner github:

Arquitetura de Plugins (facilidade de extender) _plugins/*.rb hTp:/ /jekyllrb.com/docs/plugins/

OBRIGADO (conﬁra as próximas apresentações avançadas) @bruno2ms