Gatsby Frontend Website Development

Gatsby Frontend Website Development

Gatsby is a React framework for static site generation with GraphQL data layer. Specializes in content sites: blogs, documentation, corporate sites. Key feature — unified GraphQL API for getting data from any sources (files, CMS, databases, APIs).

GraphQL Data Layer

Gatsby collects data from all sources into a unified GraphQL layer:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: { path: './content/blog', name: 'blog' },
    },
    'gatsby-transformer-remark', // Markdown → HTML + frontmatter
    {
      resolve: 'gatsby-source-contentful',
      options: { spaceId: '...', accessToken: '...' },
    },
  ],
};

All data available via GraphQL:

# In Gatsby IDE (localhost:8000/___graphql)
query BlogPosts {
  allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
    nodes {
      frontmatter { title, date, slug }
      excerpt(pruneLength: 150)
    }
  }
}

Programmatic page creation

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query { allMarkdownRemark { nodes { frontmatter { slug } } } }
  `);

  result.data.allMarkdownRemark.nodes.forEach(node => {
    createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: path.resolve('./src/templates/BlogPost.tsx'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Page Query and Static Query

// Page component — PageQuery
import { graphql, type HeadFC } from 'gatsby';

export default function BlogPost({ data }) {
  const { markdownRemark } = data;
  return (
    <article dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />
  );
}

export const query = graphql`
  query BlogPost($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter { title, date }
    }
  }
`;

export const Head: HeadFC = ({ data }) => (
  <title>{data.markdownRemark.frontmatter.title}</title>
);

Gatsby Image

Automatic image optimization:

import { GatsbyImage, getImage, StaticImage } from 'gatsby-plugin-image';

// Dynamic image (from GraphQL)
function BlogCard({ post }) {
  const image = getImage(post.frontmatter.thumbnail);
  return <GatsbyImage image={image} alt={post.frontmatter.title} />;
}

// Static (optimized at build time)
<StaticImage src="../images/hero.jpg" alt="Hero" width={1200} height={630} />

Plugin ecosystem

• gatsby-source-contentful/strapi/wordpress/shopify — data sources
• gatsby-plugin-mdx — MDX (Markdown + React components)
• gatsby-plugin-sitemap — auto-generate Sitemap
• gatsby-plugin-robots-txt — robots.txt
• gatsby-plugin-offline — Service Worker for PWA

Gatsby vs Astro in 2024

Gatsby lost positions to Astro and Next.js for static sites. Gatsby justified if:

• Project already on Gatsby (migration = expenses)
• Need powerful GraphQL data layer for aggregating many sources
• Team knows Gatsby

For new content site project — Astro (less JS) or Next.js (bigger ecosystem).

Deployment

gatsby build generates static site. Deploy to Netlify, Vercel, GitHub Pages, any CDN. Gatsby Cloud (Netlify after acquisition) — optimized incremental builds.

Timeline

Content site on Gatsby (Markdown blog, 10–30 pages): 1–2 weeks. With complex data layer (several CMS sources), custom GraphQL schemas: 2–4 weeks.