Introductory talk on Gatsbyjs

1. Introduction to Gatsby.js
Syed Qasim Rizvi
Gatsby user since 2019
Sr. Software Engineer at Geeks of Kolachi

2. What is Gatsby?
A new blazing-fast Static Site Generator (SSG) built with
React, Webpack and GraphQL.
First beta release 15
th
June 2017

3. Buzzword
Static Site Generator (SSG)
 Code executed and HTML generated at build time.
 Typically generated based on mix of data files (Markdown,
Images, JSON) templates and code.

4. What is Gatsby For?
 Building lightning fast websites, especially when some of the
content is relatively static.
 Blogs, Business sites, Marketing sites, eCommerce sites,
web apps.

5. Wordpress vs SSG Models

6. Wordpress vs SSG Models

7. SSG Model (Gatsby version)
From https://www.gatsbyjs.org/

8. Benefits of Gatsby
 Optimized loads.
 Best Practices as plugins.
 Flexibility
 Hot reloading

9. https://www.gatsbyjs.org/docs/quick-start/
Quick Start

10. Quick
Start
https://www.gatsbyjs.org/docs/quick-start/

11. File Structure

12. Routing
 In your site’s gatsby-node.js by implementing the API
createPages.
 Gatsby core automatically turns React components in
src/pages into pages.
 Plugins can also implement createPages and create
pages for you.

13. createPage API
https://www.gatsbyjs.org/docs/routing

14. Question?