https://github.com/chenlijun99/gatsby-theme-material-blog

Blog theme based on material-ui
https://github.com/chenlijun99/gatsby-theme-material-blog

gatsby gatsby-theme material-ui

Last synced: 4 days ago
JSON representation

Blog theme based on material-ui

• Host: GitHub
• URL: https://github.com/chenlijun99/gatsby-theme-material-blog
• Owner: chenlijun99
• License: mit
• Created: 2019-09-29T20:09:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-13T20:00:41.000Z (over 5 years ago)
• Last Synced: 2025-01-15T22:33:12.839Z (29 days ago)
• Topics: gatsby, gatsby-theme, material-ui
• Language: TypeScript
• Homepage: https://gatsby-material-blog-theme.netlify.com/
• Size: 11.7 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  





  The Gatsby Material Design blog theme



[![npm](https://img.shields.io/npm/v/gatsby-theme-material-blog)](https://www.npmjs.com/package/gatsby-theme-material-blog)

[![CircleCI](https://circleci.com/gh/free-easy/gatsby-theme-material-blog.svg?style=svg)](https://circleci.com/gh/free-easy/gatsby-theme-material-blog)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

A Gatsby theme for creating a material-design blog.

* [Features](#features)

* [Installation](#installation)

* [Usage](#usage)

  * [Theme options](#theme-options)

    * [Example usage](#example-usage)

  * [Additional configuration](#additional-configuration)

  * [Environment variables](#environment-variables)

    * [Algolia Search](#algolia-search)

## Features

* Based on a solid material UI library, [material-ui](https://material-ui.com)

* GitHub-like calendar heatmap to track activity

* Mobile-friendly

* Directory (a.k.a. category) organization of posts

* Algolia search

## Installation

```shell

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

```

## Usage

### Theme options

| Key           | Default value    | Description                 |

| ------------- | ---------------- | --------------------------- |

| `basePath`    | `/`              | Root url for all blog posts |

| `contentPath` | `content/posts`  | Location of blog posts      |

#### Example usage

```js

// 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.

```js

// 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`