Hugo von Grund auf selber ohne theme-ananke

Beitrag von **asp** » 21 Aug 2025, 07:44

Hugo-Webseite-machen

: Forum-Freude-an-der-Technik.png (32.59 KiB) 20429 mal betrachtet

Möchte hier beschreiben, wie man mit Hugo eine statische Webseite meine-webseite erstellen kann.
Meine Webseite soll folgendes Grundgerüst haben:
Soll eine Startseite index.html und 4 weitere Seiten haben:

Code: Alles auswählen

├── archetypes
│   └── default.md
├── assets
├── config.toml
├── content        //in diesem Ordner wird die Webseite editiert
│   ├── _index.md         //Markdown Startseite
│   ├── ki.md             //Markdown ki: Künstliche Intelligenz
│   ├── os.md             //Markdown os: Betriebssysteme
│   ├── pc.md             //Markdown pc: Rechnetr
│   └── pr.md             //Markdown pr: Projekte
├── data
├── i18n
├── layouts
│   ├── _default
│   │   └── single.html   //Struktur der Einzelseiten
│   ├── index.html        //und hier die Struktur der Startseite
│   └── partials          //Aufbau der 4 Sektionen meiner Webseiteeite
│       ├── aside.html    //zweite Zeile links: hier habe ich einige Links    
│       ├── footer.html   //zweite Zeile rechts: hier wird mein Marktdown-Text angezeigt
│       ├── header.html   //erste Zeile links: hier ist mein Bild
│       └── nav.html      //erste Zeile rechts: hier habe ich die Navigation
├── static
│   ├── bilder            //in diesem Ordner sind die Bilder
│   │   └── technik.png 
│   └── styles
│       ├── menu.css      //css für die Einzelseiten
│       └── style.css     //css für Startseite
└── themes

Nachdem Hugo installiert ist kann man mit dem Befehl

Code: Alles auswählen

hugo new site meine-webseite

das Grundgerüst der Webseite erstellen und dann mit dem Befehl

Code: Alles auswählen

cd meine-webseite

in den von Hugo erzeugten Ordner wechseln. Die Ordnerstruktur sieht nun wie folgt aus:

Code: Alles auswählen

├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

Jetzt erstellen wir eine Konfiguration

Code: Alles auswählen

rm hugo.toml
nano config.toml

Code: Alles auswählen

aseURL = "/"
languageCode = "de" 
title = "Freude an der Technik" 
theme = ""

Weitere Anpassungen
Ordner für Bilder und css-styles erstellen

Code: Alles auswählen

mkdir static/bilder
mkdir static/styles

und die Bilder für die Webseite und die css-Dateien in die zwei Ordner kopieren.

Ich habe zwei css-dateien
style.css für die Startseite

Code: Alles auswählen

html {
    font-family: Monospace,Verdana, Lato, Helvetica, Roboto, sans-serif
}
p {
    color: DarkBlue; /* Farbe */
}
h4 {
    color: green; /* Farbe */
}
body {
    gap: 0.5em;
    margin: 0.5em auto;
    max-width: 60em;
    display: grid;
}
@media (min-width: 30em) {
    body {
        grid-template-columns: auto auto;
    }
}
header,
nav,
article,
aside,
footer {
    border-radius: 0 0.5em 0.5em;
    border: thin solid;
    padding: .5em;
    margin: .5em;
}
header {
    background: #F1F3F4;
    border-color: #d5d5d5;
}
nav {
    background: #fffbf0;
    border-color: #e7c157;
}
article {
    background: #ffede0;
    border-color: #df6c20;
}
aside {
    background: #ebf5d7;
    border-color: #8db243;
}
footer {
    background: #e4ebf2;
    border-color: #8a9da8;
}

und menu.css für die übrigen Seiten

Code: Alles auswählen

html {
    font-family: Monospace,Verdana, Lato, Helvetica, Roboto, sans-serif
}
p {
    color: DarkBlue; /* Farbe */
}
h4 {
    color: green; /* Farbe */
}
body {
    gap: 0.5em;
    margin: 0.5em auto;
    max-width: 60em;
    display: grid;
}
@media (min-width: 30em) {
    body {
        grid-template-columns: auto;
    }
}
header,
nav,
article,
aside,
footer {
    border-radius: 0 0.5em 0.5em;
    border: thin solid;
    padding: .5em;
    margin: .5em;
}
header {
    background: #F1F3F4;
    border-color: #d5d5d5;
}
nav {
    background: #fffbf0;
    border-color: #e7c157;
}
article {
    background: #ffede0;
    border-color: #df6c20;
}
aside {
    background: #ebf5d7;
    border-color: #8db243;
}
footer {
    background: #e4ebf2;
    border-color: #8a9da8;
}

Vorlagen definieren
index.html für die Startseite

Code: Alles auswählen

nano layouts/index.html

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>{{ .Title }}</title>
  <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
  {{ partial "header.html" . }}
  {{ partial "nav.html" . }}
  {{ partial "aside.html" . }}
  {{ partial "footer.html" . }}
