Convert Figma logo to code with AI

gatsbyjs logogatsby

The best React-based framework with performance, scalability and security built in.

55,199
10,327
55,199
376

Top Related Projects

124,777

The React Framework

Set up a modern web app by running one command.

78,194

Cybernetically enhanced web apps

54,014

The Intuitive Vue Framework.

22,485

đź“ť Minimalistic Vue-powered static site generator

74,645

The world’s fastest framework for building websites.

Quick Overview

Gatsby is a modern web framework based on React that helps developers build blazing-fast websites and apps. It combines the best parts of React, GraphQL, and webpack into a powerful static site generator that allows for easy content management and seamless integration with various data sources.

Pros

  • Excellent performance due to static site generation and intelligent code splitting
  • Rich plugin ecosystem for easy integration with various data sources and third-party services
  • Built-in GraphQL support for efficient data querying and management
  • Strong developer experience with hot reloading and detailed documentation

Cons

  • Steep learning curve for developers new to React or GraphQL
  • Build times can be slow for large sites with many pages
  • Some limitations when dealing with highly dynamic content
  • Occasional compatibility issues with certain plugins or data sources

Code Examples

  1. Creating a new Gatsby page:
import React from "react"

const AboutPage = () => (
  <main>
    <h1>About Us</h1>
    <p>Welcome to our Gatsby site!</p>
  </main>
)

export default AboutPage
  1. Querying data with GraphQL:
import React from "react"
import { graphql, useStaticQuery } from "gatsby"

const BlogPosts = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              date
            }
            excerpt
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <article key={node.id}>
          <h2>{node.frontmatter.title}</h2>
          <p>{node.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

export default BlogPosts
  1. Using Gatsby Image for optimized images:
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const OptimizedImage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "example.jpg" }) {
        childImageSharp {
          gatsbyImageData(width: 600, placeholder: BLURRED)
        }
      }
    }
  `)

  const image = getImage(data.file)

  return <GatsbyImage image={image} alt="Example" />
}

export default OptimizedImage

Getting Started

To start a new Gatsby project, follow these steps:

  1. Install the Gatsby CLI:
npm install -g gatsby-cli
  1. Create a new Gatsby site:
gatsby new my-gatsby-site
  1. Navigate to the project directory:
cd my-gatsby-site
  1. Start the development server:
gatsby develop

Your new Gatsby site will be available at http://localhost:8000.

Competitor Comparisons

124,777

The React Framework

Pros of Next.js

  • Server-side rendering (SSR) out of the box, providing better performance and SEO
  • Automatic code splitting for faster page loads
  • Built-in API routes for easy backend integration

Cons of Next.js

  • Steeper learning curve, especially for developers new to React
  • Less extensive plugin ecosystem compared to Gatsby
  • More complex setup for static site generation

Code Comparison

Next.js:

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

Gatsby:

// src/pages/index.js
import React from "react"

export default function Home() {
  return <h1>Welcome to Gatsby!</h1>
}

Key Differences

  • Next.js uses a pages directory for routing, while Gatsby uses src/pages
  • Next.js supports both static and dynamic routes, whereas Gatsby focuses on static site generation
  • Gatsby requires GraphQL for data fetching, while Next.js allows more flexibility in data sourcing

Both frameworks are powerful tools for building React applications, with Next.js excelling in server-side rendering and Gatsby shining in static site generation. The choice between them often depends on specific project requirements and developer preferences.

Set up a modern web app by running one command.

Pros of Create React App

  • Simpler setup and configuration for beginners
  • Faster initial development process
  • Easier to eject and customize webpack configuration

Cons of Create React App

  • Limited built-in performance optimizations
  • Less flexibility for complex, data-driven websites
  • No built-in static site generation capabilities

Code Comparison

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Gatsby:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return <Link to="/about/">About</Link>;
}

Create React App focuses on a straightforward React setup, while Gatsby provides additional features like static site generation and optimized routing. Create React App is ideal for single-page applications and prototypes, whereas Gatsby excels in building performant, content-driven websites.

Create React App offers a more familiar React development experience, making it easier for beginners to get started. However, Gatsby's plugin ecosystem and built-in performance optimizations make it more suitable for complex, production-ready websites.

Both tools have their strengths, and the choice between them depends on the specific project requirements and developer preferences.

78,194

Cybernetically enhanced web apps

Pros of Svelte

  • Smaller bundle sizes and faster runtime performance
  • Simpler learning curve with less boilerplate code
  • True reactivity without virtual DOM

Cons of Svelte

  • Smaller ecosystem and community compared to Gatsby
  • Fewer built-in features for static site generation
  • Less mature tooling and plugin ecosystem

Code Comparison

Svelte component:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

Gatsby component:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
};

export default Counter;

Svelte's syntax is more concise and doesn't require explicit state management imports. Gatsby (React) uses hooks and JSX, which may be more familiar to some developers but requires more setup. Svelte's reactivity is built-in, while Gatsby relies on React's state management. Both approaches achieve similar results, but Svelte's code is generally more compact and straightforward.

54,014

The Intuitive Vue Framework.

Pros of Nuxt

  • Easier server-side rendering (SSR) setup out of the box
  • Better integration with Vue.js ecosystem
  • More flexible routing system with automatic code splitting

Cons of Nuxt

  • Smaller community and plugin ecosystem compared to Gatsby
  • Less optimized for static site generation (SSG)
  • Steeper learning curve for developers new to Vue.js

Code Comparison

Nuxt routing:

// pages/index.vue
export default {
  asyncData({ params }) {
    // Fetch data here
  }
}

Gatsby routing:

// src/pages/index.js
import React from "react"
export default function Home() {
  return <div>Hello world!</div>
}

Nuxt focuses on Vue.js components and file-based routing, while Gatsby uses React components and GraphQL for data fetching. Nuxt's routing is more intuitive for Vue developers, but Gatsby's GraphQL approach offers more flexibility for complex data structures.

Both frameworks provide excellent developer experiences, but cater to different use cases. Nuxt excels in server-side rendering and Vue.js integration, while Gatsby shines in static site generation and React-based development. The choice between them often depends on the project requirements and the development team's expertise.

22,485

đź“ť Minimalistic Vue-powered static site generator

Pros of VuePress

  • Simpler learning curve, especially for Vue.js developers
  • Faster initial setup and configuration
  • Built-in markdown support with Vue components

Cons of VuePress

  • Less flexible for complex, dynamic websites
  • Smaller ecosystem and plugin availability
  • Limited theming options compared to Gatsby

Code Comparison

VuePress configuration:

module.exports = {
  title: 'My Site',
  description: 'A VuePress site',
  themeConfig: {
    nav: [{ text: 'Home', link: '/' }]
  }
}

Gatsby configuration:

module.exports = {
  siteMetadata: {
    title: 'My Site',
    description: 'A Gatsby site',
  },
  plugins: ['gatsby-plugin-react-helmet']
}

Summary

VuePress is ideal for quickly creating documentation sites with minimal configuration, leveraging Vue.js ecosystem. It excels in simplicity and ease of use, particularly for Vue developers. However, it may fall short for complex, dynamic websites due to its more limited ecosystem and flexibility compared to Gatsby.

Gatsby, built on React, offers greater flexibility and a larger ecosystem, making it suitable for a wider range of projects. It provides more advanced features and plugins but comes with a steeper learning curve and potentially more complex setup process.

Choose VuePress for straightforward documentation sites, especially if familiar with Vue.js. Opt for Gatsby for more complex, dynamic websites or if you prefer React and need extensive customization options.

74,645

The world’s fastest framework for building websites.

Pros of Hugo

  • Faster build times, especially for large sites
  • Simpler setup and configuration
  • Lower resource requirements

Cons of Hugo

  • Less extensive plugin ecosystem
  • More limited data fetching capabilities
  • Steeper learning curve for complex customizations

Code Comparison

Hugo (Go template):

{{ range .Pages }}
  <h2>{{ .Title }}</h2>
  {{ .Content }}
{{ end }}

Gatsby (React/GraphQL):

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
          }
          html
        }
      }
    }
  }
`

