Introducing our Gatsby Starter and Source Plugin

Joshua Joshua
4 minute read

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.

Gatsby starter demo

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>",
      },
    },
  ],
}
If you don't know your ID, log into your account at DropInBlog and head to Code & Layout in the main navigation. There you'll be shown example code containing your blog ID.
 
 
For an existing Gatsby project, you can install our gatsby-source-dropinblog plugin using npm or yarn.
 
$ 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.

Starter Tour

You can also find all of the authors and their content on the Authors page.

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.

Starter Archive

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.

Get started embedding a blog into your website right now

Try It For Free