How I got started with my first Gatsby source & remark plugin
Tags: gatsby, npm
Published: 2021-09-01 04:13:39

---
title: How I got started with my first Gatsby source & remark plugin
published: true
date: 2020-05-02 23:00:00 UTC
tags: gatsby, npm
canonical_url: https://curiousprogrammer.dev/blog/how-i-got-started-with-my-first-gatsby-source-remark-plugin/
---

> **Note:** This article deviates from the original article to match the dev.to format.

**Problem:** I go to a site with tutorial gifs. By the time I get to them, I don't really know when it started. I have gifs like that on my site so I wanted a mechanism where I could interact with the gif being able to play and pause it on demand.

**Solution:** I created my first npm package - EVER! 🎉 It's a Gatsby [source](https://www.gatsbyjs.com/docs/creating-a-source-plugin/) and [transformer remark](https://www.gatsbyjs.org/tutorial/remark-plugin-tutorial/) plugin called [gatsby-remark-interactive-gifs](https://gifs.curiousprogrammer.dev). 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 this

```
`gif:nyancat.gif:caption=Nyanyanyanyanyanyanya`
```

becomes a picture of a still nyan cat with a play button on it. When you click on the play button, the gif will download and play from the beginning.

> If you are unfamiliar with Gatsby, [Gatsby](https://www.gatsbyjs.org/docs/) is a blazing fast 🚀 modern site generator for React. To dive right in, check out the Gatsby [quick start](https://www.gatsbyjs.org/docs/quick-start/) guide.

1. 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](https://github.com/gatsbyjs/gatsby-starter-default) for my blog.

    ```
    gatsby new my-default-starter 
    https://github.com/gatsbyjs/gatsby-starter-default
    ```

2. Create a `plugins` directory in the root of your project with a directory of the plugin you want to create. eg. `plugins/gatsby-remark-interactive-gifs`_There is a specific [naming convention](https://www.gatsbyjs.org/docs/naming-a-plugin) for plugins that you should take note of._

3. Initialize the directory with git before getting started: `git init`

4. Each plugin needs to have a `package.json` file so [initialize](https://docs.npmjs.com/creating-a-package-json-file) your plugin with `npm init`. Add the `--yes` / `-y` flag 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](https://www.gatsbyjs.org/contributing/submit-to-plugin-library/) so that your plugin is automatically detected by Gatsby's indexing.

5. Install the packages you need for your plugin using npm or yarn and configure them accordingly.[Commit your lock file](https://stackoverflow.com/questions/44552348/should-i-commit-yarn-lock-and-package-lock-json-files)!

6. Find a place to put your tests. I put mine in a `specs` directory in the root of the plugin.

7. Create a `src` directory 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](https://www.gatsbyjs.org/docs/what-is-a-plugin/) to get an idea of what you can create. Also, there are some[files](https://www.gatsbyjs.org/docs/files-gatsby-looks-for-in-a-plugin/) that Gatsby looks for in a plugin.

8. Configure your plugin in your `gatsby-config.json` file in the root of your project.

9. Write the code you want to put in your plugin. You are now able to test it locally.

## Publish your package

1. 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](https://github.com/conventional-changelog/standard-version) to automate that process.

2. 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
    ```

3. Your plugin may not be available right away. Gatsby uses [Algolia](https://www.algolia.com/) to index plugins and Gatsby rebuilds their website periodically to include plugins.