Criando o seu primeiro site JAMStack com Hugo e Netlify

Criando o seu primeiro site JAMStack com Hugo e Netlify

Apresentação feita no Front End SP Meetup!

A203aead4fedebfd1af050c7d450045b?s=128

William Oliveira

July 12, 2019
Tweet

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
  14. None
  15. HTML Dados PHPzaum MySQL

  16. None
  17. None
  18. !runtime

  19. CDN

  20. É tudo estático!

  21. !HTML

  22. Geradores de sites estáticos

  23. None
  24. None
  25. • Hospedagem Git • Static Site Generator • CDN •

    APIs
  26. • CI & CD

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