How I got started with my first Gatsby source & remark plugin
I created my first npm package - EVER! 🎉 It's a Gatsby source and transformer remark plugin
What that means is that it both extends the Gatsby GraphQL schema with what I call interactive gif data
and it translates the Markdown, which I have in the form of a
gif protocol, into HTML. That means that
If you like the idea of this plugin then please give it a star ⭐ on GitHub. Fork it to get an idea of how I developed the plugin. Try it out by installing it now 😄
npm i -S gatsby-remark-interactive-gifs
- Create a Gatsby project (or use your existing one). Use the default or go fancy with a Gatsby starter for a fresh copy. I used gatsby-started-default for my blog.
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
- Create a
pluginsdirectory in the root of your project with a directory of the plugin you want to create. eg.
plugins/gatsby-remark-interactive-gifsThere is a specific naming convention for plugins that you should take note of.
- Initialize the directory with git before getting started:
- Each plugin needs to have a
package.jsonfile so initialize your plugin with
npm init. Add the
-yflag if you wish to skip the questionnaire. Be sure to configure your package.json file with the relevant details if you intend on publishing to npm. Include relevant keywords so that your plugin is automatically detected by Gatsby's indexing.
- Install the packages you need for your plugin using npm or yarn and configure them accordingly. Commit your lock file!
- Find a place to put your tests. I put mine in a
specsdirectory in the root of the plugin.
- Create a
srcdirectory in the root of your project where you will place all the files you want to create for your plugin. Read through the plugin documentation to get an idea of what you can create. Also, there are some files that Gatsby looks for in a plugin.
- Configure your plugin in your
gatsby-config.jsonfile in the root of your project.
- Write the code you want to put in your plugin. You are now able to test it locally.
Publish your package
- You can create a release script that will bump the version, update the CHANGELOG.md and tag that commit for your release. I use standard-version to automate that process.
- To publish your plugin, login to npm through the CLI and then publish it. Be sure to bump your version on each release.
npm run release #if you have the relevant release script git push -u origin --tags npm publish
- Your plugin may not be available right away. Gatsby uses Algolia to index plugins and Gatsby rebuilds their website periodically to include plugins.