Jag var frustrerad med befintliga Hugo-teman och bestämde mig för att bygga ett eget. Här är hur jag gjorde det. Hugo är en statisk sajt-generator. Det innebär att den genererar HTML-filer från dina innehållsfiler och mallar. Dessa statiska filer kan sedan distribueras snabbt och säkert till vilken server som helst. Hugo är snabbt, säkert och ger dig full kontroll över din webbplats.
Varför Hugo?
Hugo erbjuder flera fördelar:
- Prestanda: Statiska webbplatser laddas snabbt.
- Säkerhet: Inga databaser eller dynamiskt innehåll minskar attackytan.
- Flexibilitet: Fullständig kontroll över kod och design.
- Enkel distribution: Statisk kod kan distribueras var som helst.
Förstå Behovet och Planera
Innan du skriver en enda rad kod, spendera lite tid på att fundera över vad du vill uppnå. I mitt fall fanns det ett behov av att publicera en personlig sajt med bloggfunktion. Att förstå varför du behöver ett tema är avgörande för att kunna fatta bra designval och undvika att bygga onödiga funktioner. Enkelhet är nyckeln.
- Syfte: Varför bygger du ett tema? Är det för ett specifikt projekt, eller för allmän användning?
- Funktioner: Vilka funktioner behöver ditt tema? Blogg? Portfolio? Dokumentation?
- Design: Hur ska ditt tema se ut? Skissa upp några idéer och samla inspiration.
- Målgrupp: Vem är det här temat för?
Struktur på Ett Hugo-Tema
Ett Hugo-tema är i grunden en katalog med specifika filer och mappar. Förståelsen för hur dessa filer interagerar är nyckeln till att skapa ett fungerande tema.
layouts/: Den viktigaste katalogen. Den innehåller mallar för olika sidtyper (hemsida, blogginlägg, delar, etc.). Här definierar du hur informationen ska visas.static/: För filer som inte behöver bearbetas av Hugo (bilder, CSS, JavaScript). Dessa filer kopieras direkt till den genererade webbplatsen.assets/: En underkatalog tillstatic/för dina CSS, JavaScript, grafik, och andra resursfiler. Detta hållerstatic-katalogen organiserad.hugo.yaml: Konfigurationsfil för ditt tema. Här ställer du in globala inställningar, metadata och andra viktiga parametrar. Exempel på inställningar: titel, basurl, språk, teman.
Exempelfil hugo.yaml
title: Min Personliga Webbplats
baseURL: https://www.minwebbplats.se
languageCode: sv-SE
theme: mitt-tema
Mallar - Grunden för Din Webbplats
Mallar definierar hur ditt innehåll ska visas.
baseof.html: Innehåller den grundläggande HTML-strukturen (doctype, head, body). Använd{{ define "main" }}och{{ end }}för att definiera området där ditt innehåll ska placeras. Denna main-sektion är en plats där du kan placera variabler, CSS och JavaScript som skall inkluderas i alla sidor.index.html: Används för att visa hemsidan. Den använder{{ .Content }}för att visa innehållet från index.md eller homepage.md.list.html: Används för att visa listor, till exempel bloggarkiv.single.html: Används för att visa enskilda blogginlägg eller andra sidor med detaljerat innehåll.
Exempelfil baseof.html
<!DOCTYPE html>
<html lang="{{ .Lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title }}</title>
</head>
<body>
<header>
<h1>{{ .Site.Title }}</h1>
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
<p>{{ now.Year }}</p>
</footer>
</body>
</html>
Exempelfil single.html
{{ define "main" }}
<h1>{{ .Title }}</h1>
<p>{{ .Date.Format "January 2, 2006" }}</p>
<article>{{ .Content }}</article>
{{ end }}
Anpassa med Render Hooks
Hugo tillhandahåller “render hooks” som låter oss anpassa hur olika element renderas. Tänk på dem som små plugins som kan ändra länkar, bilder eller andra element innan de visas på webbsidan. Till exempel, vi kan lägga till target="_blank" automatiskt till alla externa länkar för att öppna dem i en ny flik - vilket förbättrar användarupplevelsen! Dessa anpassningar görs i mappen layouts/_markup/.
Exempelfil layouts/_markup/render-link.html
{{- $t := "" -}}
{{- if strings.HasPrefix .Destination "http" -}}
{{- $t = "_blank" -}}
{{- end -}}
<a
href="{{- .Destination | safeURL -}}"
{{- with .Title }}title="{{ . }}"{{ end -}}
{{- with $t }}target="{{ $t }}"{{ end }}
>
{{- with .Text }}{{ . }}{{ end -}}
{{- if eq $t "_blank" -}}
<span style="font-size:smaller;">(Lämnar webbplats)</span>
{{- end -}}
</a>
{{- "" -}}
I det här exemplet kontrollerar vi om länken börjar med “http”. Om den gör det, lägger vi till target="_blank" och en text för att informera användaren att länken tar dem till en annan webbplats.
CSS och Styling - Skapa ett Responsivt Tema
Att skapa ett snyggt och responsivt tema kräver mer än bara HTML. CSS är grunden för all styling. En responsiv design ser till att din webbplats ser bra ut på alla enheter, från smartphones till stora datorer.
Använd semantisk HTML, ange ALT-texter för bilder, använd tillräckligt hög färgkontrast. Använd CSS Grid eller Flexbox för att skapa flexibla layouter. Använd media queries för att anpassa stilarna baserat på skärmstorlek.
Koda och fylla på med Innehåll
Nu är det dags att sätta igång och bygga ditt eget Hugo-tema! Man kan sedan använda Markdown för att skriva innehåll.
Manualen är din bästa vän! Kolla den regelbundet för detaljerade instruktioner och exempel.