The Gatsby Minimal Blog theme
A Gatsby theme for creating a blog inspired by gatsby-theme-blog and using gatsby-theme-blog-core, theme-ui.
Installation
For a new site
If you're creating a new site and want to use the blog theme, you can use the minimal blog theme starter. This will generate a new site that pre-configures use of the minimal blog theme.
gatsby new my-minimal-blog https://github.com/leomanlapera/gatsby-starter-minimal-blog/
For an existing site
If you already have a site you'd like to add the blog theme to, you can manually configure it.
- Install the minimal blog theme
npm install @leomanlapera/gatsby-theme-minimal-blog
or
yarn add @leomanlapera/gatsby-theme-minimal-blog
- Add the configuration to your
gatsby-config.js
file
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@leomanlapera/gatsby-theme-minimal-blog`,
options: {
// basePath defaults to `/`
basePath: `/blog`,
},
},
],
}
-
Add blog posts to your site by creating
md
ormdx
files inside/content/posts
.Note that if you've changed the default
contentPath
in the configuration, you'll want to add your markdown files in the directory specified by that path. -
Run your site using
gatsby develop
and navigate to your blog posts. If you used the above configuration, your URL will behttp://localhost:8000/blog
Usage
Theme options
Key | Default value | Description |
---|---|---|
basePath |
/ |
Root url for all blog posts |
contentPath |
content/posts |
Location of blog posts |
assetPath |
content/assets |
Location of assets |
mdx |
true |
Configure gatsby-plugin-mdx . Note that most sites will not need to use this flag. If your site has already configured gatsby-plugin-mdx separately, set this flag false . |
Example configuration
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@leomanlapera/gatsby-theme-minimal-blog`,
options: {
// basePath defaults to `/`
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
// 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: `Twitter`,
url: `https://twitter.com/leomanlapera`,
},
{
name: `GitHub`,
url: `https://github.com/leomanlapera`,
},
],
},
}
Blog Post Fields
The following are the defined blog post fields based on the node interface in the schema
Field | Type |
---|---|
id | String |
title | String |
body | String |
slug | String |
date | Date |
tags | String[] |
keywords | String[] |
excerpt | String |
Shadowing
Please refer to this link from gatsby docs Shadowing in Gatsby Themes.