Ylivuotoblogi v2 - paluu ysärille

Aiemmassa postauksesanni selostin Directus CMS:n ja Next.js:n avulla Headless-arkkitehtuurin varaan rakennetun blogialustan taustaa. Tässä postauksessa tutustutaan huomattavasti kevyempään ratkaisuun, HUGO web-sivugeneraattoriin.

Miksi vaihdoin teknologioita?⌗

Teknologian vaihdos tuli mieleen lähinnä siitä syystä, että halusin kokeilla jotain kevyempää ja helpompaa blogialustaa. Directus + Next.js combo on erinomainen oppimisprojekti, mutta se vaatii melko paljon työtä ja ylläpitoa. HUGO puolestaan tarjoaa yksinkertaisen tavan luoda ja hallita blogia ilman monimutkaisia palvelinpuolen käsittelyjä. Strategiani siis oli, että otan käyttöön SSG:n (staattinen sivugeneraattori), siihen jonkin valmiin teeman ja tarjoilen sisällön saataville Nginx:n avulla perinteiseen web-julkaisutyyliin. Tällä paletilla pystyisin ylläpitämään blogialustaa kevyesti ilman Javascriptiä, ilman hienoa web-ohjelmointikehystä tai konttiteknologiaa.

Kaikesta tästä innostuneena, ajattelin tässä artikkelissa esitellä todellisen keittiöhakkerin blogialustan.

Blogialustan teknologiapino⌗

Kerrataan pikaisesti vanhan blogialustan teknologiapino:

• Ubuntu Server 22.04 LTS virtuaalipalvelin
• Nginx web-palvelin käänteisenä välityspalvelimena (reverse proxy)
• Docker
• PostgreSQL tietokanta
• Directus CMS
• Next.js käyttöliittymä

Tästä lyhyenä yhteenvetona todettakoon, että yksittäiselle blogialustalle tämä on melko raskas teknologiapino. Toisaalta, kunhan paletin saa pystytettyä, ei ylläpito välttämättä vaadi älyttömästi vaivannäköä. Itse kuitenkin törmäsin jatkuvasti siihen, että palvelimen boottauksen yhteydessä Next.js kontti ei ollut saanut viimeisintä sisältöä ladattua Directus-kontista ja sivustolla paistui näkyvillä placeholder-sisältö. Itse sisällöntuotanto oli kohtuullisen suoraviivaista Directuksen ansiosta, mutta siinäkin oli omat kikkansa monikielisyyspalvelujen ja tekstieditorin kanssa.

Uusi teknologiapino HUGO blogialustalle on huomattavasti kevyempi:

• Ubuntu Server 22.04 LTS virtuaalipalvelin
• Nginx web-palvelin staattisille HTML-sivuille

Siinä kaikki. Uuden sivuston teknologiapino korreloi nyt huomattavasti paremmin itsesivuston sisällön ja tarkoituksen kanssa. Web-ohjelmointi opit on siis otettu talteen ja Ylivuoto-blogi on palauttanut itsensä 90-luvun lopun ja 2000-luvun alun yksinkertaisten HTML-sivujen aikaan. Joku voi pitää sitä taantumuksellisena puuhasteluna, mutta väitän että nykyaikaisen SSG:n ja aina legendaarisen SCP:n tai SFTP:n avulla staattisen sisällön tarjoaminen on oikeastaan aika suoraviivaista ja käytännöllistä.

Staattinen sivugeneraattori (SSG)⌗

