Host je eigen website met Hugo, Github en Azure

2024/03/17

Hessel van Es

Heeft uw hostingprovider ook recentelijk zijn prijzen aanzienlijk verhoogd, of is dat alleen bij mij het geval? Dit jaar stegen de jaarlijkse kosten voor het hosten van mijn website, die ik als freelancer nodig heb, van €37 naar €85; dat is een verhoging van meer dan 100%! Afgezien van het feit dat dit veel geld is, zette de manier waarop deze kostenstijgingen werden gecommuniceerd mij aan het denken en ging ik andere opties overwegen.

De direct beschikbare optie: Azure en Hugo

Aangezien ik als ontwikkelaar sterk gefocust ben op Azure, leek het verplaatsen van mijn website naar dit cloudplatform een logische stap. Ik heb al een Azure subscription en ben over het algemeen zeer bedreven met Azure. Bij het bekijken van mijn opties voor het maken van de website zelf, kwam ik enkele YouTube-video’s tegen met betrekking tot het gebruik van het Hugo-Framework. Dit framework sprak me aan omdat:

  1. Het genereert een statische website, wat zorgt voor goede prestaties.
  2. Het gebruikt markdown voor de inhoud.
  3. Het integreert goed met GitHub en Azure (met behulp van een Azure Static Web App).

Het maken van de website

Het maken van een nieuwe website is zeer eenvoudig met Hugo en bestaat eigenlijk uit:

  1. Het installeren van Hugo en Git
  2. Het kiezen en installeren van een thema
  3. Het bewerken van het configuratiebestand naar uw wens
  4. Het toevoegen van inhoud, wat in zijn meest eenvoudige vorm betekent dat u een paar markdown-bestanden maakt.

Natuurlijk is er de mogelijkheid om de website persoonlijker te maken door het thema te wijzigen of nieuwe inhoudstypen te maken. Al deze opties worden gedocumenteerd op de Hugo-website. Persoonlijk ben ik begonnen met het maken van een website met het Coder-thema, wat ik nog steeds erg leuk vind, maar uiteindelijk ben ik overgestapt naar het thema dat u momenteel ziet, wat het Tella-thema is. Dit proces werkte erg goed voor mij. Na het maken van de eerste website (en deze te hebben verwijderd, omdat ik niet helemaal het gewenste uiterlijk kon krijgen), wist ik precies wat ik wilde. Daarom was de tweede poging binnen enkele uren klaar. Uw proces kan echter verschillen, misschien lukt het u bij de eerste poging.

Het publiceren van de website

GitHub Hier komt het leuke (en vrij eenvoudige) deel; het aan de praat krijgen van de website in Azure. Zoals hierboven vermeld, omvat de installatie van Hugo ook het installeren van Git. Bovendien bevindt uw nieuwe website zich, als u de snelle start volgt, al binnen zijn eigen Git-repository. De volgende stap is nu om deze Git-repo naar een GitHub-repository te pushen, doe dit door een nieuwe repository aan te maken (maak een account aan als u er geen heeft). Voeg vervolgens de URL van de nieuwe GitHub-repository toe aan uw lokale Git-repo als een externe door te typen: git remote add origin url_van_github_repository En push nu uw code naar de nieuwe repository door te typen: git push –set-upstream origin naam_van_uw_branch_hier

Uw code is nu naar uw nieuwe repository gepusht en is klaar voor gebruik. U zou de code moeten kunnen bekijken en zien in het GitHub-portaal.

Azure Nu gaan we naar de Azure Portal. Maak opnieuw een nieuw account aan als u er geen heeft, en we gaan een nieuwe statische web-app toevoegen. Deze pagina legt de betrokken stappen vrij grondig uit, het komt er in feite op neer:

  1. Maak een Azure Static Web App aan
  2. Koppel deze aan de eerder gemaakte GitHub Repository
  3. Stel de Build Setting in op Hugo
  4. Wacht terwijl uw website wordt voorbereid
  5. (optioneel) Verander de DNS voor uw domeinnaam om door te verwijzen naar uw nieuwe website.

En dat is in feite alles wat nodig is, u moet mogelijk enkele instellingen wijzigen, maar uw website zou nu moeten werken. Snelle tip: als u merkt dat sommige afbeeldingen of CSS niet doorkomen, controleer dan de BaseURL in uw configuratie, deze moet overeenkomen met de URL van uw Azure Static Web App.

Kostenvoordeel

Als u de bovenstaande handleiding heeft gevolgd, heeft u misschien gemerkt dat de Hugo-website goed werkt op het Free Tier van de Azure Static Web App. Dit betekent dat ik €85 per jaar zal besparen. Dit is voor mij belangrijk omdat deze stap grotendeels werd gemotiveerd door de kostenstijging van mijn bestaande/vorige hostingprovider. Afgezien van dit voordeel vind ik ook de technische implementatie met Hugo, Git en Azure veel gemakkelijker te gebruiken, dit is dus een succesvolle implementatie zowel technisch als financieel.