Kostenlos zur Website mit Markdown anstatt Wordpress

Inhalt

1. Was ist Markdown?
2. Warum Markdown statt WordPress?
3. Github Pages
4. Anleitung: Erstellung einer kostenlosen Webseite mit Markdown
   1. Ein GitHub-Repository anlegen
   2. Index-Datei erstellen
   3. GitHub Pages aktivieren
   4. Eigene Domain verwenden
   5. Design mit Astro verbessern
5. Fazit

Was ist Markdown?

Markdown ist eine Auszeichnungssprache, die entwickelt wurde, um das Schreiben und Formatieren von Text so einfach wie möglich zu gestalten. Im Gegensatz zu HTML, das eine Menge Tags erfordert, ist Markdown sehr viel lesefreundlicher. Du kannst problemlos Überschriften, Listen, Links und andere Formatierungen hinzufügen, ohne jemals den Fluss deines Textes zu verlieren.

Einer der größten Vorteile von Markdown ist seine Einfachheit. Du brauchst keine spezielle Software ein einfacher Texteditor reicht völlig aus. Dies macht es ideal für diejenigen, die nicht technisch versiert sind oder sich nicht mit komplexen Content-Management-Systemen auseinandersetzen möchten. Markdown-Dateien haben die Endung .md oder .markdown und können mit jeder Textverarbeitungs-Software geöffnet werden.

Markdown verwendet einfache Zeichen wie # für Überschriften, - für Listen und [Text](URL) für Links. Diese Zeichen werden dann durch einen Markdown-Interpreter in richtig formatiertes HTML umgewandelt, das in einem Webbrowser angezeigt werden kann.

# Markdown Beispiel

## Warum Markdown?

- Einfach zu verwenden
- Schnell
- Flexibel

## Schlussfolgerung

