Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
GatsbyJS
Build modern, fast, secure apps with React and friends.
@rizafahmi
@rizafahmi22
Once Upon A Time…
There was a thing called a
Website
Request
Response (HTML, CSS, JS)
Client
Server
Database
Everything run smoothly until
one day…
Your content become viral
Where is the problem?
Cheap hosting?
The platform?
Slow language?
Bottleneck in database?
What about security? 

example.c...
Here comes Static Site
It fast!
GIT-able
Producing JUST HTML, CSS and
JAVASCRIPT
No database
secure
use your favorite editor
No need expensive server, even
free!
No need to scale
Options: Jekyll, Hexo, Hugo
Build your content in
markdown
Generate To HTML, CSS and
JavaScript
Deploy/upload to hosting
service
BUUUUUTTTTT…
It’s old school technology
!!---
layout: base
!!---
{% include header.html type="post" %}
<div class="container">
<div class="row">
<div class="col-l...
What Gatsby Is
Buildmodern
apps and websites with
blazing fastbeautifulsecure
ReactGraphQLWebpackPostCSSetc.
Focus on Developer
Experience
Batteries IncludedHot ReloadingFeel very natural to React DevEntire React ecosystem via npm
Bonus: Single-page ApplicationProgressive Web Apps
Who Using GatsbY
reactjs.org
airbnb.io
figma.com
rizafahmi.com
randomscreencast.com
pdpcid.netlify.com
How Does It Works
Get data fromMarkdownContentfulWordpressREST APISpreadSheetAnywhere.
Write app better withReactReduxWebpackGraphQLESLintPrettier.
Deliver via Amazon S3NetlifyGitHub PagesSurge.shNow.shAerobaticMany more.
“Talk is cheap show me the code” — Linus Torvalds
$ npm install !--global gatsby-cli
$ gatsby new gatsby-site
$ cd gatsby-site
$ gatsby develop
$ open http:!//localhost:8000/
├── .cache
├── public
├── src
│   ├── components
│   │   ├── header.js
│   │   ├── layout.css
│   │   └── layout.js
│   ├─...
Lets Create a new page
Bonus: Graphql
Build Blogging Engine
With Gatsby
Step 1: Read all markdown files
Step 2: Create template for blog post
Step 3: Generate Markdown into HTML
Deploying Gatsby
Step 1: Push to GitHub
Step 2: Login to Netlify
Step 3: Create New Site
Step 4: Deploy
Bonus Step: Make changes, automatic redeploy
Summary
Gatsby is site generator with latest technology.
Build website fast, secure, SPA and PWA ready.
Easy deployment
github.com/rizafahmi
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hacktiv8.com
ceritanyade...
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJS
Prochain SlideShare
Chargement dans…5
×

Modern Static Site with GatsbyJS

423 vues

Publié le

Introduction to modern static site with GatsbyJS

Publié dans : Technologie
  • Soyez le premier à commenter

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

×