Gatsby Theme Blog

🔥 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

🚀 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!

✨ 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>
  )
}

🎨 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>
  )
}

🤝 Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

📝 Licence

This project is MIT licensed.