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
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?
Top Related