This is a minimal blogging theme intended to focus on content and readability.
See the live demo.
To use this theme in your Gatsby sites, follow these instructions:
-
Install the theme
npm install --save @beccanelson/gatsby-theme-writer
-
Add the theme to your
gatsby-config.js
:module.exports = { plugins: ["@beccanelson/gatsby-theme-writer"] };
-
Start your site
gatsby develop
You can configure your site metadata in gatsby-config.js
. Optionally, you can also configure your basePath
, contentPath
, and assetsPath
.
Example configuration:
module.exports = {
siteMetadata: {
title: "My Gatsby Site",
author: "Becca Bailey",
description:
"A short description of your site. This will appear in your bio.",
siteUrl: "http://my-site.com",
social: {
twitter: "my-twitter",
instagram: "my-instagram"
}
}
};
If you would like to add an avatar, the bio component will look for a file named avatar.[jpeg|jpg|gif|png]
. This should go in your assets folder.
This theme currently supports markdown posts. For more information about markdown syntax, check out this guide.
To keep a post organized witn its assets, we can create a folder structure like this:
content/
blog/
my-first-post/
index.md
featured.jpg
In addition to the markdown content, each post needs frontmatter in order to display and categorize it.
---
title: My First Blog Post!
date: "2019-07-28"
featuredImage: "./featured.jpg"
featured: true
---
For more information, see the demo/
in this repository.
To add a post to the featured posts module, set featured
to true
in the post frontmatter. Also, for best results make sure you have set a featured image for the post. This module supports up to two featured posts at a time. Note: these posts will still appear in the main posts list as well.
If you would like to make changes to this theme, you can use the demo theme to help you out.
git clone git@github.com:beccanelson/gatsby-theme-writer.git
cd gatsby-theme-writer
Install your dependencies
yarn
Start the demo
yarn workspace demo start
Additionally, you can customize your own theme using child theming and component shadowing.
If you are using this theme, I appreciate issues and pull requests! Fork this repo, and follow the setup instructions above to contribute.