Великолепный Gatsby.js | Odessa Frontend Meetup #19
0 likes137 views
{pros=Advantages include speed, SEO benefits, and ease of use with static pages., highlights=The document emphasizes the features, setup, and use of Gatsby.js as a static site generator, ideal for building SEO-friendly static websites using React and GraphQL., cons=Disadvantages include long build times for large blogs and challenges in updating content instantly.}
Великолепный Gatsby.js | Odessa Frontend Meetup #19
- 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 🤍