Gatsby JS Developer's Guide - Important Parts & Blog App

Explore how to create pages, navigate between them, and manage components in a Gatsby JS app, and understand the folder structure that assigns roles for header, layout, and error pages.

Set up the Gatsby development environment, verify node, install Gatsby CLI, initialize a new Gatsby blog project, and run the local server to view it at localhost:8000.

Explore the Gatsby project folder structure, including the dot cache and public folders. Learn how pages inside the pages directory map to URLs by building React components.

Create a reusable header component in the components folder as a simple React function, export it, and import into pages like index or about, wrapping with a single root element.

Learn to create internal links in Gatsby with the Link component to navigate home, about, and blocks pages, and set up a reusable header and layout for a blog app.

Create a reusable layout component that wraps all pages, consistently displaying a header and content across the blog app. Pass children as props to display page content.

Explore how Gatsby renders pages with a layout component, inspect the error page, and test links to non-existent routes. Learn how client-side navigation updates content without full page reload.

Learn styling improvements, create pages from a template component, and generate posts and detail pages in Gatsby by fetching data from a placeholder API.

Explore how Gatsby builds static HTML pages from React components and data sources, outputs the public folder, and uses page context to render routes like index, about, and blogs.

Learn to implement global and component-scoped styling in a Gatsby app by creating a styles folder, defining a html background color, and wiring these styles through a custom gatsby-browser.js entry.

Explore modular styling to restrict styles to components by prefixing class names, importing styles as modules, and choosing between named or wildcard imports for precise control.

Learn how to create pages in Gatsby at build time by exporting a createPage function, wiring a post template from templates, and passing context data to render dynamic pages.

Learn how to pass data to a Gatsby page by fetching data and injecting it into page context at build time, using createPage and the graphical approach.

Iterate over posts with map, display each post as a link using its title, pass data to a detail page via navigation and page context, and assign unique keys.

Create a post detail page in Gatsby by building a post template, iterating over all posts, and generating individual pages with dynamic paths based on post IDs.

Explore graphics in the Gatsby graphical explorer, learn to build queries for the all data collection from a fake API, fetch post data, and create nodes for the blog app.

Explore how to use GraphQL with Gatsby to fetch and pass data to pages, including site metadata, titles, and content, by building and executing queries in development.

Define and expose a custom GraphQL type for posts in Gatsby, using resolvers and schema customization to fetch title and body data via GraphQL explorer during development.

Define and test various post fields in Gatsby's blog app, assigning strings, numbers, booleans, floats, and id-type unique identifiers to build a robust GraphQL schema.

Learn non nullable and array types in the Gatsby blog app by using exclamation marks to enforce required fields and brackets to define arrays, triggering errors when data is missing.

Define nested fields and custom content types, then query content text and title using GraphQL to explore how multi-level data is structured in Gatsby.

Explore how to define and use custom arguments for filtering and sorting posts in a Gatsby blog app, including a limit parameter and title-based filters.

Explore building a complex title-based filter in a Gatsby blog app, using nested filter structures, input definitions, and equal or in operators, while handling undefined values.

Fetch posts in resolve demonstrates retrieving post data from a fake placeholder API using axios in the resolver. Render filtered posts on a Gatsby blog page via a resolve function.

Learn how to fetch posts using GraphQL in a Gatsby project, rendering post titles and bodies on a test page while exploring data queries and Gatsby's data layer.

Create and model a blog post as a Gatsby node by defining a post type, generating content digests, and wiring data with source plugins and edges within the node-centered graph.

Learn to convert posts into notes with a create note API, fetch via edges, and render title and body on a testing page in Gatsby.

Create a Gatsby blog by sourcing content from markdown files with front matter, render posts on index and blog pages, and use transformer and source plugins to query all markdownRemark.

Explore how to set up Gatsby's source filesystem plugin to load content from a root content folder, create markdown blocks, and generate blog posts with markdown syntax.

Identify and fetch blog data from the content folder using a Gatsby source plugin, then display a blogs page UI listing each file’s relative path, extension, and birth time.

Discover how transformer plugins and source plugins enhance Gatsby's data pipeline by transforming file-system content into nodes and exposing file metadata through front matter for richer blog pages.

Create a markdown page in a Gatsby app by transforming source into markdown nodes, querying the data, and rendering posts with titles, dates, and excerpts in a layout.

Derive readable, unique slugs from blog post titles, enable links to detailed blog pages, and implement slug creation and storage using file-path helpers in Gatsby.

Create blog pages in Gatsby by building a reusable template and using createPages to generate a page for each blog post from markdown remarks via GraphQL.

Learn to build a blog detail page in Gatsby using a single GraphQL query, leveraging slug-based data and markdown remark to render blog HTML content.

