We're always working towards making DropInBlog compatible with the platforms you like to use for your websites. Over the past few months, we've been putting together a plugin and a starter to use DropInBlog with Gatsby, a popular JavaScript framework based on React.
Our new gatsby-source-dropinblog plugin will allow you to feed DropInBlog directly into your Gatsby project, and our gatsby-starter-dropinblog will get you up and running with an entire Gatsby project powered by DropInBlog.
There are two ways to get started with Gatsby and DropInBlog: you can either install gatsby-source-plugin directly into your existing Gatsby project, or use our starter project, which has everything you need to get started. Check out our live demo hosted on Netlify.
Getting started
You can use npm or yarn to clone the repo:
$ git clone https://github.com/DropInBlog/gatsby-starter-dropinblog.git
$ yarn install
Or use Gatsby's CLI:
$ gatsby new blog https://github.com/DropInBlog/gatsby-starter-dropinblog.git
Once the starter is set up and installed, you'll need to add your DropInBlog ID to the gatsby-node.js file within the project. Check out the example code below:
module.exports = {
siteMetadata: {
title: `DropInBlog Starter`,
description: `A quick and simple Gatsby solution for implementing a feature rich blog`,
author: `Joshua Hall`,
},
plugins: [
"gatsby-plugin-sass",
"gatsby-plugin-emotion",
{
resolve: "gatsby-source-dropinblog",
options: {
id: "<YOUR_UNIQUE_ID>",
},
},
],
}
$ yarn add gatsby-source-dropinblog
plugins: [
{
resolve: "gatsby-source-dropinblog",
options: {
id: "<YOUR_UNIQUE_ID>",
},
},
]
The grand tour
The starter comes out-of-the-box with a bunch of nifty modules to get you started. It uses the Chakra UI framework for all of its components (and imports Tailwind as a reset). Chakra allows you to add responsive and accessible components, while adding minimal CSS. If you don't like it, you can replace it without needing to delete a bunch of sass files.
Once you've started the development server, you'll be presented with the home page and a grid of all your posts. Each post gives you the option to go to the post itself, its category's page, or its authors' profile.
You can also find all of the authors and their content on the Authors page.
Use the Archive page to browse a complete collection of the published articles. We've used the gatsby-awesome-pagination plugin to limit the posts to 3 per page, which you can change in gatsby-node.js and add a simple pager.
Closing thoughts
We've tried to provide you with everything you need to get going, just like our snippets, so you don't need to waste time undoing styling you don't like. Both our starter and source plugin are open source on GitHub, so you're welcome to dig into the code, raise issues and even submit pull requests.
As always, if you have any questions, comments, or concerns about getting started, drop us a message on Messenger, or send us a message to our Support page.