- Notifications
You must be signed in to change notification settings - Fork1
Gatsby Blog theme with tags and categories
License
NotificationsYou must be signed in to change notification settings
Codebrahma/gatsby-theme-blog
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🔥 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.
npm install @codebrahma/gatsby-theme-blog
| 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 passfalse to turn this off) |
// gatsby-config.jsmodule.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-30featuredpost: falsedescription: Hello World, this is my first post.keywords:- gatsby- is- wonderfullink: /hello-worldcategory:- Gatsbyauthor: Codebrahmaimage: ./image.pngtags:- gatsby- reacttemplateKey: 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!- 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.jsin your site for Component Shadowing.
A sample layout file:
// src/@codebrahma/gatsby-theme-blog/components/layout.jsimportReactfrom'react'importHeaderfrom'./Header'importFooterfrom'./Footer'constLayout=({ children})=>{return(<div><Header/><main>{children}</main><Footer/></div>)}
Add your own set of design tokens to create a whole new look for the theme. Take a look at currenttheme file and get creative. Upgrade by creating your own
theme.jsfile.Example:
// src/@codebrahma/gatsby-theme-blog/components/layout.jsimportReactfrom'react'importthemefrom'./theme'import{ThemeProvider}from'theme-ui'constLayout=({ children})=>{return(<ThemeProvidertheme={theme}><main>{children}</main></ThemeProvider>)}
Contributions, issues and feature requests are welcome.Feel free to checkissues page if you want to contribute.
This project isMIT licensed.