So baust du in nur 15 Minuten eine fast unhackbare, kostenlose Webseite

kostenlose-webseite-mit-go-und-hugo2.jpg
 

Deine WordPress Plugins sind schon wieder alle nicht mehr auf dem neusten Stand und deine Sicherheitslücken scheunentorgroß?

  • Du willst eine Webseite, die extrem sicher ist?

  • Du willst eine Webseite, die dir keine Kosten verursacht?

  • Du willst eine Webseite, die du nicht pflegen musst?

  • Du willst die Webseite mit den schnellsten Ladezeiten?

  • Die willst trotzdem die volle Kontrolle über deine Webseite?

    Dann bist du hier genau richtig!

 

Los geht’s!

Was du benötigst:

  • 15 Minuten Zeit

  • Einen Computer (Ich arbeite mit macOS, aber du kannst auch Linux oder mit kleinen Abänderungen Windows verwenden)

  • Ein wenig Erfahrung mit der Kommandozeile ist hilfreich, aber nicht zwingend

  • Einen Text- bzw. Codeeditor, z.B. Atom

Übersicht:

Wir bauen heute deine erste eigene Webseite oder Blog mit Hugo.

Hugo ist ein sogenannter Static-Site-Generator.

Das bedeutet, dass aus dynamischen Inhalte, (z.B. Blogartikel) automatisch statische HTML Seiten generiert werden, die du dann im Netzt hostest. Das hat viele Vorteile: Eine reine HTML Seite hat die schnellstmöglichen Ladezeiten beim Aufrufen deiner Seite. Außerdem ist deine so gebaute Seite mit Abstand das Sicherste, was du als Webseite ins Netz stellen kannst.

Hugo ist in der Programmiersprache Go geschrieben.

Wir hosten die Seite auf Gitbub.com. Das ist nicht nur kostenlos, sondern deine Seite wird weltweit auf verschiedenen Servern mittels eines sehr leistungsstarken CDN (Content-Delivery-Network) ausgeliefert und ist auch für einem Ansturm von Millionen Nutzern gewappnet.

Mit diesem Setup ist das ganze komplett fertig und kann von dir als professionelle Webseite oder Blog für viele verschiedene Zwecke eingesetzt werden. Nur eine individuelle Domain bräuchtest du noch, falls du es wünschst.

 
 

Hugo klar machen

Da Hugo in der Programmiersprache Go geschrieben ist benötigen wir diese Programmiersprache um das Programm zu nutzen und müssen dann den Quellcode von Hugo kompilieren.

Aber du hast Glück: Das geht ganz einfach mit Homebrew.

Öffne deine Kommandozeile, deinen Terminal. Du findest ihn beim Mac unter den Dienstprogrammen (Finder > Gehe zu > Dienstprogramme > Terminal) oder ganz einfach in der Spotlight-Suche (CMD + Leertaste) und „Terminal“ eingeben.

gopher-rackete.png
 

Gib nun folgenden Befehl in deinen Terminal ein:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Hat alles geklappt?

Dann stellen wir sicher, dass brew und alle Formeln wirklich auf dem neusten Stand sind.

brew update

Jetzt installieren wir Go und Hugo und kompilieren Hugo, so dass wir ein ausführbares Programm erhalten. Und das alles mit nur einem Zauberspruch:

brew install hugo

Schau am besten kurz nach, ob wirklich alles geklappt hat.

hugo version

Dort sollte dir nun die Versionsnummer von Hugo und Informationen zu deinem Betriebssystem angezeigt werden.

 

Neues Projekt mit Hugo erstellen

Hugo hat eine nützliche Funktion um dir ein brauchbares Grundgerüst für deine Webseite automatisch als Vorlage zu erstellen.

Aber Ordnung muss sein! Es ist sinnvoll, dass du einen eigenen Ordner für deine Programmierprojekte anlegst. Falls du schon einen hast, wechsle jetzt in das Verzeichnis.

Ansonsten erstelle zunächst einen Ordner, zum Beispiel mit dem Namen „Development”.

mkdir ~/Development

Dies erstellt einen leeren Order „Development“ in deinem Benutzerordner.

Wechsle nun in das neu erstellte Verzeichnis:

cd ~/Development

Hier wollen wir jetzt dein neues Webseitenprojekt basteln.

Gib dazu den nachfolgenden Befehl ein. Du kannst statt „meine_webseite“ auch einen eigenen Wunschnamen vergeben.

hugo new site meine-webseite

Hurrah! Deine Webseite ist erstellt.

 

Theme installieren

Damit deine Webseite auch im Browser irgendwie dargestellt wird, benötigst du ein Theme. Hugo kommt mit einem recht schicken Standardtheme daher.

Wechsel zunächst in das Verzeichnis deiner Hugo Webseite.

Das geht ganz einfach mit diesem Befehl:

cd meine-webseite

