Freude an der Technik • Hugo: einfach eine statische Webseite generieren

Seite 1 von 1

Hugo: einfach eine statische Webseite generieren

Verfasst: 25 Mai 2025, 20:33

von asp

Habe auf meinem Desktoprechner "hugo" installiert und möchte mit Markdown eine einfache Webseite einrichten, welche automatisch auf meinem lokalen Test-Webserver läuft, welchen ich momentan im Browser unter "192.168.31.21:8085" aufrufen kann. Das Webdirectory auf dem entfernten Rechner heisst "nginx-php-server/html" in meinem Home-Verzeichnis "/home/asp"

Code: Alles auswählen

hugo new site aspweb-test
cd aspweb-test

Ein Theme von Hugo Themes wählen. Beispiel mit dem "Ananke"-Theme:

Code: Alles auswählen

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

Erste Webseite mit Hugo editieren

Code: Alles auswählen

nano content/posts/aspweb-test.md

Code: Alles auswählen

hier ein Beispiel von mir
+++
date = '2025-05-25T17:50:19+02:00'
draft = false
title = 'aspweb'
+++

Das ist **meine erste Webseite** mit Hugo

Jetzt müssen wir noch die Vorlagen generieren

Code: Alles auswählen

nano layouts/posts/index.html

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
    <title>{{ .Site.Title }}</title>
</head>
<body>
    <h1>{{ .Site.Title }}</h1>
    <ul>
        {{ range where .Site.RegularPages "Type" "posts" }}
            <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
        {{ end }}
    </ul>
</body>
</html>

Code: Alles auswählen

nano layouts/posts/single.html

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
    <title>{{ .Title }} | {{ .Site.Title }}</title>
</head>
<body>
    <article>
        <h1>{{ .Title }}</h1>
        {{ .Content }}
    </article>
</body>
</html>

Code: Alles auswählen

nano layouts/posts/_default/single.html

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
    <title>{{ .Title }} | {{ .Site.Title }}</title>
</head>
<body>
    <article>
        <h1>{{ .Title }}</h1>
        {{ .Content }}
    </article>
</body>
</html>

Erste statische Webseite generieren

Code: Alles auswählen

hugo --minify

und schon liegt die statische generierte Webseite bei meinem Desktop-Rechner unter **/home/asp/aspweb-test/public** bereit, also kopieren wir den Ordner noch auf unseren Test-Webserver (bei mir ein RapberryPi Zero V1.1 mit nginx-Webserver)

Auf Testwebserver kopieren

Code: Alles auswählen

rsync -avz --delete public/ [email protected]:/home/asp/nginx-php-server/html

Seite auf dem Webserver mit einem Webbrowser von meinem Desktop-PC aufrufen
PS. mein Test-Webserver hat die IP 192.168.31.21 und läuft auf Port 8085

Code: Alles auswählen

192.168.31.21:8085

Jetzt sollte dir deine neue Webseite angezeigt werden

: aspweb.png (216.67 KiB) 21663 mal betrachtet

Wenn du keinen Webserver hast, kannst du auch einen virtuellen Webserver starten

Code: Alles auswählen

hugo server --bind=0.0.0.0 --baseURL=http://localhost:8085 --port=8085

und mit dem Webserver wie folgt aufrufen

Code: Alles auswählen

localhost:8085

Hast du noch Fragen, dann melde dich einfach!