Aan de slag on Hugo Codex

1. Hugo installeren

Mon, 01 Jan 0001 00:00:00 +0000

Er zijn heel veel manieren om Hugo te installeren. Het mooie aan Hugo is dat installeren heel simpel is/kan zijn. Het komt eigenlijk allemaal op hetzelfde neer:

Op Windows download je de Windows-versie (tar.gz), pak je hem uit in je projectmap en start je ‘hugo server’ vanaf de command line. Op een Mac download je de MacOS-versie (tar.gz), pak je hem uit in je projectmap en start je ‘hugo server’ vanaf de command line. Op een Linux-machine installeer je Hugo door ‘sudo apt install hugo’ te typen. Ga daarna naar je projectmap en start ‘hugo server’ vanaf de command line. Wil je de nieuwste versie, dan kun je het .deb-bestand downloaden en met hetzelfde commando installeren (vervang ‘hugo’ door de naam van je .deb-bestand).

2. Wat HTML maken

Mon, 01 Jan 0001 00:00:00 +0000

Nu Hugo geïnstalleerd is, beginnen we met een hele simpele webpagina. Eerst moet je twee bestanden maken. Maak eerst een leeg bestand met de naam ‘hugo.yaml’. Maak daarna een bestand met de naam ‘home.html’ met wat simpele HTML:

<html>
<head></head>
<body>
    Dit is een hele simpele webpagina
</body>
</html>

Het bestand ‘hugo.yaml’ zet je in de root van je project en het bestand ‘home.html’ in een map met de naam ’layouts’. Je project ziet er nu zo uit:

3. Je eerste content toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Nu we een ‘index.html’ bestand hebben, gaan we de code van de content scheiden. Hugo gebruikt hiervoor Markdown. Alle content wordt opgeslagen in ‘.md’ (Markdown) bestanden in een map ‘content’ in de root van je project. Maak een Markdown-bestand met de naam ‘_index.md’ dat er zo uitziet:

---
title: Mijn eerste contentbestand
---
Mijn eerste alinea in Markdown

Sla het bestand op in de map ‘content’. Pas nu je ‘/layouts/home.html’ bestand aan, zodat het er zo uitziet:

4. Je eerste partials gebruiken

Mon, 01 Jan 0001 00:00:00 +0000

Een website bestaat meestal uit een paar onderdelen die op elke pagina terugkomen, zoals een header met een menu en een footer. In plaats van die aan elke pagina toe te voegen, kun je een ‘partial’ gebruiken. Partials moeten opgeslagen worden in de map ‘/layouts/_partials’.

Maak een bestand ‘header.html’ dat er zo uitziet:

<html>
<head></head>
<body>

Maak een bestand ‘footer.html’ dat er zo uitziet:

</body>
</html>

Sla beide bestanden op in de map ‘/layouts/_partials’. Werk nu je ‘/layouts/home.html’ bestand bij en zorg dat het er zo uitziet (vervang de code door links naar de partials):

5. Nog een contentbestand toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Onze website begint vorm te krijgen ;-). Maar we missen nog een nette contactpagina. Om die te maken, maken we een bestand ‘/content/contact.md’. Dat bestand ziet er zo uit:

---
title: Contactpagina
---
Stuur me een e-mail op joost@vdschee.nl

We hadden al een layoutbestand (home.html), maar dat bestand gold alleen voor de homepage. Daarom hebben we nu een tweede bestand nodig. Dat bestand mag een exacte kopie van ‘home.html’ zijn en moet je ‘page.html’ noemen. Dit bestand sla je op in de map ‘/layouts/’.

6. Een blog toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Elke website heeft een nieuwssectie of een blog. Daarom gaan we een map ‘posts’ aan onze contentmap toevoegen. In deze nieuwe map maken we een markdown-bestand met de naam ‘hello-world.md’, ons eerste bericht. Dat bestand ziet er zo uit:

---
title: Hallo wereld
date: 2016-02-01 10:00:00
---
Dit is mijn eerste blogbericht

De datum moet de huidige datum zijn. De tijd is optioneel. Daarnaast gaan we een (nieuw) layoutbestand toevoegen voor ons blogoverzicht (een lijstweergave van onze berichten). Hugo eist dat je dit bestand ‘section.html’ noemt en in de map ’layouts’ opslaat. Dit bestand ziet er zo uit: