Embedding a Bluesky Feed in Ghost

I embedded my Bluesky profile's feed into my Ghost blog. However, I had some help.

Vincent Will created a web component that can render a Bluesky feed just about anywhere. Ample instructions are provided on the package's Github page, however I needed to do a little tinkering to embed it nicely in my Ghost theme.

I'm using the starter theme in my self-hosted Ghost install. Starter is bare-bones, but very extensible.

To add bsky-embed into my theme, I needed to drop the package in as a dependency, import it in the right place, and then recompile the theme.

First, I dropped into content/themes/starter, and ran npm i -s bsky-embed. This installed the packages into my theme's node_modules directory. I then needed to open my assets/js/index.js file, and add import "bsky-embed/dist/bsky-embed.es.js"; to the top of the file, to import the package library into my theme. Then, it was as simple as running npm run build from my theme's root directory to recompile the theme files, and I was good to go.

To actually embed the feed, I created a new page and added an HTML snippet with the web component.

It was as simple as that.

If you wanted to embed your Bluesky feed into Ghost without compiling it into your theme, you could probably just use the pre-compiled library via CDN. Instructions are on the Github page.