Első bejegyzés - Hugooo!
- Webdev
- 2025. február 14.
Tartalomjegyzék
Ez az első bejegyzésem. Kiégtem a WordPress fejlesztéstől, és teljesen kiábrándultam a “blokkszerkesztőkből”. Tagadhatatlan, hogy gyorsan és egyszerűen lehet velük oldalakat építeni, mégis úgy érzem, hogy ez egy zsákutca. Szerintem a WordPress rossz irányba halad, bár open-source közösségi projektként továbbra is meghatározó szereplője a CMS-piacnak. Ha a közösség időben reagál a kihívásokra, még hosszú ideig a felszínen maradhat.
Mindezek fényében úgy érzem, szükségem van valamire, ami számomra még új, de már elég kiforrott ahhoz, hogy ne pazaroljam vele az időmet: SSG (Static Site Generation).
Blokkfóbia
A blokkszerkesztők, a pluginekkel túlterhelt oldalak és az előre gyártott page builder elemek mind a WP ökoszisztéma részei. Bizonyos esetekben hasznosak is, hiszen az emberek gyors és egyszerű megoldásokat keresnek – csak egy CMS kell nekik, ahová beírhatják a kis történetüket, feltölthetik az eladó bizbaszaikat (WooCommerce), majd továbblépnek. Ez rendben is van.
Viszont egy régi motorosnak, aki már sokféle IT témába belemászott, feltűnik, hogy valami nagyon nincs rendben. Elég csak egy WordPress-oldal forrásába belenézni: div > div > div > div… egy végtelen mélységű fekete lyuk, tele DIV-ekkel és persze a SPAN-okkal! :)
Nem akarok rögtön fejest ugrani az ismeretlenbe, hiszen én is még csak tanulom ezt az egészet. Ezen a weboldalon szeretném dokumentálni a tanulási folyamatomat, amelynek első lépése ennek a Hugo alapú oldalnak a felépítése. A site a GitHubról fut, Netlify-n hostolom, és ezen a csodálatosan, 13 eurós domainen lesz elérhető.
De mivel más dolgokkal is foglalkozom – Open Journal Systems, DSpace, CentMinMod stb. – ezekről is írni fogok, hogy a háború és a többi agysorvasztás kevésbé húzzon le a mélybe.
SSG (Static Site Generation) – Statikus Weboldal Generálás
A Static Site Generation (SSG) egy olyan módszer, amelyben a weboldalak előre generált HTML fájlokként készülnek el, még mielőtt a felhasználó lekérné őket. Ez azt jelenti, hogy a szerveren nem fut dinamikus kód minden egyes lekérésnél, hanem a weboldal előre renderelve, statikus fájlok formájában érhető el.
Hogyan működik az SSG?
- Fejlesztési fázis – A fejlesztő létrehozza az oldal sablonjait és adatforrásait.
- Build fázis – Egy build folyamat generálja a végleges HTML fájlokat az összes oldalhoz.
- Deploy – Az elkészült statikus fájlok egy webkiszolgálóra vagy egy CDN-re kerülnek.
- Kliensoldali megjelenítés – A felhasználók azonnal betöltik a kész HTML fájlokat, minimális várakozással.
Előnyök
- Gyors betöltési sebesség – Mivel nincs szükség szerveroldali feldolgozásra minden egyes lekéréskor, az oldalak gyorsan töltődnek be.
- Biztonság – A statikus oldalak nem futtatnak szerveroldali kódot, így kisebb a támadási felület.
- Költséghatékony – Az SSG alapú weboldalak könnyen hosztolhatók ingyenes vagy olcsó CDN-szolgáltatásokon.
- SEO-barát – Az oldalak teljesen generált HTML-ként érhetők el, ami előnyös a keresőmotorok számára.
Hátrányok
- Kevésbé dinamikus – Nehézkes valós idejű adatok megjelenítése (pl. felhasználói interakciók vagy frissítések).
- Build idő – Nagy weboldalaknál hosszú lehet az előre generálás ideje.
- Adatfrissítés kezelése – Ha egy tartalom frissül, újra kell generálni az egész oldalt vagy annak érintett részeit.
SSG-t támogató népszerű keretrendszerek
- Next.js – React alapú keretrendszer, amely támogatja az SSG-t és az ISR-t (Incremental Static Regeneration).
- Gatsby – GraphQL-alapú statikus generátor React-hez.
- Hugo – Rendkívül gyors, Go nyelven írt statikus oldal generátor.
- Jekyll – Ruby-alapú generátor, amely népszerű a GitHub Pages-en.
Mikor érdemes SSG-t használni?
- Blogok, dokumentációk, portfólió oldalak
- SEO szempontból optimalizált oldalak
- Alacsony frissítési igényű weboldalak
- Gyors és költséghatékony weboldalak készítéséhez
Összegzésként: Az SSG egy kiváló megoldás a gyors, biztonságos és SEO-barát weboldalak készítésére, azonban érdemes mérlegelni a dinamikus tartalom frissítésével járó nehézségeket
Miért választottam a Hugót?
1. Villámgyors teljesítmény
- Mivel a Hugo Go-ban íródott, rendkívül gyors. Egy teljes oldalstruktúrát másodpercek alatt képes felépíteni, még több ezer oldal esetén is.
- Nem igényel külön szervert vagy adatbázist, csak statikus fájlokat generál.
2. Egyszerű telepítés és használat
Én a Hugoplate nevű starter sablont használtam, mert ez tűnt a legjobb alapnak a saját projektemhez. Három dolgot kellett hozzá telepítenem:
A Hugo Extended a Hugo kibővített verziója, amely további funkciókat kínál a fejlettebb webfejlesztéshez. Elsősorban azoknak ajánlott, akik SCSS/SASS támogatást és resource pipeline funkciókat szeretnének használni.
| Funkció | Hugo | Hugo Extended |
|---|---|---|
| Statikus oldal generálás | ✅ | ✅ |
| Markdown támogatás | ✅ | ✅ |
| Témák és sablonok | ✅ | ✅ |
| SCSS/SASS támogatás | ❌ | ✅ |
| Asset Pipeline (CSS/JS minifikáció, transpile, fingerprinting) | ❌ | ✅ |
| Image Processing (képmanipuláció, optimalizálás) | ✅ | ✅ |
3. Beépített tartalomkezelés
- Markdown alapú tartalomkezelést használ, így könnyen szerkeszthetők a szövegek.
- Támogatja a taxonómiákat (kategóriák, címkék), rövid kódokat (shortcodes) és automatikus SEO-optimalizálást.
4. Rugalmas sablonrendszer
- Go templating rendszert használ, amely gyors és testreszabható.
- Számos ingyenes sablon (theme) érhető el, amelyeket könnyen adaptálhatsz a saját projektedhez.
5. Kiváló SEO és teljesítmény
- Mivel statikus fájlokat generál, a betöltési sebesség gyors, ami előnyt jelent SEO szempontból.
- Könnyen beállítható metaadatok, OpenGraph és Schema.org támogatás.
Amint látjátok nagyon erős a Hugo barátom és nem kell hozzá egy egész PowerEdge szerver, mint az általam is üzemeltetett Wordpress rendszerekhez. Apropó! Tárhely, szerver! A most látható projekhez elég egy GitHub és egy Netlify account.
A Netlify egy felhőalapú hosztolási és automatizációs platform, amelyet kifejezetten statikus weboldalak számára terveztek. Egyszerűvé teszi a weboldalak telepítését, skálázását és karbantartását, miközben gyors teljesítményt és fejlett fejlesztői eszközöket kínál.
Miért érdemes Netlify-t használni?
- Egyszerű telepítés – GitHub, GitLab vagy Bitbucket repo csatlakoztatásával automatikusan telepíthető egy projekt.
- Automatikus CI/CD – Minden git push után a Netlify újraépíti és frissíti a weboldalt.
- Globális CDN – A statikus fájlokat egy gyors tartalomelosztó hálózat (CDN) segítségével szolgálja ki.
- Ingyenes SSL és HTTPS – Automatikusan beállítja a biztonságos kapcsolatot.
- Könnyű egyéni domain beállítás – Egyéni domain nevek támogatása és ingyenes Netlify subdomain.
- Serverless funkciók – Támogatja a Lambda Functions segítségével megvalósított dinamikus funkciókat.
- Kapcsolat űrlapok és autentikáció – Beépített űrlapkezelés és felhasználói bejelentkezés támogatása.