@leomanlapera/gatsby-theme-minimal-blog v0.0.13
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.