Wie man eine Website mit Hugo auf Debian 11 erstellt
Hugo ist ein kostenloses und quelloffenes Website-Framework, das in Go entwickelt wurde. Hugo bietet einen zuverlässigen und modernen statischen Website-Generator, mit dem du einfach und schnell eine Website erstellen kannst. Es enthält vorgefertigte Vorlagen und andere Funktionen wie SEO, Kommentarfunktionen, Analysen und andere Funktionen. Hugo-Websites kommen ohne teure Laufzeitprogramme wie PHP, Python oder Ruby aus und brauchen keine Datenbank.
In diesem Beitrag zeigen wir dir, wie du den Hugo-Site-Generator unter Debian 11 installierst und benutzt.
Voraussetzungen
- Ein Server, auf dem Debian 11 läuft.
- Ein Root-Passwort ist auf dem Server eingerichtet.
Installiere Hugo unter Debian 11
Standardmäßig ist das Hugo-Paket im Standard-Repository von Debian 11 enthalten. Du kannst es mit dem folgenden Befehl installieren:
apt-get install hugo -y
Sobald Hugo installiert ist, kannst du die Hugo-Version mit folgendem Befehl überprüfen:
hugo version
Du solltest die folgende Ausgabe erhalten:
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)
Eine Website mit Hugo erstellen
In diesem Abschnitt werden wir eine neue Website mit dem Namen hugo.example.com erstellen.
Führe den folgenden Befehl aus, um eine Website zu erstellen:
hugo new site hugo.example.com
Sobald die Website erstellt ist, solltest du die folgende Ausgabe erhalten:
Congratulations! Your new Hugo site is created in /root/hugo.example.com. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme " command. 2. Perhaps you want to add some content. You can add single files with "hugo new /.". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
Mit folgendem Befehl kannst du alle von Hugo erstellten Dateien auflisten:
ls -l hugo.example.com
Du erhältst die folgende Ausgabe:
drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes -rw-r--r-- 1 root root 82 Nov 13 09:27 config.toml drwxr-xr-x 2 root root 4096 Nov 13 09:27 content drwxr-xr-x 2 root root 4096 Nov 13 09:27 data drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts drwxr-xr-x 2 root root 4096 Nov 13 09:27 static drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes
Eine Über-Seite und einen Beispielbeitrag erstellen
Wechsle zunächst mit folgendem Befehl in das Verzeichnis deiner Website:
cd hugo.example.com
Als Nächstes erstellst du eine Info-Seite mit dem folgenden Befehl:
hugo new about.md
Du erhältst die folgende Ausgabe:
/root/hugo.example.com/content/about.md created
Als Nächstes bearbeitest du die Seite about.md mit dem folgenden Befehl:
nano content/about.md
Ändere die Datei wie unten gezeigt:
--- title: "About Us" date: 2021-11-13T09:28:18Z draft: false --- This is About Us page for this website.
Als Nächstes erstellst du einen Beispielbeitrag mit folgendem Befehl:
hugo new post/page.md
Du erhältst die folgende Ausgabe:
/root/hugo.example.com/content/post/page.md created
Als Nächstes bearbeitest du die Seite mit dem Beispielbeitrag mit folgendem Befehl:
nano content/post/page.md
Ändere die Datei wie unten gezeigt:
--- title: "Page" date: 2021-11-13T09:29:29Z draft: true --- # Hugo Page This is my first hugo website page!
Speichere und schließe die Datei, wenn du fertig bist.
Themes auf deiner Website installieren
Als Nächstes musst du ein Theme herunterladen und einrichten, um auf deine Hugo-Website zugreifen zu können.
Wechsle zunächst mit dem folgenden Befehl in das Verzeichnis themes:
cd themes
Dann lädst du das Hugo-Theme mit folgendem Befehl herunter:
wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
Als Nächstes entpackst du das heruntergeladene Theme mit dem folgenden Befehl:
unzip master.zip
Benenne das entpackte Thema mit folgendem Befehl um:
mv hugo-strata-theme-master hugo-strata-theme
Als Nächstes kopierst du den Inhalt der config.toml in die config deiner Website.
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
Als Nächstes bearbeitest du die Datei config.toml mit dem folgenden Befehl:
nano ../config.toml
Füge die folgenden Zeilen hinzu / ändere sie:
baseurl = "/" [[menu.main]] name = "About" url = "about" weight = 5
Speichere und schließe die Datei und erstelle dann eine index.html-Datei für deine Website:
cd ../ nano layouts/index.html
Füge die folgenden Zeilen hinzu:
{{ define "main" }}
{{ if not .Site.Params.about.hide }}
{{ partial "about" . }}
{{ end }}
{{ if not .Site.Params.portfolio.hide }}
{{ partial "portfolio" . }}
{{ end }}
{{ if not .Site.Params.recentposts.hide }}
{{ partial "recent-posts" . }}
{{ end }}
{{ if not .Site.Params.contact.hide }}
{{ partial "contact" . }}
{{ end }}
{{ end }}
Speichere und schließe die Datei.
Erstelle und starte deine Website
Jetzt musst du deine Website erstellen, um sie nutzen zu können. Du kannst sie erstellen, indem du den folgenden Befehl ausführst:
hugo
Du erhältst die folgende Ausgabe:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 8
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Total in 48 ms
Als Nächstes startest du den Hugo-Server und bindest ihn mit dem folgenden Befehl an deine Server-IP:
hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F
Du erhältst die folgende Ausgabe:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Built in 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop
Jetzt ist der Hugo-Server gestartet und lauscht auf Port 1313.
Zugriff auf die Hugo-Website
Öffne nun deinen Webbrowser und rufe deine Website unter der URL http://your-server-ip:1313 auf. Du solltest die Standardseite von Hugo sehen:
Klicke auf “ Über“ im linken Fensterbereich. Auf dem folgenden Bildschirm solltest du deine Über-Seite sehen:
Fazit
Glückwunsch! Du hast Hugo erfolgreich installiert und eine Website unter Debian 11 erstellt. Jetzt kannst du mit Hugo ganz einfach eine sichere und schnelle Website erstellen.