Source plugin for pulling blog posts and pages into Gatsby from Blogger.
npm install --save gatsby-source-blogger
module.exports = {
plugins: [
{
resolve: 'gatsby-source-blogger',
options: {
apiKey: 'your-api-key',
blogId: 'your-blog-id'
}
}
}
]
}
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
}
}
}
}
}
{
allBloggerPage {
edges {
node {
slug
kind
id
blog{
id
}
published
updated
url
selfLink
title
content
author{
id
displayName
url
image{
url
}
}
}
}
}
}
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
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
}
}
}
}
}
By default, if available, the plugin download the post featured image and link it on the featuredImage
node field and create the featuredImageUrl
variable on the markdown front matter pointing to the original remote url.