Publishing a podcast with Gridsome (Vue.JS) Part 1

I've started producing a podcast a couple of weeks ago.

Hosting decisions

As this wasn't my first rodeo, I knew the obvious hosting providers. Free and paid ones. As the budget was tight and I wanted a solid solution, I figured, that the free options wouldn't work for me. My biggest grasp with Anchor's free version is, that they put their logo on my podcast. That's of course totally legit. I don't pay anything to them, so they can of course put their logo on the cover.

Beware! It seems as I either wasn't paying attention back then, or they changed it so you can now remove the anchor logo.

That's not what I wanted in this case though. I wanted complete flexibility.

So if you want a simple solution, stop reading this article and use a hosting provider like Anchor, Libsyn or whatever feels enticing to you.

This process takes time to set up. But once you're there, you are free from any restrictions there could possibly be.

The Setup

I will split this experience into multiple parts, as it could get quite long, so strap in 😉.

You are probably here because you know and love Vue. Just like me. If not, this is probably not the right article, as I won't go over the basics of Vue and npm.

I use the Vue equivalent of Gatsby ― Gridsome. I already used it for this blog, and I'm quite happy with how everything works. There will probably be some more articles regarding Gridsome in the future too.

To install Gridsome, execute one of these commands. By the way, you should check out the Docs to get more into details.

• Using YARN:yarn global add @gridsome/cli
• Using NPM:npm install --global @gridsome/cli

To then create a project, you can use the Gridsome CLI like this

1. gridsome create your-podcast to create a new project
2. cd your-podcast to open folder
3. gridsome develop to start local dev server at http://localhost:8080

You then need 2 plugins to have a crawlable RSS file

• transformer-remark
• gridsome-plugin-feed

And that's everything we need to set up.

The file structure

I'll admit, I'm not fully happy with how this works yet. So if you have any ideas on how to structure things better, please hit me up!

We'll add the podcast episodes with markdown files. You can of course use a CMS like Contentful or others. Just take what you like to work with. But in the scope of this article, I'll use markdown as an example.

I created a folder "pocast" where we'll store all of our .md files.

In the next part, I'll talk about how we set up those markdown files and the transformer-remark plugin.