Criando o seu primeiro site JAMStack com Hugo e Netlify

Apresentação feita no Front End SP Meetup!

Transcript

1. Criando seu primeiro site JAMStack
2. WILLIAM OLIVEIRA Desenvolvedor de Software
3. tecnogueto.com.br
4. perifacode.com
5. /ouniversodaprogramacao
6. JAMStack?
7. J
8. JavaScript
9. A
10. APIs
11. M
12. Markup
13. Uma arquitetura moderna Crie sites rápidos e seguros e aplicações dinâmicas com JavaScript, APIs e marcação pré-renderizada, entregues sem servidores web. - jamstack.org
15. HTML Dados PHPzaum MySQL
18. !runtime
19. CDN
20. É tudo estático!
21. !HTML
22. Geradores de sites estáticos
25. • Hospedagem Git • Static Site Generator • CDN • APIs
26. • CI & CD
28. Sem processamento no servidor que envia o HTML/CSS/JAVASCRIPT
29. !WordPress
30. !Next.js
31. ?React
32. LIVE CODE
33. • Hugo • GitHub • Netlify
34. - hugo new site nome_do_site - cd nome_do_site - git init - git submodule add https://github.com/EmielH/tale-hugo.git themes/tale-hugo - hugo server -D - echo 'theme = "tale-hugo"' >> config.toml - .gitignore (public & resources) - hugo new posts/meu-primeiro-post.md - git add - git commit - git push -u origin master Hugo
35. - selecionar o repo - aguardar o deploy - remover o draft: true do artigo - publicar - git submodule add https://github.com/woliveiras/netlify-cms-base.git static/admin - git add - git push - ativar o Identity em settings - em settings do Identity, ativar o Git Gateway - configurar os External Providers Netlify
36. WILLIAM OLIVEIRA /ouniversodaprogramacao @w_oliveiras
37. Desenvolvendo um blog com interface administrativa com Hugo e Netlify