Community Plugin

Gatsby Theme Paste

A unofficial Gatsby blog theme using Paste with high accecibility and inclusion.

Installation

For a new site

If you want to create a new site with this theme, run the command below. This will generate a new site with all necessary configurations.

gatsby new my-paste-blog https://github.com/shyamajp/gatsby-theme-paste-starter

For an existing site

Install the theme

  npm install gatsby-theme-paste

Add the configuration to your gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-paste`,
      options: {
        // basePath defaults to `/`
        basePath: `/blog`,
      },
    },
  ],
};

Add blog posts to your site by creating md or mdx files inside /content/posts or your customised contentPath.
Run your site.

gatsby develop

By default, your site will be running at http://localhost:8000.

Usage

This is an example project structure

Project Structure

📂 my-paste-blog
+---📜 gatsby-config.js
+---📜 package.json
│
+---📂 content
    +---📂 assets
    │   +---🖼️ avatar.png
    │   +---🖼️ default.jpg
    │   +---🖼️ main.jpg
    │
    +---📂pages
    │   +---📜 about.md
    │   +---📜 contact.md
    │   +---📜 privacy-and-policy.md
    │
    +---📂post
    +---📜 my-first-blog.md
    +---📜 my-second-blog.mdx
    +---📂 my-third-blog
        +---📜 blog-content.mdx
        +---🖼️ blog-image.jpg

Theme options

Key	Default value	Description
basePath	/	Root url for all blog posts
contentPath	content/posts	Location of blog posts
limit	1000	Set the amount of pages that should be generated

Example Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-paste",
      options: {
        // basePath defaults to `/`
        basePath: "/blog",
        // number of posts in one page
        postsPerPage: 10,
      },
    },
  ],
};

Site Metadata Configuration

Key	Type	Description
title	String	Site title for SEO
description	String	Site description for SEO
author		Author detail displayed in the sidebar and footer
author.name	String	Name of the author
author.description	String	Description of the author
siteUrl	String	Site url
menuLinks	[]	Menu items displayed in the header
menuLinks.name	String	Name of the menu item
menuLinks.link	String	Link of the menu item
quickLinks	[]	Quick link items displayed in the footer
quickLinks.name	String	Name of the quick link item
quickLinks.link	String	Link of the quick link item
social	[]	Social links displayed in the sidebar and footer
social.name	String	Name of the social site
social.url	String	Url of the social site

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.

Example Usage

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for SEO
    title: "My Blog Title",
    description: "My site description",
    // Used for SEO in the footer and sidebar
    author: {
      name: "shyamajp",
      description: "I love technologies!",
    },
    // Used for resolving images in social cards
    siteUrl: "https://example.com",
    // Used for internal links in the header
    menuLinks: [
      {
        name: "Home",
        link: "/",
      },
      {
        name: "About",
        link: "/about",
      },
    ],
    // Used for quick links in the footer
    quickLinks: [
      {
        name: "Home",
        link: "/",
      },
      {
        name: "About",
        link: "/about",
      },
      {
        name: "Tags",
        link: "/tags",
      },
      {
        name: "Categories",
        link: "/about",
      },
    ],
    // Used for social links in the footer and sidebar
    social: [
      {
        name: "Twitter",
        url: "https://twitter.com/gatsbyjs",
      },
      {
        name: "GitHub",
        url: "https://github.com/gatsbyjs",
      },
      {
        name: "YouTube",
        url: "https://www.youtube.com/",
      },
      {
        name: "LinkedIn",
        url: "https://www.linkedin.com/",
      },
    ],
  },
};

Blog Post Fields

The following are the defined blog post fields based on the node interface in the schema

Field	Type
title	String
body	String
date	Date
tags	String[]
excerpt	String
image	String
imageAlt	String
type	“post” or “page”

An example markdown looks like the following:

---
title: "Blog title"
date: 2022-01-01
image: "./blog-image.jpg"
description: "This is just an example description."
categories:
  - "technologies"
  - "tutorial"
tags:
  - "react"
  - "gatsby"
type: "post"
---

# Yay

This blog renders!

Contributions

TBA

Report a bug

via Issues

Open a discussion

via Discussions

Make a contribution

via PR

License

MIT