We are adding support for Nextjs. Get in touch on Twitter to learn more.

Configuration

Configure your site name, description, plugins and themes.

gatsby-config.js

Configuration options for a Gatsby (and Reflex) site are placed in a gatsby-config.js file at the root of the project folder.

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Reflex",
    description: "Starter for Reflex.",
    siteUrl: process.env.SITE_URL || "http://localhost:8000",
  },
  plugins: ["@reflexjs/gatsby-theme-base"],
}

siteMetadata

The siteMetadata is for common config that is used across the site. The site name (title), description and other site related config are stored in the siteMetadata.

Reflex provides the useSiteMetadata helper hook to retrieve the siteMetadata config.

content/blocks/copyright.mdx

import { useSiteMetadata } from "@reflexjs/gatsby-theme-core" 
export const Copyright = ({ ...props }) => {
  const { title } = useSiteMetadata() 
  return (
    <P fontSize="sm" {...props}>
      © {new Date().getFullYear()} {title}
    </P>
  )
}

plugins

This is where you define your site plugins and themes. Plugins can be listed by name or with options.

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Reflex",
    description: "Starter for Reflex.",
    siteUrl: process.env.SITE_URL || "http://localhost:8000",
  },
  plugins: [
    "@reflexjs/gatsby-theme-base"
    {
      resolve: "@reflexjs/gatsby-theme-post",
      options: {
        basePath: "/the-blog",
      }
    }
  ],
}

You can read more on the gatsby-config.js file in the Gatsby docs.

Directory Structure Configure your editor