Community Plugin

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',
          downloadImage: true
        }
      }
    }
  ]
}

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
        }
        featuredImage{
          childImageSharp{
            ...
          }
        }
        images{
          url
        }
      }
    }
  }
}

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
            featuredImageUrl
          }
          html
          excerpt
          timeToRead
        }
      }
    }
  }
}

Post featured image

By default, if available, the plugin download the post featured image and link it on the featuredImage node field (you might want to disable this by setting the downloadImage plugin option to false) and create the featuredImageUrl variable on the markdown front matter pointing to the original remote url.