O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Modern Static Site with GatsbyJS

420 visualizações

Publicada em

Introduction to modern static site with GatsbyJS

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Modern Static Site with GatsbyJS

  1. 1. GatsbyJS Build modern, fast, secure apps with React and friends.
  2. 2. @rizafahmi
  3. 3. @rizafahmi22
  4. 4. Once Upon A Time…
  5. 5. There was a thing called a Website
  6. 6. Request Response (HTML, CSS, JS) Client Server Database
  7. 7. Everything run smoothly until one day…
  8. 8. Your content become viral
  9. 9. Where is the problem? Cheap hosting? The platform? Slow language? Bottleneck in database? What about security? 
 example.com/wp-admin ?
  10. 10. Here comes Static Site
  11. 11. It fast!
  12. 12. GIT-able
  13. 13. Producing JUST HTML, CSS and JAVASCRIPT
  14. 14. No database
  15. 15. secure
  16. 16. use your favorite editor
  17. 17. No need expensive server, even free!
  18. 18. No need to scale
  19. 19. Options: Jekyll, Hexo, Hugo
  20. 20. Build your content in markdown
  21. 21. Generate To HTML, CSS and JavaScript
  22. 22. Deploy/upload to hosting service
  23. 23. BUUUUUTTTTT…
  24. 24. It’s old school technology
  25. 25. !!--- layout: base !!--- {% include header.html type="post" %} <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <article role="main" class="blog-post"> {{ content }} !</article> <ul class="pager blog-pager"> {% if page.previous.url %} <li class="previous"> <a href="{{ page.previous.url | prepend: site.baseurl | replace: '!//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post!</a> !</li> {% endif %} {% if page.next.url %} <li class="next"> <a href="{{ page.next.url | prepend: site.baseurl | replace: '!//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;!</a> !</li> {% endif %} !</ul> {% if page.comments %} <div class="disqus-comments"> {% include disqus.html %} !</div> {% include fb-comment.html %} {% endif %} !</div> !</div> !</div>
  26. 26. What Gatsby Is
  27. 27. Buildmodern apps and websites with blazing fastbeautifulsecure ReactGraphQLWebpackPostCSSetc.
  28. 28. Focus on Developer Experience
  29. 29. Batteries IncludedHot ReloadingFeel very natural to React DevEntire React ecosystem via npm
  30. 30. Bonus: Single-page ApplicationProgressive Web Apps
  31. 31. Who Using GatsbY
  32. 32. reactjs.org
  33. 33. airbnb.io
  34. 34. figma.com
  35. 35. rizafahmi.com
  36. 36. randomscreencast.com
  37. 37. pdpcid.netlify.com
  38. 38. How Does It Works
  39. 39. Get data fromMarkdownContentfulWordpressREST APISpreadSheetAnywhere.
  40. 40. Write app better withReactReduxWebpackGraphQLESLintPrettier.
  41. 41. Deliver via Amazon S3NetlifyGitHub PagesSurge.shNow.shAerobaticMany more.
  42. 42. “Talk is cheap show me the code” — Linus Torvalds
  43. 43. $ npm install !--global gatsby-cli
  44. 44. $ gatsby new gatsby-site $ cd gatsby-site $ gatsby develop $ open http:!//localhost:8000/
  45. 45. ├── .cache ├── public ├── src │   ├── components │   │   ├── header.js │   │   ├── layout.css │   │   └── layout.js │   ├── images │   │   └── gatsby-icon.png │   ├── pages │   │   ├── 01-first-blog │   │   ├── 404.js │   │   ├── index.js │   │   ├── page-2.js │   │   └── page-3.js │   └── templates │   └── post.js ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── yarn.lock
  46. 46. Lets Create a new page
  47. 47. Bonus: Graphql
  48. 48. Build Blogging Engine With Gatsby
  49. 49. Step 1: Read all markdown files
  50. 50. Step 2: Create template for blog post
  51. 51. Step 3: Generate Markdown into HTML
  52. 52. Deploying Gatsby
  53. 53. Step 1: Push to GitHub
  54. 54. Step 2: Login to Netlify
  55. 55. Step 3: Create New Site
  56. 56. Step 4: Deploy
  57. 57. Bonus Step: Make changes, automatic redeploy
  58. 58. Summary Gatsby is site generator with latest technology. Build website fast, secure, SPA and PWA ready. Easy deployment
  59. 59. github.com/rizafahmi slideshare.net/rizafahmi twitter.com/rizafahmi22 facebook.com/rizafahmi riza@hacktiv8.com ceritanyadeveloper.com

×