gatsby-plugin-page-creator

What is gatsby-plugin-page-creator?

The gatsby-plugin-page-creator package is a Gatsby plugin that automatically creates pages from React components in specified directories. This helps streamline the process of adding new pages to a Gatsby site by eliminating the need to manually configure each page in the gatsby-node.js file.

What are gatsby-plugin-page-creator's main functionalities?

Automatic Page Creation

Automatically creates pages from React components located in the specified directory (`src/pages` in this example).

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
  ],
};

Custom Path Configuration

Allows you to specify a custom directory (`src/custom-pages` in this example) from which to create pages.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/custom-pages`,
      },
    },
  ],
};

File Extension Support

Supports multiple file extensions for page components, such as `.js`, `.jsx`, `.ts`, and `.tsx`.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
        extensions: [`.js`, `.jsx`, `.ts`, `.tsx`],
      },
    },
  ],
};

Other packages similar to gatsby-plugin-page-creator

gatsby-plugin-mdx

gatsby-plugin-mdx is a plugin for using MDX (Markdown with JSX) in Gatsby. It allows you to create pages from MDX files, which can include React components. This plugin is useful if you prefer writing content in Markdown but still want to leverage React components within your pages.

gatsby-source-filesystem

gatsby-source-filesystem is a plugin that allows you to source data into your Gatsby application from the local filesystem. While it doesn't create pages directly, it is often used in conjunction with other plugins like gatsby-transformer-remark or gatsby-plugin-mdx to create pages from Markdown or MDX files.

gatsby-plugin-create-client-paths

gatsby-plugin-create-client-paths is a plugin that allows you to create client-only routes in your Gatsby application. This is useful for creating dynamic routes that are not known at build time, such as user profiles or other personalized content.

README

gatsby-plugin-page-creator

Gatsby plugin that automatically creates pages from React components in specified directories. Gatsby includes this plugin automatically in all sites for creating pages from components in src/pages. You can also leverage the File System Route API to programmatically create pages from your data.

You may include another instance of this plugin if you'd like to create additional "pages" directories or want to override the default usage.

With this plugin, any file that lives in the specified pages folder (e.g. the default src/pages) or subfolders will be expected to export a React Component to generate a Page. The following files are automatically excluded:

• template-*
• __tests__/*
• *.test.jsx?
• *.spec.jsx?
• *.d.tsx?
• *.json
• *.yaml
• _*
• .*

To exclude custom patterns, see Ignoring Specific Files

Install

npm install gatsby-plugin-page-creator

How to use

Add the plugin to your gatsby-config.js:

// gatsby-config.js

module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to create pages from React components in different directories.
    //
    // The following sets up the pattern of having multiple
    // "pages" directories in your project
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/account/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/settings/pages`,
      },
    },
    // You can also overwrite the default behavior for src/pages
    // This changes the page-creator instance used by Gatsby
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
        ignore: [`foo-bar.js`],
      },
    },
  ],
}

Options

The plugin supports options to ignore files and to pass options to the slugify instance that is used in the File System Route API to create slugs.

Option	Type	Description	Required
path	string	Any file that lives inside this directory will be expected to export a React component to generate a page	true
ignore	IPathIgnoreOptions ∣ string ∣ Array<string> ∣ null	Ignore certain files inside the directory specified with path	false
slugify	ISlugifyOptions	Pass options to the slugify instance that is used inside the File System Route API to generate the slug	false

Ignoring Specific Files

Shorthand

The following example will disable the /blog index page:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/indexes/pages`,
        ignore: [`blog.(js|ts)?(x)`],
        // See pattern syntax recognized by micromatch
        // https://www.npmjs.com/package/micromatch#matching-features
      },
    },
  ],
}

NOTE: The above code snippet will only stop the creation of the /blog page, which is defined as a React component. This plugin does not affect programmatically generated pages from the createPages API.

Ignore Options

The following example will ignore pages using case-insensitive matching:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/examples/pages`,
        ignore: {
          // Example: Ignore `file.example.js`, `dir/s/file.example.tsx`
          patterns: [`**/*.example.(js|ts)?(x)`],
          // Example: Match both `file.example.js` and `file.EXAMPLE.js`
          options: { nocase: true },
          // See all available micromatch options
          // https://www.npmjs.com/package/micromatch#optionsnocase
        },
      },
    },
  ],
}