Introduction to modern static site with GatsbyJS

1. GatsbyJS
Build modern, fast, secure apps with React and friends.

2. @rizafahmi

3. @rizafahmi22

4. Once Upon A Time…

5. There was a thing called a
Website

6. Request
Response (HTML, CSS, JS)
Client
Server
Database

7. Everything run smoothly until
one day…

8. Your content become viral

9. Where is the problem?
Cheap hosting?
The platform?
Slow language?
Bottleneck in database?
What about security?
example.com/wp-admin ?

10. Here comes Static Site

11. It fast!

12. GIT-able

13. Producing JUST HTML, CSS and
JAVASCRIPT

14. No database

15. secure

16. use your favorite editor

17. No need expensive server, even
free!

18. No need to scale

19. Options: Jekyll, Hexo, Hugo

20. Build your content in
markdown

21. Generate To HTML, CSS and
JavaScript

22. Deploy/upload to hosting
service

23. BUUUUUTTTTT…

24. It’s old school technology

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>

27. What Gatsby Is

28. Buildmodern
apps and websites with
blazing fastbeautifulsecure
ReactGraphQLWebpackPostCSSetc.

29. Focus on Developer
Experience

30. Batteries IncludedHot ReloadingFeel very natural to React DevEntire React ecosystem via npm

31. Bonus: Single-page ApplicationProgressive Web Apps

32. Who Using GatsbY

33. reactjs.org

34. airbnb.io

35. figma.com

36. rizafahmi.com

37. randomscreencast.com

38. pdpcid.netlify.com

39. How Does It Works

40. Get data fromMarkdownContentfulWordpressREST APISpreadSheetAnywhere.

41. Write app better withReactReduxWebpackGraphQLESLintPrettier.

42. Deliver via Amazon S3NetlifyGitHub PagesSurge.shNow.shAerobaticMany more.

44. “Talk is cheap show me the code” — Linus Torvalds

45. $ npm install !--global gatsby-cli

46. $ gatsby new gatsby-site
$ cd gatsby-site
$ gatsby develop
$ open http:!//localhost:8000/

47. ├── .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

48. Lets Create a new page

49. Bonus: Graphql

50. Build Blogging Engine
With Gatsby

51. Step 1: Read all markdown files

52. Step 2: Create template for blog post

53. Step 3: Generate Markdown into HTML

54. Deploying Gatsby

55. Step 1: Push to GitHub

56. Step 2: Login to Netlify

57. Step 3: Create New Site

58. Step 4: Deploy

59. Bonus Step: Make changes, automatic redeploy

60. Summary
Gatsby is site generator with latest technology.
Build website fast, secure, SPA and PWA ready.
Easy deployment

61. github.com/rizafahmi
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hacktiv8.com
ceritanyadeveloper.com