Ta stran je bila samodejno prevedena iz angleščine. Preberi izvirnik v angleščini

From WordPress and Elementor to AI - How I Rebuilt My Site with Vibe Coding

Od WordPressa in Elementorja do umetne inteligence – Kako sem prenovil svojo stran z "vibe codingom"

7 min branja

Po nekaj dolgih letih uporabe WordPressa skupaj z Elementor (Pro) kot svojim priljubljenim orodjem za oblikovanje sem se odločil, da je končno čas, da preverim, kaj lahko umetna inteligenca in "vibe coding" dejansko storita zame. Znani nabor orodij mi je dobro služil za osebno spletno mesto, vendar me je premagala radovednost in želel sem izvedeti, ali lahko sodoben delovni proces s podporo umetne inteligence nadomesti CMS, na katerega sem se že navadil.

Da bo jasno, to ni bilo moje prvo srečanje z "vibe codingom". Pred nekaj časa sem ga že uporabil za pomoč pri ustvarjanju osnove za enega svojih projektov, preprosto pristajalno stran s 301 preusmeritvijo z imenom Buymeachinesetakeaweay, o kateri si lahko preberete tukaj: https://idzan.hr/project/buymeachinesetakeaweay-com-fan-redirect-support-page/. Ta projekt me je naučil, kako prilagoditi izhod umetne inteligence, da sem lahko pozneje ročno uredil HTML in sam dodajal nove komentarje ter zanimive citate avtorja. Bila je majhna stvar, vendar mi je dala samozavest, da razvoj s podporo umetne inteligence zame deluje tudi v večjem obsegu.

Priprava na skok

Vsaka resna migracija se začne z varnostno kopijo in moja ni bila izjema. Pred vsem drugim sem varnostno kopiral izvirno bazo podatkov in vse medijske datoteke ter izvozil vsak del vsebine iz WordPressa v njegov domači format XML. Ta izvoz se je kasneje izkazal za zlata vreden, saj je umetni inteligenci zagotovil strukturiran vir resnice za vso vsebino, ki se je na spletnem mestu nabrala skozi leta.

Načrt za novo oblikovanje je bil precej preprost. Obdržati sem želel enak ali vsaj zelo podoben videz in občutek kot na izvirnem spletnem mestu, ki ga med prehodom namerno nisem odstranil. Tako si je Claude lahko ogledal delujoče spletno mesto in uporabil njegovo obstoječo vsebino kot referenco za osnutke, in kadar koli je potreboval podatke iz prve baze podatkov, sem jih lahko preprosto potegnil iz izvirne vsebine.

Izbira osnove

Za osnovo CMS-ja sem izbral preizkušeno in zanesljivo kombinacijo PHP in MySQL. Takrat se je to zdelo dolgočasna, zanesljiva izbira, čeprav se je kasneje izkazalo za bolj polno hroščev, kot je kdorkoli pričakoval, ko sta bili razkriti dve glavni ranljivosti oddaljenega izvajanja kaze, CVE-2026-109618 in CVE-2026-109619. Na srečo so se moja leta izkušenj s sistemsko administracijo in gostovanjem na VPS-ju obrestovala. Na dan, ko je prišel popravek, nisem popravil le PHP-ja za svojo stran, temveč za vsako stran, gostovano na tem VPS-ju. Hitra zahvala gre tukaj podjetjema Hetzner in Leaseweb za tako hiter prenos popravljenih različic PHP-ja za mojo izbrano distribucijo v njihove predpomnilnike, zaradi česar je bila celotna operacija precej manj boleča, kot bi lahko bila.

Samo gradnja

Postopek "vibe codinga" in prilagajanja je skupaj trajal nekaj dni. Prvi dan je bil porabljen za oblikovanje in osnove varnosti ter konfiguracijo čiščenja predpomnilnika CDN prek mojega ponudnika DNS, zato gre še ena zahvala podjetju Bunny.net, ker je to omogočilo brez bolečin.

Nato je prišla ena bolj zanimivih funkcij, večjezični prevod s pomočjo umetne inteligence z uporabo več modelov umetne inteligence. Trenutna nastavitev vključuje Google Gemini (gemini-3.5-flash-lite), OpenAI ChatGPT (gpt-6-luna), Anthropic Claude in Google Translate z API-jem, če je potrebno. Možnost uporabe več modelov pomeni, da nisem vezan na enega samega ponudnika in lahko primerjam kakovost prevodov med njimi.

Spletno mesto trenutno podpira hrvaščino (/hr/), bosanščino (/bs/), srbščino (/sr/) in slovenščino (/sl/), pri čemer vsak jezik dobi svojo kopijo prevedene vsebine. Angleščina ostaja izvirnik na korenski poti in služi kot privzeta možnost za vse, kar še ni prevedeno. Poleg trenutne domene .hr so aktivne tudi domene, specifične za posamezne države .ba, .si in .rs, skupaj s prej uporabljenima .eu in .com.hr ter vrhnjo domeno .name, pri čemer vse po vrsti izvajajo 301 preusmeritev na glavno domeno .hr. Torej, če nekdo deli objavo s sledjo, kot je /ba/post-name, gre skozi .hr/ba/ in pristane na izvirni sledi v bosanskem prevodu. In če nekdo pristane na spletnem mestu in ne razume angleščine, brez skrbi, prevod z umetno inteligenco je tam, da pomaga prek izbirnika jezika.

Ta izbirnik jezika je zgrajen z ikonami zastav SVG iz moje lastne zbirke ikon, upravljanimi prek skrbniške plošče, pri čemer je vsaka opremljena s svojo jezikovno kodo ISO 639, kot je navedena na Wikipediji na naslovu https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes. Zanimivo je, da se samo koda hrvaščine dejansko ujema z državno vrhnjo domeno, pri čemer hr pomeni oboje. Ostale se razlikujejo: bosanščina je označena z BS, medtem ko je njena domena .ba, srbščina je SR v primerjavi s .rs, slovenščina pa SL v primerjavi s .si. Angleščina je označena z EN, nima lastne državno specifične domene in je na spletnem mestu prikazana kot en-US.

Nekako v tem času je skrbniška plošča prejela tudi nekaj nujno potrebne pozornosti. Postala je precej neurejena, zato sem jo očistil in organiziral s primernimi podmeniji, tako da so nastavitve spet dejansko najdljive.

}

Pozneje sem vpeljal funkcijo, ki izjemno pripomore k hitrosti in združljivosti. Vse slike imajo zdaj kopije v zapisih WebP in AVIF za hitrejše nalaganje, medtem ko originalni JPG ali PNG služita kot nadomestna možnost za starejše brskalnike. Ikone so očiščene datoteke SVG, narisane neposredno v stran, in nikoli objavljene kot prenosljive datoteke, zato mojih plačljivih kompletov ikon SVG ni mogoče preprosto prenest.

Objava v živo je potekala v duhu »objave v živo s hitro vrnitvijo na staro in stabilno različico, če bi karkoli šlo narobe«. In odkrito povedano, skoraj je res šlo narobe nekajkrat zaradi napačno nastavljenih konfiguracij VHOST, NGINX in Varnish Cache, da sploh ne omenjam modula Google PageSpeed. Tukaj moram biti pošten in priznati, da so bile te napake moje, ne umetne inteligence.

Majhne podrobnosti, ki štejejo

Ko je jedro delovalo, sem dodal še zadnje popravke. Spletno mesto ima zdaj datoteko robots.txt z dovoljenimi seznami za dobre spletne iskalnike umetne inteligence, samodejno posodobljen zemljevid sela sitemap.xml s popolno večjezično podporo, poleg tega pa še llms.txt za pomočnike z umetno inteligenco in podporo za IndexNow. Vse strani se strežejo kot čist statični HTML s strukturiranimi podatki v zapisu JSON-LD, tako da lahko agenti umetne inteligence preprosto berejo in brskajo po spletnem mestu. Dobri bbotom so dobrodošli; tisti, ki ignorirajo robots.txt, so blokirani na CDN-ju prek pravil na robu (edge rules), pri čemer se še enkrat zahvaljujem Bunny.net, ter neposredno v konfiguraciji vhost.

Kar zadeva varnost, je skrbniška plošča resnično skrita. Ne nahaja se na klasični poti /admin ali kateri koli drugi poti, ki bi privabljala poskuse ugotavljanja gesel z nasilnim prodiranjem (brute-force). Namesto tega se skriva za resnično edinstvenim delom URL-ja (slug), ki ga nihče ne bo uganil.

Dokumentacija in odprta koda

Ker verjamem, da je projekt dober le toliko, kolikor je dobra njegova dokumentacija, sem zahteval tudi priročnik README in navodila za namestitev. Obe sta objavljeni v repozitoriju GitHub na naslovu https://github.com/idzanhr/idzan_custom_cms_refresh. Vodič razlaga projekt in vodi skozi njegovo namestitev brez mojih dejanskih vsebin. Vse, kar je osebno zame, kot so konfiguracijske podrobnosti ali moje lastne kode, ostaja zunaj javnega repozitorija in je nadomeščeno s splošnimi predstavitvenimi ekvivalenti, ki še vedno vsakomur omogočajo, da sam posodobi CMS.

Končne misli

S tem postavljenim temeljem sem znova prilagodil in zgradil svoje glasbeno spletno mesto na naslovu music.idzan.hr z uporabo istega CMS-ja na isti podlagi in platformi. Ta je bil zaključen malce hitreje, ker gre za eno samo podrejeno domeno, ki preprosto navaja moja dela, in je nadomestila staro domačo stran, ki je vsebovala nekaj vsebine o meni, pri čemer sem to prestavil na ločeno stran. Za stike še vedno vodi povezava do moje druge strani z družbenimi omrežji na socials.idzan.hr, ki sem jo prav tako ustvaril v slogu »vibe coding«, vendar z uporabo samo statične strani, ker teh podatkov ni treba pogosto spreminjati ali dodajati in naj bi ostali v enaki obliki. Ta stran je preprosta, čista, vitka in hitra, na testih Google Lighthouse pa dosega rezultat 100/100 brez nepotrebne navlake.

Če pogledam nazaj, se je opustitev WordPressa in Elementorja po vseh teh letih zdela tvegana, vendar sta kombinacija skrbne priprave, zanesljivih varnostnih kopij in razvoja s pomočjo umetne inteligence dokazala, da je po meri izdelan CMS na ta način povsem izvedljiv. Spletno mesto je hitrejše, vitkejše, lažje razumljivo in nadzorujem vsako vrstico kode. In če se karkoli kdaj pokvari, imam tisto izvozno datoteko WordPressa še vedno varno shranjeno na polici.

Kljub temu to ni napoved vojne WordPressu. Za vse prihodnje projekte, ki bodo potrebovali bolj zapleteno spletno mesto ali spletno trgovino, bom še vedno z veseljem segel po delujoči in stabilni namestitvi WordPressa s vtičniki, kot je WooCommerce, ter po potrebi dodal kodo po meri. Nekatera spletna mesta pa zaradi svoje zasnove in zahtevnosti nikoli ne bodo pretvorjena v projekte, ustvarjene z umetno inteligenco, kar je zavestna odločitev, sprejeta ob upoštevanju njihovih zahtev.

Poleg tega projekta moj osebni GitHub vsebuje še dva projekta, razvita v slogu »vibe coding« na osnovi jezikov PHP in MySQL, ki sta bila zgrajena za interno uporabo skupaj z nekaj sodelavci. Onadva skrbita za sprednji del (front-end), medtem ko je zaledni del (back-end) v celoti moj, brskate pa ju lahko na naslovu https://github.com/idzanhr?tab=repositories.

Še zadnja opomba v imenu preglednosti: to besedilo je bilo ustvarjeno in lektorirano s pomočjo modela Proton Lumo 2.0 Max na podlagi mojih izvirnih vsebin in zapiskov.