Palestra sobre Jekyll no 6º Femug em Curitiba, no dia 18 de Setembro de 2016. Author: Fernando Moreira Site: http://nandomoreira.me/

1. Apresenta:

3. Jekyll, the powerful static site generator
WHO AM I?

4. O QUE SÃO GERADORES ESTÁTICOS?

5. O QUE SÃO GERADORES ESTÁTICOS?
Static Site
Static site
generator
Templates

6. GERADORES ESTÁTICOS - STATICGEN.COM

7. http://www.staticgen.com/
GERADORES ESTÁTICOS - STATICGEN.COM

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

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

10. INSTALAÇÃO DO JEKYLL

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

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

13. ▸ 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

14. QUICK-START

15. QUICK-START
http://jekyllrb.com/docs/quickstart/

16. QUICK-START

17. YOU NEED A HELP??

18. YOU NEED A HELP??

19. ~ PREVIEW ~

20. ESTRUTURA DE ARQUIVOS E DIRETÓRIOS

21. 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?)

22. 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)

23. ~ CODE ~

24. FRONT MATTER E LIQUID TEMPLATES

25. FRONT MATTER E LIQUID TEMPLATES
Front Matter
Liquid

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

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

28. LIQUID TEMPLATES
https://shopify.github.io/liquid/

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

30. ~ CODE ~

31. COISAS LEGAIS NO JEKYLL

32. 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/

33. SITES COOL QUE USAM JEKYLL

34. 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/

35. TEMAS PARA JEKYLL

36. TEMAS PARA JEKYLL
‣ http://jekyllthemes.org/
‣ http://themes.jekyllrc.org/
‣ https://github.com/nandomoreirame

37. GITHUB PAGES

38. GITHUB PAGES
https://pages.github.com/

39. GITHUB PAGES

40. ~ CODE ~

41. Thank you!
Does anyone have a questions?