Skip to main content
View plugin on GitHub
See starters using this

Simple blog - Gatsby Theme

Ready to be used blogging theme

✨ Features

  • Theme UI for styling
  • PrismJS highlighting
  • Gatsby Image
  • Posts in MDX
  • Tags
  • Static pages for non post types
  • SEO friendly
  • Fully customizable through gatsby-config.js, gatsby-plugin-theme-ui and shadow components
  • Linting with ESLint and Stylelint
  • Code formatting with Prettier

πŸš€ Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    # npm
    npm install --save gatsby-theme-simple-blog
    # yarn
    yarn add gatsby-theme-simple-blog
  2. Add the theme to your gatsby-config.js:

    module.exports = {
    	plugins: ["gatsby-theme-simple-blog"]
    };
  3. Start your site

    gatsby develop

βš™ Configuration

module.exports = {
	plugins: [
		{
			resolve: "gatsby-theme-simple-blog",
			options: {
				basePath: "", // base url "/"
				tagsPath: "", // tags url "/tags"
				contentPath: "", // content url for posts"/content/posts"
				assetPath: "" //  assets url "/content/assets"
			}
		}
	],
	siteMetadata: {
		url: "https://abdessalam.dev",
		title: "Simple blog",
		author: "Abdessalam",
		description: "Simple blog theme starter",
		locale: "en",
		socialLinks: [
			// links displayed in footer
			{
				text: "Twitter",
				link: "https://twitter.com/gatsbyjs"
			},
			{
				text: "GitHub",
				link: "https://github.com/gatsbyjs"
			}
		],
		navLinks: [
			// links display in navbar
			{
				text: "Home",
				link: "/"
			},
			{
				text: "About",
				link: "/about"
			},
			{
				text: "Contact",
				link: "/contact"
			}
		],
		themeConfig: {
			themeSwitcher: true, // enable theme switcher
			showNavLinks: true, // show links from navLinks array in navbar
			loadMorePosts: false, // enable load more posts
			postsPerPage: 10, // posts to display per page
			postsIncrementBy: 5 // posts increment value
		}
	}
};

πŸ’… Customization

You can override theme components using Component Shadowing

  1. Create a folder with theme name gatsby-theme-simple-blog
  2. Override any component you want by creating a new one and its css file, for example Nav.js and Nav.css
  3. You can also override theme-ui theme style by creating gatsby-plugin-theme-ui folder and new object style or components
  4. You can also override or add new global css styles in assets as they are imported in globalStyle.js

✍ Writing content

Example of release post in content/posts/[POST_TITLE]/index.mdx

You can create pages by passing type to page

---
type: post
title: Another post
date: 2019-07-23
draft: false
media: ./img1.jpeg
author: Abdessalam
tags:
  - Hello
  - Post
  - Welcome
---

Content goes here

🧐 What’s inside?

.
β”œβ”€β”€ node_modules
β”œβ”€β”€ src
|   β”œβ”€β”€ assets
|   β”œβ”€β”€ components
|   |   β”œβ”€β”€ Layout.js
|   |   β”œβ”€β”€ Layout.css
|   |   β”œβ”€β”€ ...
|   |   └── SEO.js
|   β”œβ”€β”€ gatsby-plugin-theme-ui
|   β”œβ”€β”€templates
|   |   β”œβ”€β”€ page.js
|   |   β”œβ”€β”€ posts.js
|   |   β”œβ”€β”€ post.js
|   |   └── tag.js
|   └── utils
|        β”œβ”€β”€ globalStyle.js
|        └── helpers.js
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .prettierrc.js
β”œβ”€β”€ .eslintrc.js
β”œβ”€β”€ .stylelintrc.config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
└── LICENSE

πŸ‘¨πŸ»β€πŸ’»πŸ‘©β€πŸ’» Contributing

Contributions, issues and feature requests are welcome !

Demo

Live demo

Hompage preview

Single post preview

Single page preview

Author

Abdessalam BENHARIRA