Das ist, warum ich Markdown liebe.[Mehr lesen](https://meinewebsite.com)

Hier findest du einen Cheat Sheet für die Syntax.

Warum Markdown statt WordPress?

Während WordPress ein mächtiges Tool mit zahlreichen Funktionen ist, bringt es auch eine gewisse Komplexität und Kosten mit sich.

Markdown hingegen bietet eine vereinfachte Lösung. Mit Markdown kannst du deine Inhalte direkt in einem Texteditor schreiben, ohne dich mit einer komplexen Benutzeroberfläche oder Plugins auseinandersetzen zu müssen. Außerdem ist Markdown leichtgewichtig und extrem schnell, was zu einer besseren Ladezeit und einer allgemein angenehmeren Benutzererfahrung führt.

Dank kostenlosen Hosting-Optionen wie GitHub Pages wird der gesamte Prozess des Onlinegehens noch einfacher und sicherer.

Github Pages

GitHub Pages ist eine ideale Plattform, um deine mit Markdown erstellte Website zu hosten. Mit nur wenigen Klicks kannst du ein neues Repository erstellen und deine Markdown-Dateien hochladen. GitHub Pages wandelt diese automatisch in eine Website um, die du sogar mit einer eigenen Domain personalisieren kannst.

Die Plattform ist nahtlos in Git integriert, was die Versionierung und Zusammenarbeit erleichtert. Zudem bietet sie die Zuverlässigkeit und Sicherheit von GitHub, einschließlich automatischem HTTPS. Insgesamt ist es eine einfache und kostenfreie Möglichkeit, deine Website online zu stellen.

Anleitung: Erstellung einer kostenlosen Webseite mit Markdown

Diese Anleitung ist so einfach wie möglich gehalten. Dennoch ist ein grundlegendes Verständnis für Englisch, HTML und Textbearbeitung erforderlich. Solltest du bei irgendeinem Schritt Hilfe brauchen melde dich gerne bei uns unter den Kontaktformular.

Du wirst lernen wie du folgende Seite erstellen kannst https://pages.codeforchange.de/

1. Ein GitHub-Repository anlegen

Wenn du noch keinen GitHub-Account hast, erstelle dir einen unter https://github.com/. Gehe dann zu https://github.com/new und wähle einen Namen für dein Repository.

Wenn du eine eigene Domain verwenden möchtest, kannst du den Repository-Namen frei wählen. Wenn du die kostenlose Domain von GitHub verwenden möchtest, sollte der Repository-Name dem folgenden Muster entsprechen: deingithubname.github.io. Alle weiteren Einstellungen können unverändert bleiben. Wichtig: Das Repository ist öffentlich. Lade keine sensiblen Daten hoch.

2. Index-Datei erstellen

Zum Erstellen einer einfachen Index Datei kannst du auf creating a new file klicken.

In diese Datei kannst du zum Testen etwas Markdown schreiben und so eine einfache Startseite erstellen.

Ist dein Markdown fertig, kannst du die Datei index.md benennen und die Änderungen committen. Das bedeutet, die index.md-Datei wird ins Repository hochgeladen. Hierzu einfach rechts auf Commit changes klicken.

3. GitHub Pages aktivieren

Ist dein Repository deingithubname.github.io benannt, ist GitHub Pages automatisch aktiviert und du kannst deine Seite unter dieser Domain aufrufen. Andernfalls öffne die Settings-Seite deines Repositories.

Im Abschnitt Pages wähle den main-Branch aus und klicke auf Save.

Deine Webseite ist nun unter deingithubname.github.io/repository-name erreichbar.

Du könntest hier bereits aufhören, wenn dir eine einfache Webseite genügt. In den folgenden Schritten erfährst du, wie du deine eigene Domain verwenden und ein ansprechendes Design durch die Verwendung eines Themes erzielen kannst.

4. Eigene Domain verwenden

Um deine eigene Domain zu nutzen, musst du bei deinem Domain-Registrar einen DNS-Eintrag vornehmen. Erstelle dazu einen CNAME-Eintrag, der auf deine deingithubname.github.io-Domain zeigt. Den Repository-Namen musst du dabei nicht angeben.

In den Pages Settings, die im vorherigen Schritt behandelt wurden, findest du den Abschnitt Custom domain. Trage hier deine Domain ein und GitHub prüft, ob der DNS-Eintrag erfolgreich war.

Wenn alles funktioniert hat, läuft deine Webseite unter der eingegebenen Domain. Durch das Aktivieren der Option Enforce HTTPS erhältst du zusätzlich ein kostenloses SSL-Zertifikat.

5. Design mit Astro verbessern

Für ein ansprechendes Design empfiehlt sich Astro, das eine Vielzahl an kostenlosen Themes hat. Astro ist ein Werkzeug zur Erstellung von statischen Webseiten, das sowohl HTML als auch Markdown unterstützt und daher ideal für GitHub Pages ist.

Unter https://astro.build/themes kannst du dir ein Theme aussuchen. Als einfaches Einstiegs-Theme empfehle ich das offizielle Blog Theme.

Für das Erstellen und Bearbeiten von Dateien für deine Webseite ist GitHub Codespace ideal. Klicke einfach auf Create codespace on main unter dem Code Menü.

Nachdem der Codespace geladen ist, lösche alle vorherigen Dateien und führe den folgenden Befehl im Terminal aus:

npm create astro@latest -- --template blog

Wenn du nach dem Projektordner gefragt wirst, gib ./ ein. Bei allen weiteren Fragen kannst du einfach die Enter-Taste drücken. Öffne als Nächstes die Datei astro.config.mjs und ersetze die example.com-Domain durch deine eigene.

Führe danach einen weiteren Commit durch. Klicke links im Menü auf das Verzweigungssymbol, dann auf das Plus neben den Changes. Schreibe einen kurzen Kommentar wie z.B. Astro Theme eingefügt und klicke dann auf Commit and Sync Changes.

Da wir gerade die CNAME-Datei gelöscht haben, musst du möglicherweise erneut deine eigene Domain eintragen, wie in Schritt 4 beschrieben.

Gehe danach in den Pages Settings zu GitHub Actions und klicke auf Create your own.

Ersetze den Code in der Datei durch den aus dieser Datei. Benenne die Datei in deploy.yml um und führe erneut einen Commit durch.

Nach dem Commit wird deine Webseite automatisch von GitHub erstellt und bereitgestellt. Du kannst sie dann unter deiner eigenen Domain aufrufen.

6. Inhalte mit Markdown verwalten

Nachdem deine Astro-Seite fertiggestellt ist, kannst du sie erneut in Codespaces öffnen.

Im Ordner src/pages findest du die Seiten für das Homeverzeichnis (index.astro) sowie für den “About”-Bereich (about.astro). Dort kannst du die HTML-Inhalte nach Belieben anpassen oder neue Seiten nach dem gleichen Schema wie die Vorhandenen erstellen.

Blog-Beiträge sind im Ordner src/content/blog zu finden. Du kannst das bestehende Markdown bearbeiten oder neue .md-Dateien für zusätzliche Beiträge erstellen.

Sobald du mit den Änderungen zufrieden bist, kannst du diese committen. Nach wenigen Minuten werden deine Änderungen automatisch auf der Webseite sichtbar.

Fazit

Wenn du auf der Suche nach einer unkomplizierten und kostengünstigen Möglichkeit bist, deine Website zu erstellen und zu hosten, dann ist der Ansatz mit Markdown und GitHub Pages genau das Richtige für dich. Markdown ermöglicht es dir, deine Inhalte auf äußerst benutzerfreundliche Weise zu verfassen, während GitHub Pages eine zuverlässige und kostenfreie Hosting-Lösung bietet.

Für diejenigen, die sich nicht mit komplexen Content-Management-Systemen wie WordPress herumschlagen wollen, bietet die Markdown-Methode eine vereinfachte, aber effektive Alternative. Sie ist nicht nur einfach zu erlernen, sondern auch blitzschnell, was sich positiv auf die Ladezeit und das Nutzererlebnis auswirkt.

Benötigst du zusätzliche Hilfe oder eine persönliche Beratung bei der Umsetzung? Wir sind immer für dich da. Nutze einfach unser Kontaktformular, um uns zu erreichen.