Beteg voltam, az elmúlt 2 hétben hideg és borús volt az időjárás, összességében elég rossz. Ezúttal nincsenek fotók, helyette van néhány megjegyzés arról, hogyan működik ez az oldal, és miért létezik egyáltalán.
A miért
Már régóta játszottam a gondolattal, hogy legyen egy személyes blogom, ahol megoszthatom a gondolataimat és az otthoni projektjeimet, de nem volt meg sem az akarat, sem a tartalom mennyisége, ami indokolná egy teljes blog szükségességét, tárhelyekkel és a többivel együtt. Az elmúlt néhány hónapban azonban a dolgok megváltoztak. Van egy drónom. Mindig is valamennyire hobbifotós voltam, a jobb képeim nagy részét a Facebookon és az Instagramon osztottam meg. A drónnal azonban a videóké a főszerep. De hol osszam meg őket? A Facebookon a 720p felbontással és alig 1Mbit bitrátával? Az Instagramon a furcsa Reels dologgal? A YouTube-on a sok reklámmal? Jobb lenne, ha közvetlenül egy kis VPS-ről szolgáltatnám ki őket.
Pontosan ezt tettem, és egy ideig így is maradt. A jó öreg NGINX Auto index. A videók gyors felhalmozódásával azonban kezdett nagyon rendezetlenné válni. Miért ne rendezhetnénk őket valami esztétikusabbá? Mint valami galéria. Vagy blog.
A hogyan
Miután elfogadtam a tényt, hogy szükségem van egy “blogra”, elkezdtem mindenféle kész, saját tárhelyen működő blogmotorokat és tartalomkezelő rendszereket nézegetni. Valami könnyű, gyors és könnyen testreszabhatót akartam, ami nagyjából mindent kizár. Amire szükségem volt, az egy statikus oldal volt, néhány szép JS és CSS elemmel, mivel nem akartam semmilyen szerveroldali funkciót, mint a kommentelés és hasonlók. Nem akartam továbbá több tíz-száz HTML-el bajlódni, és mindet megváltoztatni, ha a fejlécet egy picit jobbra akarom pozícionálni. Valami olyasmire van szükségem, mint egy “statikus oldal generátor”. Kiderült, hogy ez egy létező dolog.
Az első, ami tetszett, a Hugo volt. Gyorsan és könnyen beállítható, van hozzá néhány szép sablon, és nagyon jól testreszabható. A Golangon alapul, amivel van némi tapasztalatom a sötét középkorból, de nem voltam magamban biztos. Emellett nem akartam újra Golang környezetet telepíteni. Így jött a Hexo, a Hugo JS-alapú kistestvére. Gyorsan találtam egy szép kezdő sablont is (Element, amit az igényeimnek megfelelően módosítottam: Módosítottam a rácsokat, hozzáadtam egy galéria nézetet, kijavítottam néhány furcsa oldalsáv viselkedést, optimalizáltam a sötét mód kapcsolóját, és fotóközpontúvá tettem.
Az előlap
A Hexo segítségével az írott tartalom Markdown formátumban van tárolva, ami tökéletesen megfelel az igényeimnek. Minden fájlban van egy kis fejléc, ahol megadhatom a metaadatokat, például a poszt címét és dátumát, a releváns címkéket és a galériát JSON formátumban. Miután a sablon “kész”, már csak a tartalom miatt kell aggódnom. Ezután az összes HTML-t a fő sablonból generálja, ami azt jelenti, hogy ha valamit változtatnom kell a kinézetén, nem kell kézzel módosítanom minden egyes oldalon.
A hátoldal
A galéria nézet generálása egy Hexo script és egy JSON meta tag segítségével történik a poszt fejlécében. Ez alapvetően egy URL-ek listája néhány flaggel, amivel beállítható, hogy videóról, panorámáról vagy egyszerű képről van-e szó.
Mivel a képek útvonala ismert, a képek reszponzivitása könnyen kezelhető. Van néhány bash script a VPS-en, amely automatikusan átméretez minden képet két különböző méretre, az ImageMagick segítségével:
- maximum 500x500 pixel az előnézetekhez.
- maximum 4000x4000 pixel a nézőképernyő számára.
- a HD gomb megnyomásával az eredeti kép is elérhető a néző számára.
A panorámaképek egy kicsit trükkösebbek. Mivel az általam a nézegetőhöz használt könyvtár (A-frame) 2:1 képarányú képeket igényel az egyenszögű nézethez, ezért felülről kell kipótolnom őket. Ez azért van, mert a drón nem tud felfelé nézni. Ezt meg lehetne csinálni összefűzéskor, de ezek még azelőtt készültek, hogy erre rájöttem volna. Tehát jön egy másik szkript, ami ezt csinálja, szintén ImageMagick. Ezek aztán szintén három különböző méretre vannak átméretezve:
- maximum 500x500 pixel az előnézeti képekhez.
- maximum 8000x8000 pixel a képnézegetőhöz.
- maximum 16384x16384 pixel a HD nézethez - ez a Meta Quest hardver korlátozása volt, mivel azt akartam, hogy ezek VR-ben is megtekinthetők legyenek. Ez a maximális felbontás, amit a webről támogat. Még mindig nem működik megfelelően, bár, így lehet, hogy inkább az eredetit küldöm vissza.
A videók még trükkösebbek, és az én részemről is nagy mulasztás. Azt akartam, hogy a videók a lehető legjobb minőséget tartsák fenn a lehető legkisebb lábnyom mellett. Ezért konvertálom az összes drónvideómat H265/HEVC-be. Ez egy hosszadalmas folyamat, de megéri. Alig észrevehető minőségromlás hihetetlen helytakarékossággal. A probléma a DRM. Kiderült, hogy csak az nézheti a H265-ös verziót, akinek van H265 licenc a gépén. Ez azt jelenti, hogy Windowson 0,99 dolláros kiegészítő vásárlás, Macen Safari és ki tudja, hogy más eszközökön mi. Én erre csak mostanában jöttem rá, mert nekem megvan a licenc, így gond nélkül lejátszódik minden. Minden videónak két változata van, az egyik a fent említett H265-ös verzió, a másik pedig a maximális 1920x1080-as felbontású H264-es verzió. Ez az, amit bárki meg tud nézni. (Megjegyzés: próbáltam az AV1-et is, hasonló korlátozásokkal a böngészőben.) A konvertálások az otthoni gépemen történnek, annak erős AMD processzorával. Van egy kis szkript is, ami minden videóból kivesz egy miniatűr képet kb. 1 másodpercnél.
A host
Ez volt a legegyszerűbb rész. Már volt egy VPS-em az ATW-től, amit különböző szolgáltatásokhoz használok (amiről később talán bővebben is beszámolok). Az oldalakat NGINX-szel hostolom, ahogy a képeket/videókat is. Ez utóbbiak egy aldomainről vannak hostolva, nem igazán tudom, miért csináltam így, de most tetszik, így marad. A VPS-nek 2 tárolási szintje van, egy kisebb NVME lemez, ahol az oldalakat tárolom, és egy nagy HDD tárhely, ahol a képek és videók vannak elhelyezve. A hostok kimenő sebessége azonban nem a legjobb, a megosztott HDD tömb sebességével kombinálva elkerülhetetlen volt a videók némi pufferelése. Ennek enyhítése érdekében azt tettem, amit mindenki tesz, és Cloudflare-t használtam a tárhely és a domain között. Szépen cache-eli, amire szükség van, és ingyenes, mi másra van szükségem?