Featured image of post Installeer Hugo website en publiceer deze gratis op GitHub-pages
Development </>

Installeer Hugo website en publiceer deze gratis op GitHub-pages

In dit artikel vertel ik je hoe ik Hugo op macOS heb geïnstalleerd en het gratis op GitHub heb gepubliceerd.

Maak gemakkelijk en snel je eigen HUGO website op MacOS en hoost deze gratis op GitHub-pages.

Hugo is een open-source website generator voor statisch website’s. Vaak heb je voor een kleine website’s helemaal niet een hele complexe website infrastructuur nodig met een front-end, back-end en database (bijv. WordPress).

In dit artikel neem ik je mee hoe ik Hugo heb geïnstalleerd op MacOS en deze gratis publiceer op GitHub. Wil je meer weten van Hugo en andere installatie mogelijkheden? Kijk dan op https://gohugo.io/installation/ Naast de installatie van Hugo vertel ik je ook hoe je het Hugo Theme Stack installeert van Jimmy Cai.

Let’s Go

De installatie van Hugo op MacOS doe je met Homebrew. Dit is een pakket manager voor MacOS of Linux. Wil je meer weten van Homebrew? Kijk dan op https://brew.sh/

STAP 1: Maar twee GitHub repositories aan.

Ga naar je GitHub account en maak daar twee repositories aan. Heb je nog geen account op GitHub maak die dan aan op GitHub.com.

1e Repository aanmaken

    1. Klik recht boven in GitHub op je profiel afbeelding
  2. Ga naar “Your repositories”
  3. Klik op “New”
  4. Maak je eerste repository aan en geef deze een naam. Maak je repository “Public”. Je hebt geen “README file” nodig. First Repository config Deze eerste repository bevat straks al je Hugo bestanden om de website te kunnen onderhouden.
  5. Klik op “Create repository”.

2e Repository aanmaken

    1. Klik recht boven in GitHub op je profiel afbeelding
  2. Ga naar “Your repositories”
  3. Klik op “New”
  4. De naam van de repository is hier belangrijk. Typr hier je GitHub URL. Dit is je nickname plus “.github.io” (nickname.github.io). Maak deze repository ook “Public”. Hier heb je wel een “README file” nodig. Second Repository config Deze tweede repository bevat straks je statische website bestanden.
  5. Klik op “Create repository”.

STAP 2: Open je Terminal op je Mac.

Voor de installatie maken we gebruik van je Terminal op je Mac. Deze open je op de volgende manier.

Open Terminal

  1. Open spotlight met “Command + spatiebalk“ op je Mac toetsenbord of klik rechts boven in op het vergrootglas.
  2. Typ in Spotlight “Terminal”
  3. Wanneer je “Terminal” ziet in de zoekresultaten, open je deze.

STAP 3: Xcode installeren

Xcode is een ontwikkelomgeving (IDE) voor het ontwikkelen van softwaretoepassingen voor iOS, iPadOS, macOS, WatchOS, tvOS en hoger. Het bevat een reeks tools waarmee ontwikkelaars software kunnen schrijven, debuggen en testen, en tools voor het beheren van projectbestanden en bronnen. Dit hebben we nodig om Homebrew goed te kunnen installeren. Dus installeer deze voor als je dit nog niet hebt.

Installeer Xcode

  1. Xcode installeer je met de volgende command in je Terminal.

    1

    xcode-select --install

  2. Bevestig dat je “Xcode” wilt installeren

  3. Ga akkoord met een licentieovereenkomst en wacht tot het installatieproces is voltooid. Dit kan soms even duren. Xcode

STAP 4: Homebrew installeren

Homebrem installeren doe je met één command en dat is onderstaande command. Kopieer dit command en plak deze in je “Terminal” en druk op “Enter”.

1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

STAP 5: Hugo installeren

Hugo installeren gaat ontzetten makkelijk en doe je ook met één command.

1

brew install hugo

