The Gatsby Material Design blog theme

A Gatsby theme for creating a material-design blog.

• Features
• Installation
• Usage
  • Theme options
  • Example usage
  • Additional configuration
  • Environment variables
  • Algolia Search

Features

• Based on a solid material UI library, material-ui
• GitHub-like calendar heatmap to track activity
• Mobile-friendly
• Directory (a.k.a. category) organization of posts
• Algolia search

Installation

npm install --save gatsby-theme-material-blog

Usage

Theme options

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-material-blog`,
      options: {
        basePath: `/blog`,
      },
    },
  ],
}

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js.

This theme assumes that at least the fields present in the code block below are present.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `My Blog Title`,
    // Used to provide alt text for your avatar
    author: `My Name`,
    // Used for SEO
    description: `My site description...`,
    // Used for social links in the root footer
    social: [
      {
        name: `GitHub`,
        url: `https://github.com/gatsbyjs`,
      },
      ...
    ],
  },
}

Environment variables

Algolia Search

In order to get Algolia Search functionality, you need to define the following variables:

• GATSBY_ALGOLIA_APP_ID
• GATSBY_ALGOLIA_SEARCH_KEY
• ALGOLIA_ADMIN_KEY