Socket
Socket
Sign inDemoInstall

gatsby

Package Overview
Dependencies
Maintainers
13
Versions
2974
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby

Blazing fast modern site generator for React


Version published
Weekly downloads
269K
decreased by-4.42%
Maintainers
13
Weekly downloads
 
Created

What is gatsby?

Gatsby is a React-based open-source framework for creating websites and apps. It allows developers to build fast, secure, and powerful web experiences using modern web technologies. Gatsby leverages GraphQL for data management and offers a rich plugin ecosystem to extend its functionality.

What are gatsby's main functionalities?

Static Site Generation

Gatsby can generate static pages from data sources like Markdown files. This code sample demonstrates how to create pages dynamically using GraphQL to query Markdown files and the createPage API to generate pages.

const path = require('path');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: path.resolve(`src/templates/blog-post.js`),
      context: {},
    });
  });
};

GraphQL Data Layer

Gatsby uses GraphQL to manage data. This example shows how to query site metadata using GraphQL and display it in a React component.

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

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

const IndexPage = ({ data }) => (
  <div>
    <h1>{data.site.siteMetadata.title}</h1>
  </div>
);

export default IndexPage;

Plugin Ecosystem

Gatsby has a rich plugin ecosystem that allows developers to extend its functionality. This example shows how to configure plugins for handling React Helmet, sourcing files from the filesystem, and transforming Markdown files.

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,
  ],
};

Other packages similar to gatsby

Keywords

FAQs

Package last updated on 12 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc