Kuidas me lahendasime ituk.ee sisuhalduse ilma sisuhaldussüsteemita

Ma ei ole just eriline Wordpressi ja muude sisuhaldusüsteemide fänn. Kui ma peaks oma ema panema mingit lehte haldama, siis ma ilmselt lahendaks selle mingi sisuhaldussüsteemiga, aga kuna https://ituk.ee lehte haldavad ainult IT-tudengid, siis ei ole meie lahendus kindlasti neile takistuseks ning palju väiksema vaevaga saab teha palju suuremaid muudatusi.

Miks me sisuhaldussüsteemi ei kasuta?

Tegelikult olid valikus küll paar headless CMS-i. Need CMSid pakkusid sisu kuvamiseks ainult REST liidest. Kuid samas tahtsime me hoida oma lehe siiski võimalikult kiirena ja kuna üksi neist CMS-idest ei oleks mugavust oluliselt parandanud, otsustasime ka nendest loobuda.

Mis stacki peal meie leht siis on?

Kogu lehe lähtekood ise asub täiesti avalikult siin: https://github.com/ituk-ttu/ituk.ee/. Nagu ilmselt mõned juba aru saavad, siis see ei ole nüüd päris see kood, mida meie server sinu brauserile saadab. Küll aga toimub kogu sisu muutmine sealt.
Kasutusel on meil selline stack:

  • Jade, mis kompileeritakse HTML-iks (tegelikult on Jade juba ammu asendatud Pug-iga, aga ma olen laisk ja ei ole viitsinud uuendada)
  • LESS, mis kompileeritakse CSS-iks (sellel põhjusel ei kasutanud ma ka betas olevat Bootstrap 4-ja, seal enam LESS-i ei kasutata ja jällegi, ma olen laisk ja ei viitsinud SASS-i ära õppida)
  • Vue.js (väga mugav ja kiire ka väikeste rakenduste jaoks ning kuna ma olen pikalt Angularjs-i kasutanud, siis õppimine oli kiire)
  • Gulp on taskrunner, mis arenduskeskkonnas jälgib kõiki lähtekoodi faile ja kompileerib need iga uue muudatusega uuesti ning produktsioonis kompileerib lihtsalt pärast lähtekoodi uuendamist
  • NPM, et Bootstrap-i LESS-i failid oleks olemas

Kuidas inimesed lehele muudatusi teevad

Sisu jaoks on meil eraldi Githubis src/content kaust, kus on lehtede sisud.
Nende muutmiseks on kaks viisi:

  • Need, kes ei viitsi või ei taha või ei oska Git-i kasutada, saavad võtta Githubis lahti faili mida muuta tahavad ja seal muudatused sisse viia.
  • Need, kes tahavad ka enne laivi lükkamist muudatusi näha, võtavad endal lehe lähtekoodi näiteks IntelliJ-s lahti, kirjutavad käsureale gulp ja panevad build kaustas käima mingi veebiserveri. Mina näiteks kasutan PHP sisse-ehitatud veebiserverit (php -S localhost:8000). Pärast muudatusi ctrl+k, et commit teha, kirjutan mingi kommentaari enda tehtud muudatuste kohta ja vajutan commit & push.

Mis juhtub kui muudatused pushida

Githubil pole vahet, kas tehakse päris push või tehakse muudatused tema veebiliidesest, igal juhul on meil lisatud repositooriumile webhook, mis pushi peale saadab meie serverisse päringu. Päring jõuab meil analoogse PHP skriptini:

<?php
$secret = "somethingsomething";
$headers = getallheaders();
$hubSignature = $headers['X-Hub-Signature'];
list($algo, $hash) = explode('=', $hubSignature, 2);
$payload = file_get_contents('php://input');
$payloadHash = \hash_hmac($algo, $payload, $secret);
if ($hash == $payloadHash) {
    chdir("/var/ituk.ee");
    shell_exec('git pull origin master');
    shell_exec('npm install');
    shell_exec('gulp compile');
    error_log("Success\n\n", 3, "/var/log/deploy/ituk.ee.log");
} else {
    error_log("Failed\nGot signature: " . $hash . "\nExpected: " . $payloadHash . "\n\n", 3, "/var/log/deploy/ituk.ee.log");
    http_response_code(403);
}

Ja lõpuks viibki see lihtne skript kõik need muudatused laivi.