gatsby-source-blogger

Source plugin for pulling blog posts and pages into Gatsby from Blogger.

Install

npm install --save gatsby-source-blogger

Usage

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-blogger',
      options: {
        apiKey: 'your-api-key',
        blogId: 'your-blog-id'
        }
      }
    }
  ]
}

Query Blog Posts

The plugin maps all JSON fields documented in the Blogger API Reference to GraphQL fields.

{
  allBloggerPost {
    edges {
      node {
        slug
        kind
        id
        blog{
          id
        }
        published
        updated
        url
        selfLink
        title
        content
        author{
          id
          displayName
          url
          image{
            url
          }
        }
        replies{
          totalItems
          selfLink
        }
      }
    }
  }
}

Query Pages

{
  allBloggerPage {
    edges {
      node {
        slug
        kind
        id
        blog{
          id
        }
        published
        updated
        url
        selfLink
        title
        content
        author{
          id
          displayName
          url
          image{
            url
          }
        }
      }
    }
  }
}

Slug

The plugin adds additional slug field to both the GraphQL type from the current Blogger url taking the last segment without the .html extension:

https://my-domain.com/2019/02/this-is-my-post-slug.html

https://my-domain.com/p/this-is-my-page-slug.html

Markdown

Your Blogger posts and pages are available in Markdown format too; thanks to Gatsby Transformer Remark you can query MarkdownRemark child type and benefit to its additional fields like excerpt, time to read, etc.

{
  allBloggerPost {
    edges {
      node {
        slug
        ...
        childMarkdownRemark{
          frontmatter{
            title
            date
            slug
          }
          html
          excerpt
          timeToRead
        }
      }
    }
  }
}