Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/itsabdessalam/gatsby-theme-simple-blog

Simple blog Gatsby theme starter
https://github.com/itsabdessalam/gatsby-theme-simple-blog

gatsby gatsby-blog gatsby-plugin gatsby-theme gatsbyjs javascript react reactjs theme

Last synced: 22 days ago
JSON representation

Simple blog Gatsby theme starter

Host: GitHub
URL: https://github.com/itsabdessalam/gatsby-theme-simple-blog
Owner: itsabdessalam
Created: 2019-07-22T06:10:24.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-05-06T08:41:18.000Z (over 1 year ago)
Last Synced: 2024-12-17T21:45:42.571Z (24 days ago)
Topics: gatsby, gatsby-blog, gatsby-plugin, gatsby-theme, gatsbyjs, javascript, react, reactjs, theme
Language: JavaScript
Homepage: https://gatsby-demo-simple-blog.netlify.app
Size: 2.2 MB
Stars: 3
Watchers: 0
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Simple blog - Gatsby Theme

Blog theme starter

## ✨ 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

```sh
# npm
npm install --save gatsby-theme-simple-blog
# yarn
yarn add gatsby-theme-simple-blog
```

2. Add the theme to your `gatsby-config.js`:

```js
module.exports = {
plugins: ["gatsby-theme-simple-blog"]
};
```

3. Start your site

```sh
gatsby develop
```

## ⚙ Configuration

```javascript
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](https://www.gatsbyjs.org/blog/2019-04-29-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`

```bash
src/gatsby-theme-simple-blog/components/Nav.js
```

3. You can also override [theme-ui](https://theme-ui.com/getting-started) theme style by creating `gatsby-plugin-theme-ui` folder and new object style or components or merge with theme file in `index.js`

```bash
src/gatsby-plugin-theme-ui
```

```javascript
import baseTheme from "gatsby-theme-simple-blog/src/gatsby-plugin-theme-ui";
import merge from "lodash.merge";
export default merge({}, baseTheme, {
colors: {},
styles: {}
});
```

4. You can also override or add new global css styles in assets as they are imported in `globalStyle.js` which has an importAll helper

```javascript
import { importAll } from "./helpers";
importAll(require.context("../assets/", true, /\.css$/));
```

## ✍ 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?

## 👨🏻‍💻👩‍💻 Contributing

Contributions, issues and feature requests are welcome !

## Demo

[Live demo](https://gatsby-demo-simple-blog.netlify.com/)

## Author

[Abdessalam BENHARIRA](https://abdessalam.dev)