Render blog detail html in Gatsby by using front matter and markdown remark data to convert content into actual html elements with dangerouslySetInnerHTML.

Refine the blog listing and detail navigation by wiring the slug and related fields from front matter, adjust GraphQL queries, and validate through recompiles for the Markdown blog posts.

Remove obsolete files and clean up Gatsby templates, focusing on markdown blog posts, updating the index to list posts and link to detail pages.

Revamp the Gatsby js app by removing obsolete files and integrating Bulmer framework, and implement a new layout with a block listing and a block detailed page that renders markdown.

Install and import bulma in the blog app, explore bulma's 12-column grid, and apply its components to structure and style the layout as shown.

Introduce the Bulba framework in a Gatsby blog app, implement header and footer, adjust layout with a responsive container, and reference the provided resources for future layout and blog posts.

Build a featured blog component for the index page to display the top posts with title and subtitle, using a 12-column grid for the first two items.

Build a blog listing component in a Gatsby app that renders posts from the content and blogs folders, using front matter titles, subtitles, and dates in a multi-column layout.

Practice sorting blog posts by front matter fields such as date and writing, and limit results with pagination on the index and blog pages.

Learn to enhance Gatsby blog posts with markdown, adding code blocks with syntax highlighting and language tags, and improve templates with remark plugins for quotes.

Fix blog styling by overriding conflicting Prism and Bulmer framework class names, adjust code formatting, and explore Prism themes to customize the blog post appearance.

Learn to build dynamic blog pages in Gatsby using the filesystem route API, creating pages from notes with templates and context, and fetching data via markdown remark.

Understand how Gatsby's filesystem interface structures blog content, using markdown front matter, a content folder, and parent file relationships to generate blog pages in a blog app.

Learn to implement a pagination feature in Gatsby that displays three blog posts per page and enables previous and next navigation, generating pages from a template.

Learn to implement pagination for a blog app by setting items per page, computing total pages, and rendering pages with a template and context.

Implement pagination by using limit and skip to fetch items per page, demonstrate first and second page behavior, and sort results by date descending in a blog listing.

Implement pagination for blog posts in Gatsby by wiring a layout with blog listing component and previous/next links, compute current page, and treat the first page as empty for navigation.

Implement pagination by tracking current and total pages and conditionally rendering previous and next links. Use first/last page checks and optional disablement or hiding of buttons to prevent invalid navigation.

fixes for button navigation in a blog app: disable previous on first page, address key prop and id requirements, and refine pagination and search functionality for a smoother user experience.

Learn to implement a search feature in the Gatsby blog app using a search input and a third-party library to build a searchable index for blog posts.

Create a search container and search content module to enable a Gatsby blog's live search, wiring it to the blog list and updating results as users type titles or subtitles.

Explore building a search index in a Gatsby blog app, using JavaScript to search blog posts from a JSON-based index of titles and subtitles.

Learn to implement a lightweight search engine for a Gatsby blog app by building a search index with title and subtitle, indexing documents, and querying results.

Explore additional search options in the Gatsby blog app, including case sensitivity with sanitiser, index strategies like prefix indexes, and an introduction to term frequency and inverse document frequency.

Bind the user input to state and engine values, handle on-change events, and manage search results to show live feedback from a Gatsby app component.

Improve the blog app search by fixing warnings, memoizing the search function with useCallback, and stabilizing useEffect dependencies to avoid infinite loops and rebuilds.

Learn to wire a search input to the search engine, pass the input value, and read results in a Gatsby blog app. Explore preparing navigation and links for search results.

Programmatically navigate to a blog post page by importing navigate from Gatsby, calling navigate with a page path on click, then save and verify the navigation works.

Pass a JSON search index to the search container in Gatsby using onCreatePage and page context. Finalize the search functionality for the blog app.

Add the search index dependency by passing the updated search index as a prop to the search component and refresh the browser to remove the warning.

Section introduces seo improvements by implementing helmet-based meta tags for each page, using React Helmet, covering title, description, og and Twitter cards, with page-specific methods.

Learn how search engine optimization drives discoverability by explaining how search engines crawl, index, and rank web pages, and how to optimize with meta information, headers, and google search console.

Enable server side seo by using react helmet with a Gatsby plugin to inject head metadata on the server, ensuring production builds render html correctly.

Learn to fetch site metadata with Gatsby's useStaticQuery, and apply it to the SEO component to set the page title and description as meta tags for better search engine optimization.

Learn to pass props to customize search engine optimization for each page, using site metadata with defaults and conditional fallbacks for home, about, and blog pages.

Explore open graph meta tags and twitter cards to define title, description, and image for blog pages. Learn to customize and test these tags for social previews across platforms.

This lecture guides implementing open graph tags for blog detail and listing pages in a Gatsby app, defining title and description fields and ensuring accurate subtitles for SEO.