</body>
</html>

single.html für die übrigen Seiten

Code: Alles auswählen

mkdir layouts/_default/
nano layouts/_default/single.html

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>{{ .Title }}</title>
  <link rel="stylesheet" href="/styles/menu.css">
</head>
<body>
  {{ partial "nav.html" . }}
  {{ partial "footer.html" . }}
</body>
</html>

Struktur & Templates definieren
aside.html für Sektor "aside"

Code: Alles auswählen

mkdir layouts/partials/
nano layouts/partials/aside.html

Code: Alles auswählen

<!-- layouts/partials/aside.html -->
<aside>
<div class="aside-content">
  <ul>
    <a href="https:\\aspweb.ch\forum\">#Forum</a>
    <br><br>
    <a href="https://www.xing.com/profile/Andreas_Spaeti">#Kontakt</a>
    <br><br>
    <a href="https://chat.deepseek.com">#KI DeepSeek</a>
    <p>© Andreas Späti<br>  [email protected]</p>
  </ul>
</div>
</aside>

footer.html für Sektor "footer"

Code: Alles auswählen

nano layouts/partials/footer.html

Code: Alles auswählen

<!-- layouts/partials/footer.html -->
<footer>
{{ if .IsHome }}
  {{ with site.GetPage "home" }}
    {{ .Content }}
  {{ end }}
{{ else }}
  {{ with .Params.footer }}
    {{ with site.GetPage (printf "%s.md" .) }}
      {{ .Content }}
    {{ end }}
  {{ else }}
    <p>Standard-Footer</p>
  {{ end }}
{{ end }}
</footer>

header.html für Sektor "header"

Code: Alles auswählen

nano layouts/partials/header.html

Code: Alles auswählen

<!-- layouts/partials/header.html -->
<header>
<a href="https://aspweb.ch/forum/"><img src="/bilder/phpBB.png" alt="Forum Hilfe" width="240"></a>
</header>

nav.html für Sektor "nav"

Code: Alles auswählen

nano layouts/partials/nav.html

Code: Alles auswählen

<!-- layouts/partials/nav.html -->
<nav>
  <h1><a href="/">aspweb.ch</a> hat Freude an der Technik</h1>
  <table style="text-align: left; width: 100%;" cellpadding="2" cellspacing="2">
    <tbody>
      <tr>
        <!-- <td><a href="/"><img src="../bilder/homek.png" alt="Home" width="38"></a></td> -->
        <td><a href="/os/"><img src="../bilder/osk.png" alt="Betriebssysteme" width="38"></a></td>
        <td><a href="/ki/"><img src="../bilder/kik.png" alt="Künsliche Intelligenz" width="38"></a></td>
        <td><a href="/pc/"><img src="../bilder/pck.png" alt="Rechnerarchitekturen" width="38"></a></td>
        <td><a href="/pr/"><img src="../bilder/prk.png" alt="Projekte" width="38"></a></td>
        <td><a href="https://aspweb.ch/forum/" target="_blank"><img src="../bilder/helpk.png" alt="zurück" width="38"></a></td>
      </tr>
    </tbody>
  </table>
</nav>

Markdown-Texte im content _index.md für Startseitentext

Code: Alles auswählen

nano content/_index.md

Code: Alles auswählen

---
title: "Startseite"
footer: "os"
---
© 2025 meine Seite – erstellt mit **Hugo** und ❤️ für Linux

ki.md für Seite "Künstliche intelligenz"

Code: Alles auswählen

nano content/ki.md

Code: Alles auswählen

---
title: "KI"
footer: "ki"
---
# KI: Künstliche Intelligenz

os.md für Seite "Betriebssysteme"

Code: Alles auswählen

nano content/os.md

Code: Alles auswählen

---
title: "OS"
footer: "os"
---
# OS: Betriebssysteme

pc.md für Seite "Rechner"

Code: Alles auswählen

nano content/pc.md

Code: Alles auswählen

---
title: "PC"
footer: "pc"
---
# PC: Rechner

pr.md für Seite "Projekte"

Code: Alles auswählen

nano content/pr.md

Code: Alles auswählen

---
title: "PR"
footer: "pr"
---
# PR: Projekte

Webserver Starten
Jetzt können wir **meine-webseite** starten

Code: Alles auswählen

hugo server -D

und mit dem Webserver mit der URL testen

Code: Alles auswählen

localhost:1313/

Die statische Webseite "meine-webseite" findet man nun unter

Code: Alles auswählen

meine-webseite/public

und kann somit einfach auf einen Webserver kopiert werden.

Die "index.html" Seite editiert man z.B. mit retext unter

Code: Alles auswählen

retext meine-webseite/content/_index.md

oder mit "vim"

Code: Alles auswählen

vim meine-webseite/content/_index.md

und die Einzelseiten, z.B. Künstliche Intelligenz unter

Code: Alles auswählen

vim meine-webseite/content/ki.md

Ich wünsche viel Vergnügen und Erfolg beim Webdesign.

LG Res