Skip to content

Plugin for Photos and Stuff in Gatsbyjs

August 1st, 2018


Helping out Making a Gatsbyjs plugin

Some friends and me are making a plugin for photos and stuff in Gatsbyjs. The work I do is very basic, here I am testing out the ‘Read Me’ we have on github. You might know the friends, they are Benedicte Raae, Tom Erik Støwer and last but not least Martin Grimeland. The infamous MartinG.

Before starting:

I Checked My Development Environment

Gatsby.js plugin

In the screenshot above you see the Gatsbyjs tutorial part one.


You Should Install Gatsby CLI

If you don’t have it, I had it installed. Because Gatsby and me go waaaaay back. Like weeks and weeeeeks!


Gatsby.js plugin

Step 1: Initialize a Gatsby Starter Template

Use the Gatsby CLI to initialize a Gatsby starter template. gatsby new blog

Gatsby.js plugin


Gatsby.js plugin

Step 2: Move the ‘cd blog’ directory

Gatsby.js plugin Gatsby.js plugin

I made a pull request on 💪😺👍


Step 3: New Folder

Create a plugins folder mkdir plugins.

Step 4: Move Into Folder

Move into the plugins folder cd plugins.

Step 5: Clone Our Gatsbyjs Repo

Clone this repo `git clone`


Gatsby.js plugin

Step 6: Add Some Code

Add the following to the plugins property of the gatsby-transformer-remark plugin in gatsby-config.js:

   resolve: `gatsby-remark-oembed`

Gatsbyjs Plugin Gatsbyjs Plugin


Step 7: Add link to Gatsbyjs

Add a oembed link to one of the markdown posts (pages) on a line with an empty line above and below.


Step 8: Serve Up Gatsbyjs

Serve up the page using gatsby develop.


Gatsbyjs Plugin

Something was wrong with my ‘npm’. So I wrote ‘install npm’ into the terminal.

Gatsbyjs Plugin

Step 9: Gatsbyjs Works, but I See No Transformation

Take a look at the post you added the oembed link to, and see it being transformed into something else.

 Gatsbyjs plugin



No comments yet

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS