Egy személyes weboldal ötlete könnyen indulhat néhány egyszerű mondattal: legyen egy nyitóoldal, mutassa meg, mivel foglalkozom, legyenek rajta projektek és írások. Innen nézve az első technikai kérdés szinte magától adódik: milyen keretrendszerből épüljön fel?

Az andraspako.hu esetében azonban nem ezzel kezdtük.

Először azt próbáltuk megérteni, milyen helyet szeretnénk létrehozni. Nem egy online önéletrajzot, nem szolgáltatások étlapját, és nem egy olyan portfóliót, amely néhány látványos elem után elfogy. Egy hosszú távon építhető szakmai otthon volt a cél: olyan felület, amely egyszerre tudja megmutatni a gondolkodás mélységét, a témák közötti kapcsolatokat és az idővel bővülő tartalmat.

Ez a döntés végül fontosabbnak bizonyult minden későbbi technológiai választásnál.

A kód előtt Markdown-dokumentumok születtek

Az első kézzelfogható eredmény nem egy weboldal volt, hanem néhány Markdown-fájl.

A design brief rögzítette az oldal célját, közönségét, hangnemét és vizuális alapelveit. Az information architecture meghatározta a tartalmi tereket. Külön dokumentum készült a vizuális rendszerről, a tartalmi tervről, a fontos döntésekről és később magáról a publikációs folyamatról is.

Ez elsőre talán túl sok előkészítésnek tűnhet egy személyes oldalhoz. A gyakorlatban éppen ez tette lehetővé, hogy a későbbi ötleteket legyen mihez mérni.

Ha felmerült egy új animáció, szöveg vagy navigációs megoldás, nem csak azt kérdeztük, hogy jól néz-e ki. Azt is, hogy illeszkedik-e ahhoz a szakmai képhez, amelyet az oldalnak közvetítenie kell: letisztult, strukturált, nyugodt, közérthető és saját karakterrel rendelkező.

A folyamat sorrendje ezért tudatosan így alakult:

ötlet
  → design brief
  → információs architektúra
  → vizuális nyelv
  → tartalom
  → technológiai döntések
  → fejlesztés
  → tesztelés
  → publikálás

Nem azért, mert egy projekt csak ebben a sorrendben készülhet el, hanem azért, mert a technológiának itt a gondolatot kellett szolgálnia.

Az adatból vizuális nyelv lett

Az oldal meghatározó motívuma a node, az edge és a structure hármasa lett. Ezek nem utólag ráhelyezett díszítőelemek. Ugyanabból a világból érkeznek, amelyről az oldal szól: adatmodellekből, gráfokból, architektúrákból és adatfolyamokból.

A nyitó Hero ezért nem egy állókép. Ugyanazok a pontok és kapcsolatok a görgetés során fokozatosan rendeződnek át:

DATA → STRUCTURE → INFORMATION

A mozgás az oldal központi állítását teszi láthatóvá. Az adat önmagában még nem információ; a szerkezet, a jelentés és a kontextus együtt teszi használhatóvá.

A kezdeti változat még csak a függőleges történetet ismerte. Lefelé haladva kibontakozott a szakmai mélység, de idővel egyre világosabbá vált, hogy egyetlen irány nem elég. A Rólam, a Projektek és az Írások nem egymás után következő fejezetek, hanem egymás mellett létező terek.

Így született meg a második dimenzió: lefelé továbbra is a tartalmi mélység épül, vízszintesen pedig a látogató választja ki, melyik térbe lép tovább. Mobilon swipe, számítógépen képernyőnyilak, billentyűzet és touchpad teszi ugyanazt a rendszert használhatóvá.

Nem egy navigációs trükk került az oldalra. A szerkezet vált láthatóvá.

A technológia csak ezután kapott nevet

Amikor már tudtuk, milyen oldalt szeretnénk, könnyebb lett eldönteni, miből építsük fel.

Az Astro jól illeszkedett a feladathoz. Az oldal alapvetően tartalom- és élményközpontú, ezért a kész lapok nagy része statikus HTML-ként előállítható. Ahol szükség van rá, komponensek és célzott JavaScript adják az interakciót, de nem kell egy teljes kliensoldali alkalmazást elküldeni minden látogatónak.

A forráskód Git repóba, majd GitHubra került. Ez nemcsak biztonsági másolatot jelentett. Minden érdemi változásnak története lett: látható, mi módosult, mikor történt, és szükség esetén melyik korábbi állapothoz lehet visszanyúlni.

Az első működő build a localhoston még csak annyit bizonyított, hogy a rendszer technikailag összeáll. A valódi munka ezután kezdődött: tipográfia, töréspontok, görgetési ritmus, animációs állapotok, billentyűzetes működés, mobil Safari és reduced-motion támogatás.

Az oldal nem egyetlen nagy fejlesztési lépésben készült el. Sok apró körből épült:

ötlet → megvalósítás → böngészőben ellenőrzés → finomítás

Ezekben a körökben gyakran egy mondat helye vagy egy gomb jelentése legalább olyan fontos volt, mint maga a kód.

A tartalomhoz nem kellett CMS

Amikor az Írások tervezése elkezdődött, felmerült a kérdés: hogyan kerül majd fel egy új cikk? Érdemes hozzá adminisztrációs felületet vagy teljes tartalomkezelő rendszert építeni?

A valós igény ennél egyszerűbb volt. Egy szerző, ritkán változó szerkesztési folyamat, technikai környezetben készülő tartalom. Ehhez egy CMS több működtetési feladatot adott volna, mint amennyi problémát megold.

Egy nyaralás utolsó estéjén, a teraszon, whisky és szivar mellett vált véglegessé a döntés: az Írások egyszerű, stabil Markdown-alapú publikációs rendszert kapnak.

Minden cikk egy .md fájl. A fájl elején strukturált adatok írják le a címet, a rövid összefoglalót, a típust, a témákat és a publikálási állapotot. A szöveg alatta közönséges Markdown.

A draft: true állapotban lévő írás helyben már a végleges dizájnnal olvasható, de nem kap nyilvános cikkoldalt. Publikáláskor elég a státuszt átállítani, megadni a dátumot, majd elküldeni a változást a GitHubra. Az olvasási időt az oldal automatikusan kiszámolja.

Ez nem a lehető legtöbb funkciót adó rendszer. Pontosan annyit tud, amennyire jelenleg szükség van — és ettől marad egyszerű.

A localhosttól a productionig

A domain a Rackhostnál került bejegyzésre. Ez biztosítja, hogy az andraspako.hu név hozzám tartozzon, de önmagában még nem mondja meg, hol található a weboldal.

A kész Astro-oldal a Cloudflare Pagesre került. A Cloudflare GitHub integrációja figyeli a repó main ágát. Új commit esetén letölti a forrást, lefuttatja a buildet, majd a kész fájlokat elhelyezi a saját globális hálózatán.

Az első production build még egy pages.dev próbacímen indult el. Ezen külön ellenőrizhető volt a nyitóoldal, a vízszintes navigáció, a mobilos megjelenés és az első publikált cikk, miközben a valódi domain továbbra is a korábbi parkolóoldalra mutatott.

Csak ezután következett a DNS áthelyezése. A Rackhost a domain regisztrátora maradt, a névszerverek viszont átkerültek a Cloudflare-hez. A DNS-rekordok összekapcsolták az andraspako.hu és a www.andraspako.hu címet a Pages projekttel. A Cloudflare automatikusan kiállította a HTTPS-tanúsítványokat, majd egy állandó átirányítás a www változatot a rövidebb, kanonikus domainre vezette.

Hétfő este megszületett az első működő production build. Kedd reggel, az első kávé mellett pedig az andraspako.hu átvette a forgalmat.

A folyamatban volt valami különösen szemléletes. Miközben itthon a vezetékek körüli munkák miatt reggel nyolckor elment az áram, a weboldal továbbra is működött. A forrás a GitHubon, a kész oldal a Cloudflare hálózatán élt; a helyi gép már csak a következő változtatásokhoz kellett.

Az első teljes automatikus lánc

Az éles indulás után egy rövid szöveget módosítottunk a nyitóoldalon. Helyben lefutott az Astro build, majd a változás commitként a GitHub main ágára került.

Innentől nem történt kézi fájlfeltöltés:

git push
  → GitHub
  → Cloudflare build
  → automatikus deployment
  → andraspako.hu

A Cloudflare felismerte az új commitot, újra felépítette az oldalt, és néhány pillanattal később az új szöveg már a saját domainen jelent meg.

Ezzel nemcsak egy módosítást teszteltünk. Bebizonyosodott, hogy a teljes publikációs lánc működik. Ugyanez történik majd egy új cikkel, egy új projekttel vagy bármely későbbi fejlesztéssel.

Ami végül felépült

Kívülről az eredmény egy weboldal. Belülről inkább egy kicsi, összefüggő publikációs rendszer:

  • a Markdown-dokumentumok őrzik az alapelveket és a tartalmat;
  • a Git és a GitHub őrzi a változások történetét;
  • az Astro alakítja a forrást gyors, statikus oldalakká;
  • a Cloudflare Pages automatikusan buildel és publikál;
  • a Cloudflare DNS, HTTPS és átirányítások a saját domaint szolgálják;
  • a mobilos és asztali interakciók ugyanannak a tartalmi rendszernek adnak különböző bejáratokat.

A legfontosabb tanulság mégsem egy technológia neve.

Először azt kellett tisztázni, mit szeretnénk mondani, milyen szerkezetben és milyen hangon. Amikor ez már látható volt, a technológiai döntések nem önálló célként jelentek meg, hanem a gondolat természetes következményeként.

Az andraspako.hu V1 ezzel elkészült. A rendszer működik, a váz áll, a publikációs út nyitva van. A következő szakasz már nem elsősorban az építésről szól.

Hanem arról, hogy a hely megteljen élettel.