Blogando feito um hackudo usando Jekyll

- O que é Jekyll
- O que é e como funcionam geradores estáticos
- Como e onde hospedar blogs estáticos
- Criando um blog do zero com Jekyll ou partindo de um tema
- Assuntos básicos do Jekyll como Gems, Gemfile, RubyGems, Liquid Templates, Front Matter
- Prós e contras do uso de geradores estáticos
- Configurações legais para seu blog como HTTPS, Custom Domain, Cache, migrando de WordPress para Jekyll e até uma página de Admin para usar no seu blog

Links importantes para aprender Jekyll

O que é um Gemfile: http://tosbourn.com/what-is-the-gemfile/

RubyGems: https://rubygems.org/

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

O que são arquivos YAML: https://pt.wikipedia.org/wiki/YAML

Lista de tags Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

GitHub Pages: https://pages.github.com/

Custom Domain: https://help.github.com/articles/setting-up-an-apex-domain/

HTTPS, Cache e Redirects: https://www.cloudflare.com/

Erro 404 padrão do GitHub Pages: https://woliveiras.com.br/fica-temer

Criando uma página para 404 no Blog estático: https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/

Comentários no Blog usando Disqus: https://disqus.com

Enviando emails com Formspree: https://formspree.io

Página de administração para jekyllhttps://jekyll.github.io/jekyll-admin/

Modelagem de conteúdo para Jekyll: https://www.smashingmagazine.com/2016/02/content-modeling-with-jekyll/

Arquivos de exemplo:

https://github.com/woliveiras/__s/blob/master/Gemfile

https://github.com/woliveiras/__s/blob/master/_config.yml

https://github.com/woliveiras/__s/blob/master/_includes/comments.html

https://github.com/woliveiras/__s/blob/master/_includes/footer.html

https://github.com/woliveiras/__s/blob/master/contact.html

Projetos utilizando Jekyll

Dunders: https://github.com/woliveiras/__s

Blog de Engenharia do Viva Decora (https://vivadecora.com.br): https://github.com/vivadecora/vivadecora.github.io/

FEMUG-ABC: https://github.com/femug-abc/femug-abc.github.io

CRUD-ABC: https://github.com/crud-abc/crud-abc.github.io

My Precious Links: https://github.com/woliveiras/my-precious-links

Transcript

1. Blogando feito Hackudo usando o
2. William Oliveira Front-End Developer @w_oliveiras github.com/woliveiras woliveiras.com.br
3. vivadecora.com.br
5. O que é Jekyll?
7. Pera, ce falou RUBY???
8. Preciso manjar de Ruby pra trabalhar com Jekyll?
9. O que são Gems
10. Gemfile
11. source "https://rubygems.org" gemspec gem 'jekyll-paginate' gem 'jekyll-sitemap' gem 'jekyll-feed'
12. RubyGems.org
14. Liquid Templates
15. {% if user %} Hello {{ user.name }}! {% endif %}
16. YAML.yml
17. title: Dunders | A Starter Theme for Jekyll # put your blog title description: Faster to start a new Jekyll theme # put your description for your amazing blog baseurl: "" # the subpath of your site, e.g. /blog url: "" # the base hostname & protocol for your site e.g. https://woliveiras.com.br language: "" # language to set into html tag, default is en paginate: 5 # Number of posts on each page
19. # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6
20. Pronto! Agora você já conhece o suficiente pra se virar no Gugou. :)~
21. vS
22. Sua Máquina Servidor Ruby Jekyll Templates Conteúdo HTML PHP MySQL Thema Plugins Conteúdo PHP MySQL Thema Plugins Conteúdo
23. Prós - Conteúdo HTML roda em qualquer servidor - Sem vulnerabilidades de segurança - Conteúdo entregue mais rápido - Tema customizável via HTML, CSS e JS
24. Contras - Não tem sistema de comentários??? - Tem que manjar de HTML, CSS e JS - SEO, Performance, WAI-ARIA, ein?
25. SE VIRA, Fiiii!
26. C TA DE BRINKS, NÉ?
27. Trabalhando com Jekyll
28. Criando um Blog
29. $ jekyll new blog
30. $ git clone git@github.com:woliveiras/__s.git blog
31. Estrutura de pastas
32. /(raiz) _drafts/ _posts/ _includes/ _layouts/ _site/ _sass/ _config.yml Index.html feed.xml Gemfile
33. Configurações
34. Globais
35. <h1>{{ site.name }}</h1>
36. Front Matter
37. --- layout: default featured-image: gatinho-lindo.jpg ---
38. Páginas
39. --- layout: default featured-image: gatinho-lindo.jpg --- <img src=”{{ page.featured-image }}”>
40. Posts
41. --- layout: post featured-image: outro-gatinho-lindo.jpg --- <img src=”{{ post.featured-image }}”>
42. Outras coisas no _config.yml
43. # PAGINATION paginate: 5 paginate_path: "blog/pagina:num" # BUILD SETTINGS markdown: kramdown highlighter: rouge sass: sass_dir: _sass style: compressed gems: [jekyll-paginate]
44. Subindo o servidor localmente
45. $ jekyll new blog $ cd blog $ bundle $ jekyll s
46. $ git clone git@github.com:woliveiras/__s.git blog $ cd blog $ bundle $ jekyll s
47. Preparando para Deploy
48. $ jekyll build
49. Hospedando o Blog
52. Custom Domain
53. /(raiz) _drafts/ _posts/ _includes/ _layouts/ _site/ _sass/ _config.yml Index.html feed.xml Gemfile CNAME
54. arquivo: CNAME blogdomerisvaldo.com.br
56. HTTPS e Cache
61. /(raiz) _drafts/ _posts/ _includes/ _layouts/ _site/ _sass/ _config.yml Index.html feed.xml Gemfile CNAME 404.html
62. --- layout: default home: true permalink: /404.html --- <p>Don't have nothing here!</p>
63. EU QUERO COMENTÁRIOS NOS POSTS!!!
64. disqus.com
65. arquivo: _config.yml disqus_shortname: dunders-website
66. arquivo: comments.html <section> <div id="disqus_thread"></div> </section> <script> (function() { var d = document, s = d.createElement('script'); s.src = '//' + "{{ site.disqus_shortname }}" + '.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s);})(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
67. arquivo: footer.html <footer> <span>© {{ site.time | date: '%Y' }} writed with <3 by {{ site.author }}, site develop with <a href="https://jekyllrb.com/" title="Jekyll website">Jekyll</a></span> </footer> </body> {% if site.disqus_shortname %} <script id="dsq-count-scr" src="//{{ site.disqus_shortname }}.disqus.com/count.js" async></script> {% endif %} </html>
68. Enviando email
70. arquivo: contact.html --- layout: page title: Contact --- <form action="//formspree.io/{{ site.email }}" method="POST"> <input type="email" name="_replyto" placeholder="{{ site.var_your_email }}"> <input type="hidden" name="_next" value="{{ site.baseurl }}/thanks" /> <input type="hidden" name="_subject" value="New submission from {{ site.url }}{{ site.baseurl }}" /> <input type="text" name="_gotcha" style="display:none" /> <textarea type="text" name="content" rows="8" placeholder="{{ site.var_your_message }}"></textarea> <input type="submit" value="Send"> </form>
71. Plugins
72. https://github.com/planetjekyll/awesome-jekyll-plugins
73. Workflow
74. $ jekyll s Editar arquivos Olhar no navegador $ jekyll build Deploy (Git, RSync, FTP, etc)
75. WordPress -> Jekyll
76. https://import.jekyllrb.com/docs/wordpress/
78. Duvidas?