Wir installieren jetzt das Theme und aktivieren es dann in der Konfigurationsdatei von Hugo (config.toml).

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Jetzt müssen wir das Theme in der config.toml aktivieren. Dazu kannst du die Datei einfach mit einem Texteditor öffnen oder sie aus dem Terminal in die Datei einfügen lassen.

Und das geht so:

echo 'theme = "ananke"' >> config.toml
 

Dein erster Blogpost

Deine Seite ist aber noch ganz leer - mega langweilig.

Also lass uns deinen ersten Blogpost erstellen:

hugo new posts/mein-erster-blogpost.md

Du findest den erstellten Blogpost im Ordner content/posts.

Du kannst die Datei ganz einfach mit folgendem Befehl öffnen, wenn du Atom installiert hast (siehe oben oder hole dir Atom ganz einfach von https://atom.io/).

atom content/posts/mein-erster-blogpost.md

Setzte die Einstellung für Draft auf „false“.

draft: false

Füge anschließend folgenden Bloginhalt unterhalb der beiden Striche ein:

![Alt text](https://picsum.photos/id/455/800/600)

Es war einmal ein kleiner Junge, und der hieß Häwelmann; des Nachts schlief er in einem Rollenbett und auch des Nachmittags, wenn er müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in der Stube umherfahren, und davon konnte er nie genug bekommen. Nun lag der kleine Häwelmann eines Nachts in seinem Rollenbett und konnte nicht einschlafen, die Mutter aber schlief schon lange neben ihm in ihrer großen Bettstelle; die hatte aber vier ganz steife Beine und auch gar keine Rollen, denn es war eine Himmelbettstelle. Mutter, rief der kleine Häwelmann, ich will fahren! und die Mutter langte im Schlaf den Arm aus dem Bett, und rollte die kleine Bettstelle hin und her, immer hin und her; und wenn ihr der Arm müde werden wollte, so rief der [25] kleine Häwelmann. Mehr, mehr! und dann ging das Rollen wieder von Neuem an. Endlich aber schlief sie gänzlich ein, und so viel Häwelmann auch schreien mochte, sie hörte es nicht. Es war rein vorbei. - Da dauerte es nicht lang, so sah der Mond in die Fensterscheiben, der gute alte Mond; und was er da sah, war so possierlich, daß er sich erst mit seinem Pelzärmel über das Gesicht fuhr, um sich die Augen auszuwischen; so etwas hatte der alte Mond all sein Lebetage nicht gesehen. Da lag der kleine Häwelmann mit offenen Augen in seinem Rollenbett, und hielt das eine Beinchen wie einen Mastbaum in die Höhe; sein kleines Hemd hatte er ausgezogen und hing es wie ein Segel an seiner kleinen Zehe auf; dann nahm er ein Hemdzipfelchen in jede Hand und fing mit beiden Backen an zu blasen; und allmählich leise, leise fing es an zu rollen, über den Fußboden, dann die Wand hinauf, dann kopfüber die Decke entlang und dann die andere Wand wieder hinunter. Mehr, mehr! schrie Häwelmann, als er wieder auf dem Boden war; und dann blies er wieder seine Backen auf, und dann ging es wieder kopfüber und kopfunter. Es war ein großes Glück für den kleinen Häwelmann, daß es grade Nacht war und die Erde auf dem Kopf stand; sonst hätte er doch gar zu leicht den Hals brechen können.


__- Aus: Der kleine Häwelmann von Theodor Storm__

Nice!

 

Ein Logo für den Header

Jetzt ersetzen wir nur noch den langweiligen Schriftzug im Header durch ein cooles Logo und dann hast du es geschafft!

Ich hab’ da mal eins vorbereitet:

Das Logo findest du hier: Datei: logo.png

Lad es einfach runter (rechte Maustaste, speichern unter…)

Schiebe die Datei in den Ordner static in deinem Projektverzeichnis.

Jetzt müssen wir die Datei noch in deinem Webseiten Theme einbauen.

Öffne dazu die Datei site-header.html im Vereichnis themes/layouts/partials/.

 atom ~/meine-webseite/themes/ananke/layouts/partials/site-header.html

Ersetze die den Abschnitt

<h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
          {{ .Title | default .Site.Title }}
        </h1

in Zeile 25 durch

<img src="logo.png" alt="Logo">
 

Et voilà !

 
screencapture-localhost-1313-2019-10-05-15_56_52.png
 

Nicht schlecht oder?

Ab ins Internet

Jetzt wollen wir die Seite im Internet veröffentlichen.

Dazu sind zwei Schritte notwendig:

  1. Generieren der statischen Webseite

  2. Hochladen auf Github

Generieren der statischen Webseite

Derzeit läuft bei dir auf dem Computer der lokale Hugo Testserver. Aber wir wollen die Seite ja ins Internet stellen.

Der Clou an der Sache war ja folgender: Wir wollen keinen eigenen Server betreiben, wir wollen noch nicht einmal dynamische Inhalte ins Internet stellen (wie zum Beispiel eine Wordpress Blog, der die Inhalte dynamisch aus eine MySQL Datenbank generiert - nein, wir wollen einzig und alleine statische HTML Webseite veröffentlichen.

Das ist nicht nur die sicherste Möglichkeit eine Webseite zu hosten, es ist auch die schnellste!

Wir müssen zunächst die statischen Dateien mit Hugo generieren.

Dafür gibt es zum Glück - genau! - einen Befehl.

Er lautet:

hugo

Deine Webseite wurde im Unterverzeichnis „public“ erstellt. Wechsle nun in das Verzeichnis und lass dir eine Liste der Dateien anzeigen.

cd public && ls

Du solltest jetzt die index.html deiner Webseite und weitere Dateien und Ordner aufgelistet bekommen.

 

Dateien hochladen

Du benötigst einen Account auf https://github.com.

Registriere dich einfach kostenlos, falls du noch keinen Account hast.

Folge der Anleitung auf der Github und erstelle ein neues Repository mit dem Namen username.github.io, wobei du username mit deinem GitHub Benutzernamen ersetzt.

(Dieser Schritt ist wichtig, damit die Verknüpfung mit GitHub Pages richtig funktioniert.)

 
Klingt komisch - ist aber so.

Klingt komisch - ist aber so.

 
 

Dateien pushen

Du benötigst Git auch auf deinem lokalen Rechner.

Hast du noch nicht? Aber du hast brew. Installiere damit ganz einfach Git, falls du es noch nicht hast.

brew install git

Vergewissere dich noch einmal, ob du im richtigen Verzeichnis (public) bist…

pwd

…oder wechsle in das Verzeichnis mit:

cd ~/Development/meine-webseite/public/

Jetzt initiiere ein neues Git Repository:

git init

Sauber!

Jetzt verknüpfen wir dein lokalen Repository mit dem Repository auf GitHub.

Ersetze dabei den von dir oben eingegebenen Repositorynamen.

git remote add origin https://github.com/username/username.github.io.

Jetzt müssen wir Git nur noch sagen, welche Dateien in der Verzeichnis „getrackt“ und hochgeladen werden sollen.

Ganz einfach: Alle!

git add .
git commit -m "Initial Commit"
git push -u origin master

HOSSA!

Wenn du auf <username>.github.io gehst, siehst du deine Webseite und deinen ersten Blogpost.

 
 
 

Wie geht’s weiter?

Deine Seite sieht schon besser aus als manch andere und ist auch viel sicherer und schneller. Aber vielleicht willst du deine Webseite jetzt weiter individualisieren und nach deinen ganz persönlichen Wüschen gestalten.

Hier hast du ein paar Ideen dafür:

  1. Installiere dir ein anderes Theme
    Es gibt eine Tonne an echt starken und kostenlosen Themes für Hugo da draußen: https://themes.gohugo.io/

  2. Erstelle eine „Über mich“ Seite
    Dafür eignet sich eine „Page“ besser als ein Blogpost.
    Die Anleitung dazu findest du hier: https://gohugo.io/templates/single-page-templates/

  3. Bau ein Favicon ein

    Ein Favicon ist die Grafik, die du oben in deinem Browsertab siehst. Du kannst aus deinem Logo mit einem Favicon Generator kostenlos ein Favicon generieren. Füge die Datei dann in deinen „static“ Ordner ein und verlinkte sie in deiner „config.toml“.

GESCHAFFT!

Hast du Fragen? Hat bei dir alles geklapp?

Ich freue mich über dein Feedback.

Wenn du irgendwo nicht weiter kommst, versuche ich gerne dir zu helfen.

Geheimtipp

Wenn du deinen bestehenden Blogpost mal eben schnell ändern möchtest, kannst du das auch ganz einfach im Browser in deinem Git Repository machen.

Aber Achtung: Du solltest dann dein lokales Git Repository auch aktualisieren, damit es zu keinem Kuddelmuddel kommt.

git pull origin master
 

Sicherheitstipps

Deine Webseite ist über das Web kaum angreifbar, es gibt zum Beispiel weder eine Datenbank die mögliche SQL-Injektionen ermöglicht, noch gibt es die Möglichkeit Skripte serverseitig auszuführen (zum Beispiel ein PHP Skript).

Die größte Schwachstelle ist dein Passwort. Am besten nutzt du ein sicheres Passwort aus mindestens 30 Stellen, das aus einer zufälligen Kombination aus Zahlen, kleinen und großen Buchstaben und Sonderzeichen besteht.

Außerdem solltest du am besten Multi-Faktor-Authentisierung aktivieren.

Das ganze ist aber nur so sicher, wie das Gerät von dem du dich einloggst.

Damit niemand deine Logindaten abgreifen kann, solltest du dein Passwort am besten nicht im Browser speichern und regelmäßig deine Cookies und deinen Cache löschen (am besten nach jeder Session). So stellst du sicher, dass niemand deine gespeicherte Login-Session abgreifen und missbrauchen kann.