Gatsby JS 5 | Build a personal blog using gatsby.js 5

Bootstrap a Gatsby blog with the Gatsby CLI and NP, set up Visual Studio Code and Node.js, run the site locally at localhost 8000, and explore GraphQL queries.

Open and review the Gatsby project folder to see core files like readme.md and package.json, and understand how src, pages, and public organize components and the final build.

Install markdown-based blog dependencies, add a reading time plugin, style with tile components, and enable imports via Gatsby plugin areas imports and transformer remark for markdown and source file system.

configure Gatsby config to set site metadata and plugins, including image, styled-components, and source filesystem for content and images, then transform markdown files to HTML with transformer remark.

Learn how to set up absolute imports in a Gatsby JS 5 project by configuring aliases in gatsby-config.js for components and images, enabling cleaner cross-folder imports.

Markdown offers a lightweight plain-text format that converts to HTML, acting as a bridge between plain text and web content with symbols for headings, bold, and italic text on GitHub.

Create a markdown file with a YAML front matter block delimited by triple dashes for a Gatsby project. Define title, date, image, and slug to fuel the GraphQL data layer.

Explore GraphQL as a powerful query language for APIs, learn why it's used alongside REST, and see how to request exactly the data you need with hands-on examples.

Learn how to query data in Gatsby 5 with page queries for dynamic content like blog posts and use static queries for site metadata, clarifying when to apply each approach.

Explore the built-in GraphQL editor in Gatsby to query markdown data, using the documentation explorer and visual query builder to test and preview results before coding.

Set up global styles with styled-components CreateGlobalStyle, define color palettes and light/dark themes, and apply fonts across the Gatsby.js 5 blog.

Explore style components to write CSS inside JavaScript, creating components that have their own styles built in, with template literals, dynamic styles via props, and JSX-friendly usage.

Set up global styles with styled-components in a Gatsby app, exporting a global styles const, CSS variables like site-max-width, and font faces, driven by a theme for colors.

Clean up the Gatsby bootstrap app by deleting unused files in components and pages, including header, layout files, and page-2 tsx/ssl examples, then prepare to build the manual layout component.

Create a layout component in Gatsby by wiring a theme provider from styled components, applying global styles, and defaulting to a dark theme while supporting children content.

Create a custom hook use metadata query to fetch site metadata with GraphQL using Gatsby's use static query, extracting author, description, and title for reuse.

Create a useSiteConfigQueryHook in Gatsby JS 5 to load site config from markdown front matter, including logo and menu, powering a dynamic header for the personal blog.

Create a header component for a Gatsby JS 5 blog by wiring a logo and site title from a site config using Gatsby Link and a config query.

Style the header component with styled components by creating a wrapper (flex, center alignment, space-between, max-width 960px) and a logo (max-width 100px, scales to 250px) for mobile and desktop heights.

Create a Gatsby menu component using the Link component, mapped from site config items, rendered in the header with an active class for the current page, plus a theme toggle.

Style the menu component with styled components, defining nav and ul rules, hiding the menu on mobile, adding hover and active states, and applying a 768px media query for responsiveness.

Create a hamburger component in a Gatsby js 5 project by adding hamburger.js, wiring menuOpen and setMenuOpen with useState, and importing it into the header.

Style a responsive hamburger menu in a Gatsby JS 5 personal blog using styled components, building three lines with span and before/after, and a mobile toggle that becomes a cross.

Create a mobile menu component in Visual Studio Code, mapping site config menu items to links inside a ul, and integrate it into the header with a menu open prop.

Style the mobile menu with style components, override global styles to disable body scroll when the menu opens, and apply responsive, themed styles with transitions for navigation.

Build a Gatsby JS 5 home page with a top banner and blog post cards, structuring components in vscode, wiring index.js, and applying global styles for a 960px layout.

Discover using page queries with variables for pagination in Gatsby JS 5, test queries in the GraphQL playground, and build markdown posts with front matter and a reading time field.

Learn how to optimize images in Gatsby by resizing to 200x200, using the built-in image optimization, querying image data with GraphQL, and using formats like WebP and Avif.

Build the home banner structure in VS Code by importing Gatsby's link component, creating a background with custom hooks, and adding a sales title with a link button.

Create a home banner structure in Visual Studio Code with a Gatsby link, a background component, and a custom hook for the banner, h2 sales title, and a link button.

Create a background image component for the banner by destructuring image, alt, className, and slogan props, then implement styling with the style component and integrate it into the banner.

Create a background image component for the banner in a Gatsby.js 5 personal blog, defining image, alt, class name, and slogan props, and style the banner with styled-components.

Style the home banner component of a Gatsby blog using styled-components, configuring banner and text wrappers with layouts, colors from global styles, and a read more button with hover effects.

Build a blog post card component in Gatsby 5 by importing link and image helpers, using calendar and clock icons, and rendering slug, title, date, reading time, and excerpt.

Discover styling a Gatsby blog post card using styled components. Build a card wrapper with responsive image and text areas, and share icon styles for date and reading time.

Finish home page by mapping posts from edges, destructuring node to pass slug, title, date, reading time, extra, and image to blog post card, and fix reading time prop capitalization.

Implement light and dark mode in a Gatsby JS 5 blog using React context as a global state, wrapped by a mode provider via the Gatsby browser API.

Configure the Gatsby browser api by wrapping the root element with the mode provider to provide global context. Restart the app after changes to Gatsby config.

Create a theme button for a Gatsby blog, toggle dark mode with day/night icons, and style with styled components.

Implement a theme switch button in Gatsby js 5 blog by using a context to toggle dark mode and light mode, wiring mode button in header with the theme context.

Create slugs for posts and pages in a Gatsby blog by implementing slug code in gatsby-node.js, adjusting the base path to content for posts and pages.

Learn to create post and page templates in Gatsby 5, writing a manual GraphQL query to fetch published posts and pages by front matter, and generate dynamic slugs and templates.

Create page and post templates in Gatsby 5, reuse post template for pages, and wire a Gatsby image component with frontmatter, GraphQL, and dangerously set inner html to render markdown.

Dynamically create blog posts and pages in Gatsby JS 5 by querying content via GraphQL, filtering published posts, wiring slug-driven routes to templates, and adding reading time.

Learn to implement pagination in Gatsby 5 by generating archive pages with Node.js and calculating total pages from all posts for dynamic routes.

Develop the homepage template for the Gatsby JS 5 blog by updating the home page and GraphQL query with state, limit, and slug, using node.frontmatter.title or field.slug for the title.

Develop a page navigation component in Gatsby 5 to paginate a personal blog, using Gatsby link and left/right arrow icons, and manage the current page, total pages, and page context.

Style the Gatsby 5 blog page navigation with styled-components, using a centered flex wrapper, max width, and hover transitions; apply current page styling for page-to-page navigation.

Access the Gatsby JS course resources in this lecture and download them to use for building your personal blog.