Eric Wätke

Einen Podcast mit Gridsome (Vue.JS) veröffentlichen Part 1

Wie ich einen Podcast mit Gridsome veröffentliche

Vor ein paar Wochen habe ich angefangen, einen Podcast zu produzieren.

Header Image vom Podcast

Hosting Entscheidungen

Da dies hier nicht meine erste Podcast Erfahrung ist, kannte ich im Vorfeld schon die gängigen Hosting Provider. Die kostenlosen sowie die bezahlten. Da es ein (wie natürlich immer) geringes Budget gab aber ich trotzdem eine solide Lösung wollte, entschied ich mich dafür, dass die kostenlosen Varianten nicht genügen. Der größte Negativ-Punkt von Anchor ist, dass sie in der kostenlosen Version standardmäßig deren Logo auf mein Podcast-Cover setzen. Das dürfen sie natürlich auch. Ich bezahle ihnen nichts, dann können sie ruhig etwas Werbung machen.

Achtung! Man kann das Anchor Logo entfernen. Entweder haben sie das nach meinen vorherigen Anchor Erfahrungen hinzugefügt oder ich habe es einfach übersehen.

Ich wollte jedoch ein bisschen mehr Flexibilität. Ich wollte komplette Freiheit.

Also, wenn du die einfache Variante suchst, höre hier auf meinen Artikel zu lesen und benutze Hosting-Provider wie Anchor, Libsyn oder welcher auch immer zu dir passt. Auch wenn du die Podcast Dateien nicht auf deinem eigenen Server hosten möchtest, greife gerne zu den Hostern. Es ist aber trotzdem eine gute Idee, eine eigene Internetseite zu haben. Also lese gerne weiter, wenn du die Grundstruktur übernehmen möchtest!

Dieser Prozess geht nicht mal so nebenbei. Aber sobald du einmal alles eingerichtet hast, bist du Frei von allen Einschränkungen die es geben könnte.

Das Setup

Ich werde diese Erfahrung in mehrere Teile splitten, da das alles ganz schon lang werden könnte. Also schnall dich fest 😉.

Du bist wahrscheinlich hier weil du Vue kennst und liebst. Genau wie ich. Falls nicht, solltest du mit etwas anderem anfangen, da ich nicht über die Basics von Vue und npm reden werde.

Ich benutze das Vue äquivalent von Gatsby ― Gridsome. Ich nutze es auch für diesen Blog und bin eigentlich ganz zufrieden mit der ganzen Sache. Wahrscheinlich werde ich in der Zukunft dementsprechend auch noch mehr Gridsome-related Artikel schreiben.

Um Gridsome zu installieren, füge einen dieser Befehle aus, je nachdem ob du Yarn oder NPM präferierst. Übrigens, du solltest dir auf jeden Fall die Docs anschauen um mehr Infos zu bekommen.

  • Für YARN:yarn global add @gridsome/cli
  • Für NPM:npm install --global @gridsome/cli

Dann kannst du mithilfe der Gridsome CLI ein neues Projekt erstellen

  1. gridsome create your-podcast um ein neues Projekt zu erstellen
  2. cd your-podcast um den Ordner zu öffnen
  3. gridsome develop Um den lokalen Server (erreichbar unter http://localhost:8080) zu erstellen

Dann benötigst du 2 Plugins um am Ende eine funktionierende RSS Datei zu haben

Und das ist alles was wir brauchen um los zu legen.

Die Datei-Struktur

Wir fügen die Podcast Episoden mithilfe vom markdown-Dateien unserer Seite hinzu. Wenn du möchtest kannst du natürlich auch ein CMS wie Contentful o.ä. nutzen. Womit auch immer du gerne arbeitest, Ich werde hier aber markdown als Beispiel nutzen.

Ich habe einen Ordner "podcast" im root-Verzeichnis des Projekts erstellt in welchem wir alle unsere .md Dateien speichern werden.

Im nächsten Teil schauen wir uns dann an, wie wir die Markdown Dateien und das transformer-remark Plugin konfigurieren.