Gatsby Theme Blog

:fire: A Gatsby blog theme supporting local filesystem content, MDX and image processing.

The theme provides several built-in features to set the bare-minimum for building a blog including:

Content sourcing and transformation from the filesystem via gatsby-source-filesystem
MDX support via gatsby-plugin-mdx
Image processing via gatsby-plugin-sharp and gatsby-remark-images
Auto creation of individual blog post pages
Auto creation of tags/category/author pages
Blog list page with Pagination – you specify the number of blogs in a page in the Theme Options.

Installation

  npm install @codebrahma/gatsby-theme-blog

:rocket: Usage

Theme Options

Key
Default Value
Description

basePath
"/blog"
Root URL to all blog posts

contentPath
"posts"
Location of blog posts

itemsPerPage
7
Number of items per page

mdx
true
Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

Example Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@codebrahma/gatsby-theme-blog`,
      options: {
        contentPath: 'content/posts',
        basePath: '/blogs',
        itemsPerPage: 5
      }
    }
  ]
}

content/posts directory contains all your Markdown files powering the blog.

  mkdir -p content/posts/hello-world
  touch content/posts/hello-world/hello-world.md

💡 A sample post is below:

---
title: 'Hello World'
date: 2019-10-30
featuredpost: false
description: Hello World, this is my first post.
keywords:
- gatsby
- is
- wonderful
link: /hello-world
category:
- Gatsby
author: Codebrahma
image: ./image.png
tags:
- gatsby
- react
templateKey: blog-post
---

Hello World! This is my first post! I'll have great features enabled by default, including:
 
- Syntax highlighting with triple backticks
- Responsive images
- Responsive iframe embeds
- and more!

:sparkles: Additional Configuration:

In addition to the theme options you can add your own Layout component to the blogs. Create a file src/@codebrahma/gatsby-theme-blog/components/layout.js in your site for Component Shadowing.

A sample layout file:

// src/@codebrahma/gatsby-theme-blog/components/layout.js
import React from 'react'
import Header from './Header'
import Footer from './Footer'

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </div>
  )
}

:art: Theming

Add your own set of design tokens to create a whole new look for the theme. Take a look at current theme file and get creative. Upgrade by creating your own theme.js file.
Example:

// src/@codebrahma/gatsby-theme-blog/components/layout.js
import React from 'react'
import theme from './theme'
import { ThemeProvider } from 'theme-ui'

const Layout = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <main>
        {children}
      </main>
    </ThemeProvider>
  )
}