STAP 6: Hugo site aanmaken

  1. Maak je Hugo website aan. aanpassen naar de naam van je website.

    1

    hugo new site <sitename>

  2. Ga naar de website map.

    1

    cd <sitenaam>

  3. Maak van je website een repository.

    1

    git init

  4. Voeg de bestanden toe.

    1

    git add .

  5. Bevestig de bestanden.

    1

    git commit -m "Add hugo site"

Tussen de haakjes zet je een omschrijven naar wens, bijv “Add Hugo site”.

  1. Zorg er voor dat je op de “Main” branch zit.

    1

    git branch -M main

  2. Koppel nu je eerste GitHub repository, (die je eerder hebt gemaakt) aan deze repository.

    1

    git remote add origin https://github.com/<NickNaam>/<RepositoryNaam>.git

  3. Push nu je repository naar GitHub

    1

    git push -u origin main

Nu zijn al je bestanden toegevoegd aan de eerste repository die je hebt aangemaakt op Github. dit kan even duren maar als je deze nu vernieuwd zie je de bestanden op Github.

STAP 7: Hugo Theme Stack installeren

Nu gaan we het theme “Stack” installeren van CaiJimmy. Wil je alles over dit theme weten en alternative installatie methoden? Kijk dan op https://stack.jimmycai.com/ De installatie van het theme doen ik middels een submodule.

  1. Installeer het theme in je Hugo website

    1

    git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

  2. Open je lokale website folder nu in een programma zoals Visual Studio Code. De folder is terug te vinden op het volgende path: MacHD/Gebruikers// Website folder path

  3. Kopieer nu uit de theme map het voorbeeld bestand “config.yaml” en plak deze in de hoofdmap. Dit bestand is te vinden in de map: themes/exampleSite/config.yaml Copy config.yaml file

  4. Verwijder het bestand “config.toml” uit de hoofd map.

  5. Pas in het bestabd “config.yaml” de “baseURL” aan naar je GitHub url van je tweede repository. Change Base URL

  6. Ga weer terug naar je Terminal en bekijk je website met een lokale webserver met het volgende command.

    1

    hugo server -D

  7. Je kan nu je website lokaal bekijken op het adres http://localhost:1313/

  8. Stop de lokale webserver weer met toetsencombinatie “Ctrl+C”

STAP 8: Zet je website live op GitHub-pages

Ga nu je website live zetten op GitHub-pages. Dit doen door je website te pushen naar je twee repository die je eerder hebt aangemaakt.

  1. Voeg eerst je tweede GitHub repository toe aan je Hugo website door een twee submodule toe te voegen in de map “ Public”.

    1

    git submodule add https://github.com/<NickNaam>/<RepositoryNaam>.git public

    Letop, je repository naam van je tweede GitHub repository moet de URL van je GitHub-pages zijn.

  2. Maak nu je statische website bestanden aan.

    1

    hugo -t hugo-theme-stack

  3. Ga naar de map “ Public”.

    1

    cd public

  4. Voeg de bestanden toe.

    1

    git add .

  5. Bevestig de bestanden.

    1

    git commit -m "First upload"

  6. Push nu je website naar GitHub.

    1

    git push

Als alles is goed gegaan zijn nu al je bestanden naar je GitHub gepushed. Deze worden nu automatisch deployed naar je GitHub-pages. Je website staat nu live en is te benaderen op je GitHub URL. Het kan even voor je website is deployed op GitHub.

Ja kan nu verder met het bewerken van je website en je eerste blog aanmaken als je dat nog niet hebt gedaan. In de theme map “exampleSite” staat onder de map “content” een aantal voorbeeld blogs. Mocht je meer wil weten over het aanpassen van het thema of de Hugo site? Kijk dan op https://stack.jimmycai.com/ of op https://gohugo.io/

Het staat je ook altijd vrij om mij te contacten. Je kan mij bereiken via LinkedIn of je kan mij een mail sturen, hello@tomalexander.io.

© 2023 Tom Alexander
Gemaakt met Hugo
Theme Stack ontworpen door Jimmy