Apresenta:

Jekyll, the powerful static site generator

WHO AM I?

O QUE SÃO GERADORES ESTÁTICOS?

O QUE SÃO GERADORES ESTÁTICOS?

Static SiteStatic sitegeneratorTemplates

GERADORES ESTÁTICOS - STATICGEN.COM

http://www.staticgen.com/

GERADORES ESTÁTICOS - STATICGEN.COM

QUAIS SÃO AS VANTAGENS DE USAR GERADORES ESTÁTICOS?

QUAIS SÃO AS VANTAGENS DE USAR GERADORES ESTÁTICOS?

▸ Simplicidade

▸ Sem banco de dados

▸ Sem painel administrativo, login e senha

▸ Qualquer server suporta

▸ Facilidade de escrever (Markdown)

▸ Sistema de templates, condicionais e filtros

INSTALAÇÃO DO JEKYLL

INSTALAÇÃO DO JEKYLL - REQUIREMENTS

‣ Ruby (including development headers, v1.9.3 or above for Jekyll 2 and v2 or above for Jekyll 3)

‣ RubyGems

‣ Linux, Unix, or Mac OS X (Windows)

‣ NodeJS, or another JavaScript runtime (Jekyll 2 and earlier, for CoffeeScript support).

‣ Python 2.7 (for Jekyll 2 and earlier)

http://jekyllrb.com/docs/installation/#requirements

INSTALAÇÃO DO JEKYLL - EM SISTEMAS UNIX

It's very simple!

Instalação de Pre-releases

Instalação de uma versão especifica

http://jekyllrb.com/docs/installation/#install-with-rubygems

http://jekyllrb.com/docs/installation/#pre-releases

▸ http://jekyllrb.com/docs/windows/#installation

▸ http://jekyll-windows.juthilo.com/

▸ https://davidburela.wordpress.com/2015/11/28/easily-install-jekyll-on-windows-with-3-command-prompt-entries-and-chocolatey/

INSTALAÇÃO DO JEKYLL - NO WINDOWS

QUICK-START

QUICK-START

http://jekyllrb.com/docs/quickstart/

QUICK-START

YOU NEED A HELP??

YOU NEED A HELP??

~ PREVIEW ~

ESTRUTURA DE ARQUIVOS E DIRETÓRIOS

ESTRUTURA DE ARQUIVOS E DIRETÓRIOS

‣ _includes -> Todas as partials (includes) do seu blog/site

‣ _layouts -> Layouts para suas páginas

‣ _posts -> Todos os posts do blog, são arquivos .markdown

‣ _sass -> Arquivos do pré-processador SASS

‣ css -> Arquivos CSS (Ah vá, jura?)

ESTRUTURA DE ARQUIVOS E DIRETÓRIOS

‣ .gitignore -> (dispensa comentários :D )

‣ _config.yml -> Arquivo de configuração base do Jekyll

‣ about.md -> Uma página qualquer do projeto

‣ feed.xml -> Arquivos do pré-processador SASS

‣ index.html -> (nem vou falar nada :P)

~ CODE ~

FRONT MATTER E LIQUID TEMPLATES

FRONT MATTER E LIQUID TEMPLATES

Front Matter

Liquid

FRONT MATTER

https://jekyllrb.com/docs/frontmatter/

O Front Matter é onde Jekyll começa a ficar muito legal. Qualquer arquivo que contém um bloco Front Matter YAML serão processados por Jekyll como um arquivo especial.

O Front Matter deve ser a primeira coisa no arquivo e deve assumir a forma de YAML válido indicado entre as linhas triple-dashed.

Aqui está um exemplo básico:

LIQUID TEMPLATES

Líquido é um modelo de linguagem de código aberto criado pelo Shopify e escrito em Ruby. É a espinha dorsal de temas Shopify e é usado para carregar o conteúdo dinâmico em vitrines.

LIQUID TEMPLATES

https://shopify.github.io/liquid/

LIQUID TEMPLATES

https://github.com/Shopify/liquid/wiki/liquid-for-designers

~ CODE ~

COISAS LEGAIS NO JEKYLL

COISAS LEGAIS NO JEKYLL

‣ Collections => https://jekyllrb.com/docs/collections/

‣ Data files => https://jekyllrb.com/docs/datafiles/

‣ Assets - SASS <3 => https://jekyllrb.com/docs/assets/

‣ Migrations => https://jekyllrb.com/docs/migrations/

SITES COOL QUE USAM JEKYLL

SITES COOL QUE USAM JEKYLL

‣ O próprio site/doc do Jekyll => https://jekyllrb.com/

‣ Services page do Github => https://services.github.com/

‣ Doc do Bootstrap 3 => http://getbootstrap.com/

‣ Blog do Willian Justen => https://willianjusten.com.br/

TEMAS PARA JEKYLL

TEMAS PARA JEKYLL

‣ http://jekyllthemes.org/

‣ http://themes.jekyllrc.org/

‣ https://github.com/nandomoreirame

GITHUB PAGES

GITHUB PAGES

https://pages.github.com/

GITHUB PAGES

~ CODE ~

Thank you!

Does anyone have a questions?