Web-IDEs für kleine „Domain of One’s Own“-Experimente?

In meiner Freizeit bekomme ich ab und zu mit, wie Katharina & Christian das Konzept einer Domain of One’s Own in den deutschsprachigen Raum überführen: „Das Konzept einer Domain of One’s Own sieht vor, dass Hochschulen ihren Studierenden von Beginn des Studiums an eine eigene Domain und Webspace, bereitstellen, die sie selbst gestalten können und über die sie volle Kontrolle haben. Sie lernen somit, sich im Netz zu bewegen, Inhalte zu erstellen, verschiedene Tools einzusetzen und können kollaborativ arbeiten.“ (Quelle: domain-of-ones-own.de)

Ein technischer Klassiker für die Umsetzung ist die Open-Source-Software WordPress. Durch die breite Auswahl an Designs wird ein großer kreativer Handlungsspielraum geboten. Zudem ist das Inhalt erstellen komfortabel und einfach. Technisch benötigt WordPress jedoch einen Webspace mit PHP und MySQL-Datenbank. Diese Infrastruktur muss natürlich erst bereitgestellt (keine Raketenwissenschaft) oder extern bezogen werden (Für Hochschulen bietet bspw. reclaimhosting.com eine solche Infrastruktur an, privat gibt es preiswerten und mit ökostrom-betriebenen Webspace bspw. bei manitu und einigen weiteren Anbieter:innen in der EU).

Online-Entwicklungsumgebungen als weitere Option?

Ein zusätzlicher Weg könnte sich in Zukunft eventuell zusätzlich durch sogenannte Web-IDEs (englisch: IDE, integrated development environment) auftun. Dies sind Online-Entwicklungsumgebungen im Browser. Das Installieren von Programmierwerkzeugen auf dem eigenen Rechner ist somit nicht mehr nötig, um HTML-Dateien (und nodeJS-Projekte) zu bearbeiten.

Ein solcher Online-Dienst ist bspw. gitpod.io

(Es gibt weitere Anbieter wie „replit.com – free, collaborative, in-browser IDE to code in 50+ languages — without spending a second on setup.“, s.u.)

Im Zusammenspiel mit der Plattform github.com ergibt sich so die Möglichkeit, ein Webseiten-Projekt kostenfrei zu verwalten und über den integrierten Dienst Github Pages als Webseite bereitzustellen (Mit Hilfe einer Github Action kann das Endergebnis auch auf einen eigenen Webspace/Domain transferiert werden im Sinne einer Domain of One’s Own).

Wie könnte das in der Praxis aussehen?

Ich habe ein kleines Beispiel-Projekt auf GitHub vorbereitet:

https://github.com/mandrasch/11ty-up-massively

Das Theme stammt von html5up.net (CC BY 3.0 Unported). „11ty“ steht für den statischen Seitengenerator Eleventy (Open Source). Eine Erklärung zu statischen Seitengeneratoren findet sich auf cmsstash.

11ty bietet kein Dashboard zum Bearbeiten der Inhalte an, sondern ist nur ein Werkzeug um aus HTML und Markdown-Dateien eine statische Webseite zu generieren. (Dies kann auch in Punkto Nachhaltigkeit von Vorteil sein da nicht bei jedem Webseitenaufruf eine Datenbankverbindung aufgebaut werden muss.)

Die fertige Seite sieht dann so aus:

https://mandrasch.github.io/11ty-up-massively/

Mit diesem Vorlage-Projekt (https://github.com/mandrasch/11ty-up-massively) kann ein eigenes Projekt (Repository) angelegt werden auf GitHub mit wenigen Klicks:

Bearbeiten im Browser mit gitpod.io

Mit gitpod.io ist das Bearbeiten sehr schnell möglich, vor ein GitHub-Repository muss man nur „https://gitpod.io/#“ schreiben und im Browser aufrufen. Also in meinem Fall https://gitpod.io/#github.com/mandrasch/11ty-up-massively/.

Beim ersten Aufruf ist die Registrierung mittels GitHub-Account nötig:

Danach öffnet sich der Online-Editor mit samt eines Terminals. (Info für Nerds: Über die .gitpod.yml konnte ich direkt npm-Befehle ausführen, um die Vorschau zu generieren)

Die index.html befindet sich in src/index.html. Dort können nun Inhalte geändert werden, die Vorschau wird automatisch neugeneriert.

(Für die Terminal-Benutzung: Mit STRG + C kann man die Ausführung der Vorschau im Terminal beenden. Mit „npm start“ kann man sie wieder starten. Wenn etwas an den Inhalten geändert wird, wird die Seite automatisch neu geladen.)

Möchte man die Änderungen an GitHub zurücksenden (commiten), ist noch die Rechte-Freigabe nötig über „Sign in with GitHub to use GitHub Pull Requests and Issues“ in der linken Sidebar:

Danach können die Änderungen im Tab „Version Control“ an das GitHub Projekt gesendet werden (An dieser Stelle kommt die Technologie git ins Spiel):

Veröffentlichen der Webseite mit GitHub Pages

Um die Webseite automatisch auch mit GitHub Pages zu veröffentlichen, muss in den GitHub-Repository-Einstellungen noch der Branch „gh-pages“ ausgewählt werden. Im Repository findet sich bereits eine „GitHub Action“, die nach jeder Änderung die aktuelle Version in den Branch gh-pages überträgt.

Anschließend wird eine URL angezeigt, über dass das Projekt stets in der aktuellen Version abrufbar ist. Dies ist dann eine ganz normale Webseite, siehe z.B. https://mandrasch.github.io/11ty-up-massively/

(Um diese Webseite noch auf einen eigenen Webspace zu transferieren automatisch, kann die ftp-deploy-Action genutzt werden – siehe https://github.com/mandrasch/11ty-up-massively/blob/main/.github/workflows/build-deploy.yaml ganz unten).

Fazit?

Das Charmante an Online-Editoren wie gitpod.io ist, dass das Aufsetzen einer lokalen Entwicklungsumgebung entfällt. Üblicherweise muss erst Entwicklungsumgebung wie Visual Studio Code lokal installiert, um mit GitHub-Repositories zu arbeiten. Mit Online-Editoren / Web-IDEs wie dem vorgestellten Gitpod entfällt dieser erste aufwändige Schritt.

Die Komfortabilität von WordPress lässt sich hiermit beim Inhalte erstellen natürlich nicht erreichen, jedoch können grundlegende Erfahrungen mit HTML (und NodeJS) gesammelt werden. Auch ist man in der Gestaltungsfreiheit mittels CSS etwas freier, als wenn man erst lernen muss WordPress-Themes anzupassen.

Eventuell eignet sich dieser Weg also für Projekte, die einen „Computer-Science“/Informatik-Bezug haben und bei denen HTML/CSS angewendet werden soll.

Weitere Online-Editoren/IDEs

Ich habe mehrere Online-Editoren getestet, bspw.

Github bietet mit https://github.com/features/codespaces in Zukunft wohl auch eine Online-IDE an, bisher ist diese nur beschränkt zugänglich.

Archiv: Bearbeiten mit replit.com (Bonusinfo für Nerds)

Mein erster Versuch fand mit replit.com statt. Hierbei hatte ich allerdings ein Projekt ohne npm verwendet, https://github.com/mandrasch/tiny-dooo. Hier noch als Bonusinfo ein paar Screenshots:

Nachdem dieses Repository angelegt wurde, kann es auf https://replit.com/ bearbeitet werden. Hierfür muss replit mit GitHub gekoppelt werden:

Anschließend kann man sich noch entscheiden, ob man nur ausgewählte Projekte oder alle Repositories freigibt:

Danach wird das Repository angezeigt und kann in der Online-IDE von replit geöffnet werden:

Nach dem Öffnen und einem Klick auf „Run“ wird bereits die Vorschau angezeigt:

Nun können die HTML- und Markdown-Dateien bearbeitet werden. Diese Änderungen werden erstmal nur im replit.com-Projekt gespeichert.

Wie Links angelegt werden, ist in der README beschrieben.

Die Änderungen können anschließend im Tab „Version Control“ an GitHub gesendet werden (ein sogenannter git commit):

Die Änderungen sind somit dann anschließend im github.com-Projekt dokumentiert:

Grundsätzlich kann die Arbeit am Projekt auch komplett über replit.com erfolgen, ohne die Nutzung / Koppelung mit GitHub. Hiermit entfällt jedoch die Möglichkeit, die Webseite mittels Github-Action an einen FTP-Webspace mit eigener Domain zu senden. Mir gefiel an der Verbindung mit GitHub, dass es einem echten Developer:in-Workflow nahekommt. Das ist sicher Geschmackssache und kommt auf die jeweiligen Ziele an.
Die GitHub-Projektvorlage kann trotzdem initial importiert, Änderungen werden aber nicht synchronisiert und es ist auch kein eigener Github-Account nötig:

Auch replit.com stellt eine Live-URL bereit, wo das Endergebnis stets mit aktuellen Änderungen abrufbar ist.

Schreibe einen Kommentar