1. Why do front-end
developers 💜 Gatsby.js

2. Hello,
my name is Katya and I’m front-end dev in Boosta.

3. Why do front-end
developers 💜 Gatsby.js

4. What is Gatsby.js
• Gatsby widely known as a Static Site Generator (SSG)
• Uses a combination of React & GraphQL
• Gatsby calls itself a Modern Site Generator

5. Static Site Generatorors
• Generates static HTML pages using a combo of templates, components & data.

6. Static Websites
• Uses static HTML pages (with maybe JS & CSS)
• Pages uploaded to a CDN / web host
Drawbacks
• Hard to update / maintain pages (re-writing a lot of the same code on every page)
• Fresh request to the server for every page (slows website down)
• Generally do not contain dynamic data
Server
page request
Types of Websites
SEO
Speed
Easy to update

7. Types of Websites
Single Page Applications
• Typical React / Vue website
• Only a single server request mode for the initial HTML page (empty)
• Everything else (routing, data) is handled by the SPA in the browser
SEO
Speed
Easy to update
Drawbacks
• Web pages are not SEO friendly (initial request is for a blank HTML page)
Server
initial request only

8. Types of Websites
Server Side Rendered (SSR)
• Pages rendered on the server after every request
• Server sources data (e.g. mongodb) & uses templates to render HTML pages
• Resulting pages are sent back to the browser
SEO
Speed
Easy to update
Drawbacks
• Fresh request needs to be made for every page
• Server can take time getting data and rendering pages
Server
page requests
renders pages using
templates & data

9. Types of Websites
Static Site Generator (Gatsby)
• Static pages are compiled at build-time (before deployment)
• Gatsby sites / pages are made using React components
• Static pages are then deployed to the web
• After initial request, the site behaves more like an SPA
SEO
Speed
Easy to update
Server
initial request
(fully rendered – good for SEO)

10. How Gatsby Works

11. Make 💜, not 💩

12. Make 💜, not 💩
in 5 baby steps

13. 0. Set Up Your Development Environment → Create Your First Gatsby Site
npm install -g gatsby-cli
gatsby new my-awesome-project
https://github.com/gatsbyjs/gatsby-starter-hello-world
cd my-awesome-project
Installing CLI and creating new project
Using CLI to Run, Build and Serve project
gatsby develop
gatsby build
gatsby serve

14. 1. Create and Deploy Your First Gatsby Site

15. 2. Use and Style React Components
Create a page component
Task: Update the home page content
localhost:8000

16. 2. Use and Style React Components
Task: Create a new page component for an About page
localhost:8000/about

17. 2. Use and Style React Components
Use the <Link> component
Task: On the Home page, import the Link component from the Gatsby package

18. 2. Use and Style React Components
Create a reusable layout component
Task: Create a new
fi
le called src/components/layout.js

19. 2. Use and Style React Components
Task: Update your Home page component to use the Layout component instead of the
hard-coded Link component you added in the previous section

20. 2. Use and Style React Components
Style components with CSS Modules
Task: Create a new
fi
le: src/components/layout.module.css

21. 2. Use and Style React Components
Task: Then import that class into your Layout component .js
fi
le, and use the className prop to
assign it to the top-level <div> element:

22. 3. Add Features with Plugins

23. 3. Add Features with Plugins
Task: Use gatsby-plugin-image to add a static image to your home page
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-
fi
lesystem

24. 3. Add Features with Plugins
Task: Use gatsby-plugin-image to add a static image to your home page

25. 4. Query for Data with GraphQL

26. 4. Query for Data with GraphQL
Use GraphiQL to explore the data layer and write GraphQL queries
http://localhost:8000/___graphql

27. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• In your web browser, go to localhost:8000/___graphiql to see the GraphiQL interface.
• In the Explorer pane, open the dropdown for the site
fi
eld.
• Within the site
fi
eld, open the second dropdown for the siteMetadata
fi
eld (the blue one). This corresponds to
the siteMetadata object in your gatsby-con
fi
g.js
fi
le.

28. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Import the useStaticQuery function and the graphql tag from the Gatsby package.

29. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Call useStaticQuery and pass it the query you created in GraphiQL. Be sure to use the graphql tag so Gatsby
knows that the string you’re passing in is a GraphQL query. Store the return value from useStaticQuery in a
variable.

30. 4. Query for Data with GraphQL
Task: Use useStaticQuery to pull the site title into the Layout component
Now that you have a variable with the results of your query, you can render the title of your site in the JSX
for your Layout component.

31. 4. Query for Data with GraphQL
Task: Create a new blog page
Create a new
fi
le: src/pages/blog.js. De
fi
ne and export a new page component for your blog page.
Use your existing Layout component to add some basic structure.

32. 4. Query for Data with GraphQL
Task: Create a new blog page
Add a link to your new blog page to the navigation bar in your Layout component:

33. 4. Query for Data with GraphQL
Task: Create some MDX blog posts
• Create a new directory called blog at the top level of your project folder.
• Create three new
fi
les in the blog directory: one for each post.

34. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• Now that you have some posts saved to your local
fi
lesystem, it’s time to pull those
fi
les into the
Gatsby data layer. To do that, you’ll use a plugin called gatsby-source-
fi
lesystem.
• Con
fi
gure gatsby-source-
fi
lesystem in your gatsby-con
fi
g.js
fi
le. Since gatsby-source-
fi
lesystem requires some additional con
fi
guration options, you’ll use a con
fi
guration object instead
of a string. The code example below shows how to “source”
fi
les from your blog directory (in other
words, how to add them to the data layer).

35. 4. Query for Data with GraphQL
Task: Use GraphiQL to build the query
• Restart your local development server to make sure it picks up the con
fi
guration changes and
adds your
fi
les to the data layer.
• You can use the allFile
fi
eld to request data about multiple
fi
les at once. In GraphiQL, try exploring
the different
fi
elds within allFile to see what sorts of data you get back. Then build a query using
the allFile
fi
eld to get the name of all the
fi
les in your blog folder:

36. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
Import the graphql tag from the Gatsby package.

37. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
De
fi
ne and export your page query. Copy over the query you built in GraphiQL

38. 4. Query for Data with GraphQL
Task: Use a page query to pull the list of post
fi
lenames into your blog page
Add in the data prop to the function de
fi
nition.

39. 5. Transform Data to Use MDX

40. 4. Query for Data with GraphQL
Some example posts that you can use for inspiration:

41. 4. Query for Data with GraphQL
Render each post’s contents on the Blog page
Now that you have some MDX content inside your blog posts, it’s time set up
the gatsby-plugin-mdx transformer plugin.
The gatsby-plugin-mdx plugin provides some new tools for you to use in your site:
• The allMdx and mdx
fi
elds (for your GraphQL queries)
• An MDXRenderer component (for processing and displaying MDX content)

42. 4. Query for Data with GraphQL
Task: Install and con
fi
gure the MDX transformer plugin (and dependencies)
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

43. 4. Query for Data with GraphQL
Task: Update the Blog page query to use the allMdx
fi
eld instead of allFile

44. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page

45. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
Next, update the JSX for your Blog page to use the data
fi
elds of your response.
Start by rendering just the title and date for each post.

46. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
The
fi
nal step in this part of the Tutorial is to render the actual contents of your MDX blog posts.
To do that, you’ll need to use a component from gatsby-plugin-mdx called MDXRenderer. Start by
importing the component into your Blog page:

47. 4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
In the JSX for your Blog page, use the MDXRenderer component to wrap the contents of the body
fi
eld
for each node:

48. Gatsby pros

49. Gatsby cons
Don’t use Gatsby if:
• There will be a lot of content – for example, if it’s a large blog, generating a static website can
take up to 15 minutes. However, for those using Gatsby Cloud, there is a solution called
Incremental Builds which shortens build time up to 1000x, but it’s not free (cost starts from $19/
month)
• You need to update content a lot – because those updates won’t be visible instantly as in, for
example, WordPress
• It’s a corporate-size webshop – this point is similar to the
fi
rst one because the more content
you have, the longer the build time will be. Although the solution is Gatsby cloud,
fi
rst of all, you
have to pay for this, and second of all, any updates still won’t be visible right away

50. Thank you ✌
Sincerely yours 🤍