SlideShare a Scribd company logo
Why do front-end


developers 💜 Gatsby.js
Hello,
my name is Katya and I’m front-end dev in Boosta.
Why do front-end


developers 💜 Gatsby.js
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
Static Site Generatorors
• Generates static HTML pages using a combo of templates, components & data.
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
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
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
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)
How Gatsby Works
Make 💜, not 💩
Make 💜, not 💩
in 5 baby steps
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
1. Create and Deploy Your First Gatsby Site
2. Use and Style React Components
Create a page component
Task: Update the home page content
localhost:8000
2. Use and Style React Components
Task: Create a new page component for an About page
localhost:8000/about
2. Use and Style React Components
Use the <Link> component
Task: On the Home page, import the Link component from the Gatsby package
2. Use and Style React Components
Create a reusable layout component
Task: Create a new
fi
le called src/components/layout.js
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
2. Use and Style React Components
Style components with CSS Modules
Task: Create a new
fi
le: src/components/layout.module.css
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:
3. Add Features with Plugins
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
3. Add Features with Plugins
Task: Use gatsby-plugin-image to add a static image to your home page
4. Query for Data with GraphQL
4. Query for Data with GraphQL
Use GraphiQL to explore the data layer and write GraphQL queries
http://localhost:8000/___graphql
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.
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.
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.
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. 
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.
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:
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.
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).
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:
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.
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
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.
5. Transform Data to Use MDX
4. Query for Data with GraphQL
Some example posts that you can use for inspiration:
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)
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
4. Query for Data with GraphQL
Task: Update the Blog page query to use the allMdx 
fi
eld instead of allFile
4. Query for Data with GraphQL
Task: Use the MDXRenderer component to render your post’s contents in your Blog page
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.
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:
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:
Gatsby pros
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
Thank you ✌
Sincerely yours 🤍

More Related Content

Similar to Великолепный Gatsby.js | Odessa Frontend Meetup #19

Using the WordPress REST API and Gatsby.js
Using the WordPress REST API and Gatsby.jsUsing the WordPress REST API and Gatsby.js
Using the WordPress REST API and Gatsby.js
Indigo Tree Digital
 
Harness The Power Of ACF For Gatsby and WordPress
Harness The Power Of ACF For Gatsby and WordPressHarness The Power Of ACF For Gatsby and WordPress
Harness The Power Of ACF For Gatsby and WordPress
Imran Sayed
 
Build Fast WordPress Site With Gatsby
Build Fast WordPress Site With GatsbyBuild Fast WordPress Site With Gatsby
Build Fast WordPress Site With Gatsby
Imran Sayed
 
04 asp.net session05
04 asp.net session0504 asp.net session05
04 asp.net session05
Mani Chaubey
 
Top 8 react static site generators for 2020
Top 8 react static site generators for 2020Top 8 react static site generators for 2020
Top 8 react static site generators for 2020
Katy Slemon
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
Derek Jacoby
 
Top React Static Site Generators for 2022.pdf
Top React Static Site Generators for 2022.pdfTop React Static Site Generators for 2022.pdf
Top React Static Site Generators for 2022.pdf
Katy Slemon
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
Tobias Meixner
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
zonathen
 
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
rtCamp
 
Pre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing timePre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing time
Jun-ichi Sakamoto
 
Meetup gitbook
Meetup gitbookMeetup gitbook
Meetup gitbook
Rebecca Peltz
 
04 asp.net session05
04 asp.net session0504 asp.net session05
04 asp.net session05
Vivek chan
 
Contentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshopContentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshop
Ivo Lukac
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
CIS363A
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
jkkjhdy798iyi
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
CIS363A
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
CIS363A
 
Gatsby intro
Gatsby introGatsby intro
Gatsby intro
Ben McCormick
 
Page object from the ground up by Joe Beale
Page object from the ground up by Joe BealePage object from the ground up by Joe Beale
Page object from the ground up by Joe Beale
QA or the Highway
 

Similar to Великолепный Gatsby.js | Odessa Frontend Meetup #19 (20)

Using the WordPress REST API and Gatsby.js
Using the WordPress REST API and Gatsby.jsUsing the WordPress REST API and Gatsby.js
Using the WordPress REST API and Gatsby.js
 
Harness The Power Of ACF For Gatsby and WordPress
Harness The Power Of ACF For Gatsby and WordPressHarness The Power Of ACF For Gatsby and WordPress
Harness The Power Of ACF For Gatsby and WordPress
 
Build Fast WordPress Site With Gatsby
Build Fast WordPress Site With GatsbyBuild Fast WordPress Site With Gatsby
Build Fast WordPress Site With Gatsby
 
04 asp.net session05
04 asp.net session0504 asp.net session05
04 asp.net session05
 
Top 8 react static site generators for 2020
Top 8 react static site generators for 2020Top 8 react static site generators for 2020
Top 8 react static site generators for 2020
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Top React Static Site Generators for 2022.pdf
Top React Static Site Generators for 2022.pdfTop React Static Site Generators for 2022.pdf
Top React Static Site Generators for 2022.pdf
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
 
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
 
Pre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing timePre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing time
 
Meetup gitbook
Meetup gitbookMeetup gitbook
Meetup gitbook
 
04 asp.net session05
04 asp.net session0504 asp.net session05
04 asp.net session05
 
Contentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshopContentful with Netgen Layouts workshop
Contentful with Netgen Layouts workshop
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
 
Cis363 a all ilabs devry university
Cis363 a all ilabs devry universityCis363 a all ilabs devry university
Cis363 a all ilabs devry university
 
Cis363 all i labs devry university
Cis363 all i labs devry universityCis363 all i labs devry university
Cis363 all i labs devry university
 
Gatsby intro
Gatsby introGatsby intro
Gatsby intro
 
Page object from the ground up by Joe Beale
Page object from the ground up by Joe BealePage object from the ground up by Joe Beale
Page object from the ground up by Joe Beale
 

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
OdessaFrontend
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
OdessaFrontend
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
OdessaFrontend
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
OdessaFrontend
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
OdessaFrontend
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
OdessaFrontend
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
OdessaFrontend
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OdessaFrontend
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
OdessaFrontend
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
OdessaFrontend
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
OdessaFrontend
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
OdessaFrontend
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
OdessaFrontend
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
OdessaFrontend
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
OdessaFrontend
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
OdessaFrontend
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
OdessaFrontend
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
OdessaFrontend
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
OdessaFrontend
 
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
OdessaFrontend
 

More from OdessaFrontend (20)

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
 
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
Эффективность с большой буквы Э… или любой другой | Odessa Frontend Meetup #13
 

Recently uploaded

zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 

Recently uploaded (20)

zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 

Великолепный Gatsby.js | Odessa Frontend Meetup #19

  • 2. Hello, my name is Katya and I’m front-end dev in Boosta.
  • 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)
  • 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:
  • 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