Skip to content
>_devvkit
$devvkit learn --librarie gatsby-guide

Gatsby Guide

[react][ssg][graphql][gatsby]
JavaScript / TypeScript
Install
npm init gatsby
# or: npx gatsby new my-app https://github.com/gatsbyjs/gatsby-starter-blog

Gatsby compiles React components to static HTML and then hydrates into a full React app on the client. Its GraphQL data layer aggregates content from any source (Markdown, CMS, APIs, databases).

Gatsby's plugin ecosystem is one of its strongest features — over 2,500 plugins for images (gatsby-plugin-image), SEO, PWA, sitemaps, RSS, and CMS integrations (Contentful, WordPress, Drupal).

Gatsby now supports Deferred Static Generation (DSG) and Server-Side Rendering (SSR) alongside traditional SSG. Gatsby 5 uses Slice API for shared layout components.

Setup

Create project— Scaffold Gatsby site.
npx gatsby new my-site
cd my-site
gatsby develop

Pages

Page component— Create a page.
// src/pages/about.tsx
import * as React from 'react'
import { graphql, PageProps } from 'gatsby'

const AboutPage: React.FC<PageProps> = ({ data }) => {
  return <main><h1>{data.site.siteMetadata.title}</h1></main>
}

export default AboutPage

export const query = graphql`
  query AboutQuery {
    site { siteMetadata { title } }
  }
`
File-system routing— Pages from files.
// src/pages/index.tsx       → /
// src/pages/blog.tsx          → /blog
// src/pages/blog/{mdx.slug}.tsx → /blog/hello-world
// src/pages/[...].tsx          → catch-all

GraphQL

GraphQL query— Fetch data in pages.
export const query = graphql`
  query {
    allMdx(sort: { frontmatter: { date: DESC } }) {
      nodes {
        id
        frontmatter {
          title
          slug
          date(formatString: "MMMM D, YYYY")
        }
      }
    }
  }
`

Plugins

gatsby-config— Enable plugins.
module.exports = {
  siteMetadata: { title: 'My Blog', siteUrl: 'https://example.com' },
  plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: { name: 'blog', path: `${__dirname}/content/blog` },
    },
  ],
}

Images

Gatsby Image— Optimized images.
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

const image = getImage(data.mdx.frontmatter.heroImage)
return <GatsbyImage image={image} alt="Hero" />

Build

Build & deploy— Generate static output.
gatsby build
# Output in /public/
# Deploy to Netlify, Vercel, Cloudflare Pages, or S3