Gatsby Website mit Blog

August 2021

Bei meinem ersten Versuch eine Website mit einem Javascript Framework zu erstellen, entschied ich mich für Gatsby. Dabei ist eine Blog Website entstanden, welche mit einem CMS verbunden ist.

Verwendete Techniken und Tools

Gatsby

Markdown

Forestry CMS

HTML

SCSS

JavaScript

Github Actions

Einige Infos
zum Projekt.

Womit soll ich es bauen? Diese Frage stellte ich mir, als ich das Design für einen Blog fertig hatte. Da ich schon länger ein Javascript Framework ausprobieren wollte, war dies eine einfache Entscheidung. Nach einigem Recherchieren und Ausprobieren von Vue.js und React, fand ich Gatsby.

Per NPM installierte ich ein grundlegendes Starterpaket, welches ich in der Gatsby starter library gefunden habe. Nach einigem stöbern in der Dokumentation und diversen Tutorials, begann ich die verschiedenen Komponenten zu erstellen.

Der Content wird per Graphql aus den Markdown files in die Komponenten geholt. Um den Content zu bearbeiten und neue Posts zu erstellen, ist das Github Repository mit dem CMS "Forestry" verbunden. Vom CMS werden die Änderungen zu Github übertragen, wo sie mittels Github Actions einen Build auslösen. Der Build wird in den deploy Branch gepusht, von wo die Seite per Netlify online geht.

Texte bearbeiten in Forestry CMS

Blogposts können mit Forestry CMS erstellt und bearbeitet werden.

Website build mit Github Actions

Mit Github Actions wird die Website nach einer Änderung am Repository gebaut und in den deploy Branch gepusht.