Jekyll the powerful static site generator
-
Upload
femug-cwb -
Category
Technology
-
view
82 -
download
0
Transcript of Jekyll the powerful static site generator
![Page 1: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/1.jpg)
Apresenta:
![Page 2: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/2.jpg)
![Page 3: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/3.jpg)
Jekyll, the powerful static site generator
WHO AM I?
![Page 4: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/4.jpg)
O QUE SÃO GERADORES ESTÁTICOS?
![Page 5: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/5.jpg)
O QUE SÃO GERADORES ESTÁTICOS?
Static SiteStatic sitegeneratorTemplates
![Page 8: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/8.jpg)
QUAIS SÃO AS VANTAGENS DE USAR GERADORES ESTÁTICOS?
![Page 9: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/9.jpg)
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
![Page 10: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/10.jpg)
INSTALAÇÃO DO JEKYLL
![Page 11: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/11.jpg)
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
![Page 12: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/12.jpg)
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
![Page 13: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/13.jpg)
▸ 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
![Page 14: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/14.jpg)
QUICK-START
![Page 15: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/15.jpg)
QUICK-START
http://jekyllrb.com/docs/quickstart/
![Page 16: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/16.jpg)
QUICK-START
![Page 17: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/17.jpg)
YOU NEED A HELP??
![Page 18: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/18.jpg)
YOU NEED A HELP??
![Page 19: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/19.jpg)
~ PREVIEW ~
![Page 20: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/20.jpg)
ESTRUTURA DE ARQUIVOS E DIRETÓRIOS
![Page 21: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/21.jpg)
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?)
![Page 22: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/22.jpg)
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)
![Page 23: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/23.jpg)
~ CODE ~
![Page 24: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/24.jpg)
FRONT MATTER E LIQUID TEMPLATES
![Page 25: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/25.jpg)
FRONT MATTER E LIQUID TEMPLATES
Front Matter
Liquid
![Page 26: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/26.jpg)
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:
![Page 27: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/27.jpg)
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.
![Page 28: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/28.jpg)
LIQUID TEMPLATES
https://shopify.github.io/liquid/
![Page 29: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/29.jpg)
LIQUID TEMPLATES
https://github.com/Shopify/liquid/wiki/liquid-for-designers
![Page 30: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/30.jpg)
~ CODE ~
![Page 31: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/31.jpg)
COISAS LEGAIS NO JEKYLL
![Page 32: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/32.jpg)
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/
![Page 33: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/33.jpg)
SITES COOL QUE USAM JEKYLL
![Page 34: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/34.jpg)
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/
![Page 35: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/35.jpg)
TEMAS PARA JEKYLL
![Page 36: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/36.jpg)
TEMAS PARA JEKYLL
‣ http://jekyllthemes.org/
‣ http://themes.jekyllrc.org/
‣ https://github.com/nandomoreirame
![Page 37: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/37.jpg)
GITHUB PAGES
![Page 38: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/38.jpg)
GITHUB PAGES
https://pages.github.com/
![Page 39: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/39.jpg)
GITHUB PAGES
![Page 40: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/40.jpg)
~ CODE ~
![Page 41: Jekyll the powerful static site generator](https://reader033.fdocuments.us/reader033/viewer/2022051404/58f1a2b61a28ab07218b45a1/html5/thumbnails/41.jpg)
Thank you!
Does anyone have a questions?