Sivuston julkaisutoiminta pohjautuu siis staattiseen sivugeneraattoriin (SSG). Mutta mitä se tarkoittaa? Käytössäni on Hugo (lisätietoja: https://gohugo.io/), staattinen sivugeneraattori, joka tarjoaa suoraviivaisen tavan luoda ja hallita verkkosivustoja. Staattiset sivugeneraattorit eroavat perinteisistä sisällönhallintajärjestelmistä (CMS) siinä, että ne luovat valmiit HTML-sivut etukäteen, jotka voidaan sitten tarjoilla millä tahansa web-palvelimella ilman tarvetta dynaamiselle sisällön lataukselle. Periaatteessa niiden voidaan ajatella palauttavan web-sivustojen rakentaminen aikaan, jolloin sivut olivat yksinkertaisesti nivaska HTML-tiedostoja. Toisaalta, Wordpressin kaltaiset sisällönhallintajärjestelmät tallentavat myös osia sivustolla näytetystä datasta etukäteen, mutta oleellisesti ne luovat sivut dynaamisesti käyttäjän pyynnöstä, mikä vaatii palvelinpuolen käsittelyä ja tietokantakyselyitä. Tämä tekee niistä joustavia ja helppokäyttöisiä, mutta samalla ne voivat olla hieman yliampuvia esim. yksinkertaisen blogisivuston ylläpitoon.

Hugon toimintaperiaate⌗

Hugo toimii komentorivipohjaisen käyttöliittymän kautta. Itse suosittelen Hugoa käytettväksi Linuxilla (kuinkas muuten), mutta sitä voi käyttää myös muilla käyttöjärjestelmillä. Käyttäjät voivat luoda ja hallita sisältöä Markdown-tiedostoina, jotka Hugo sitten muuntaa HTML-sivuiksi. Tämä prosessi on nopea ja tehokas, koska se ei vaadi monimutkaista palvelinpuolen käsittelyä. Käytännössä kaikki tieto blogipostauksista, sivuista ja muusta sisällöstä tallennetaan yksinkertaisina tekstitiedostoina omalla tietokoneellesi.

Hugo luo siis hakemistorakenteen, jossa on kansiot eri sisältötyypeille ja sivuston teemalle eli ulkoasulle ja oleellisesti se myös luo tiedoston sivuston konfigurointia varten. Hugo tarjoaa myös mahdollisuuden hallita sivuston käännöstiedostoja ja sivustoprojektin hakemistorakenne on muutenkin mahdollista sopeuttaa kompleksisempien sivustojen hallintaa varten.

Nyt on pitkään mainostettu Hugon yksinkertaisuutta, joten katsotaan vielä lopuksi, miten sisältöä luodaan Hugolla.

1. Uuden sivuston luominen⌗

Tämä komento luo kuvan mukaisen hakemistorakenteen.

hugo new site uljas-sivustoni

2. Teeman lisääminen⌗

Esim. virallinen “Ananke”-teema:

cd uljas-sivustoni
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

3. Sitten teema konfiguraatioon⌗

theme = "ananke"

4. Ensimmäisen sisällön luominen⌗

hugo new posts/ensimmainen-artikkeli.md

Tämä komento luo tiedoston content/posts/ensimmainen-artikkeli.md, jossa on etukenttä (front matter):

+++
title = "Ensimmäinen artikkeli"
date = 2025-10-19T00:00:00Z
draft = true
+++

5. Generoidaan HTML sivusto julkaistavaksi⌗

Hugon sivuston rakennuskomento on lyhyt ja ytimekäs:

hugo

6. Julkaisu⌗

Edellinen komento luo hakemistorakenteeseen kansion nimeltään public/. Kaikki public/ hakemiston sisältö voidaan siirtää web-palvelimelle (esim. Nginx) tarjottavaksi.

Yhteenveto⌗

Hugo on suoraviivainen ja tehokas työkalu staattisten verkkosivustojen luomiseen. Se vaatii jonkin verran asentamista ja konfigurointia, mutta on huomattavasti helpompi ja yksinkertaisempi kuin monet muut sisällönhallintaant käytettävät järjestelmät. Sen käyttö toki vaatii jonkin verran nörttiasennetta ja hakkerinhattua, mutta käyttö on nopea oppia ja kaikkeen löytyy hyvät ohjeet Hugon kotisivuilta. Susosittelisin Hugoa kaikille, joille ohjeiden lukeminen ei tuota päänsärkyä eikä komentorivi pelota, ja jotka ovat kiinnostuneita kokeilemaan jotain erilaista.