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.

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.

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.

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 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.

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.

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.

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.

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.

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

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.

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.

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 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.

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.

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.

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.

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 pass props to customize search engine optimization for each page, using site metadata with defaults and conditional fallbacks for home, about, and blog pages.

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.