const IndexPage = ({ data }) => (
  <>
    {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key={node.id}>
        <h2>{node.frontmatter.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: node.html }} />
      </div>
    ))}
  </>
)

Hugo uses a simpler templating system, while Gatsby leverages React components and GraphQL for more complex data querying and manipulation. Hugo's approach is more straightforward for basic sites, while Gatsby offers more flexibility for dynamic content and advanced features.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Gatsby

Gatsby

The future of web development is here.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

Gatsby is released under the MIT license. Current CircleCI build status. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @GatsbyJS

Quickstart · Tutorial · Plugins · Starters · Showcase · Contribute
Support: Twitter, Discussions & Discord

Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.

  • Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

  • Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.

  • Choose your Rendering Options. You can choose alternative rendering options, namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.

  • Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.

  • Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.

  • Host at Scale for Pennies. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.

  • Use Gatsby's Centralized Data Layer Everywhere. With Gatsby's Valhalla Content Hub you can bring Gatsby's data layer to any project. Making it accessible via a unified GraphQL API for building content sites, eCommerce platforms, and both native and web applications.

Learn how to use Gatsby for your next project.

🚀 Ship your first Gatsby site in 5 Minutes

Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.

Deploy to Gatsby Cloud

At the end of this process, you'll have

  1. a site working on Gatsby Cloud
  2. a new repository that is linked to that new site
  3. as you push changes to your new repository, Gatsby Cloud will automatically rebuild and redeploy your site!

💻 Get started with Gatsby locally in 5 Minutes

You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:

  1. Initialize a new project.

    npm init gatsby
    

    Give it the name "My Gatsby Site".

  2. Start the site in develop mode.

    Next, move into your new site’s directory and start it up:

    cd my-gatsby-site/
    npm run develop
    
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000. Open the my-gatsby-site directory in your code editor of choice and edit src/pages/index.js. Save your changes, and the browser will update in real time!

At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.

🎓 Learning Gatsby

Full documentation for Gatsby lives on the website.

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples head to our documentation. In particular, check out the “How-to Guides”, “Reference”, and “Conceptual Guides” sections in the sidebar.

We welcome suggestions for improving our docs. See the “how to contribute” documentation for more details.

Start Learning Gatsby: Follow the Tutorial · Read the Docs

🚢 Release Notes

Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.

Also, read our documentation on version support to understand our plans for each version of Gatsby.

💼 Migration Guides

Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v5 to your site without starting from scratch!

❗ Code of Conduct

Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community!

Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

A note on how this repository is organized

This repository is a monorepo managed using Lerna. This means there are multiple packages managed in this codebase, even though we publish them to NPM as separate packages.

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks go out to all our many contributors creating plugins, starters, videos, and blog posts. And a special appreciation for our community members helping with issues and PRs, or answering questions on Discord and GitHub Discussions.

A big part of what makes Gatsby great is each and every one of you in the community. Your contributions enrich the Gatsby experience and make it better every day.

NPM DownloadsLast 30 Days