Miten rakensin uuden verkkosivustoni tekoälyn kanssa — WordPress:stä Next.js:ään ja Verceliin
Minulla oli WordPress-sivusto. Teemoja, lisäosia, päivitysilmoituksia ja se tuttu tunne, että sivu on jonkun muun rakentama — minä vain täytän kenttiä.
Halusin jotain omaa. Jotain nopeampaa, siistimpää, ja ennen kaikkea jotain jota ymmärrän. Päätin rakentaa uuden sivuston alusta. En yksin — vaan yhdessä Anthropicin Claude-tekoälyn kanssa.
Tämä on tarina siitä miten se sujui.
Lähtötilanne: WordPress toimii, mutta ei innosta
WordPress on maailman suosituin sivustoalusta syystä. Se toimii. Mutta se myös kantaa mukanaan vuosien painolastia: teemoja jotka tekevät puolet asioista omalla tavallaan, lisäosia jotka riitelevät keskenään, ja sivunopeus joka on optimistisimmillaankin "kohtalainen".
Markkinoijana tiedän, että sivunopeus vaikuttaa konversioon. Tiesin myös, että halusin sivuston joka näyttää siltä miltä se näyttää — ei teemalta, johon on istutettu sisältöä.
Teknistä taustaa minulla on sen verran että ymmärrän mitä koodi tekee, mutta en ole ohjelmistokehittäjä. Perinteisesti se tarkoittaisi: palkkaa joku tai käytä no-code-työkalua.
Vuonna 2026 on kolmas vaihtoehto.
Työkalu: Claude Code
Claude Code on Anthropicin kehittämä tekoälypohjainen koodausassistentti joka toimii suoraan terminaalissa. Se ei ole chatbotti johon liität koodinpätkiä — se on oikeasti yhteistyökumppani, joka lukee tiedostoja, kirjoittaa koodia, korjaa virheitä ja selittää mitä tekee.
Minulla oli visio. Claudella oli tekninen toteutuskyky. Yhdistimme nämä.
Teknologiavalinnat
Ennen rakentamisen aloittamista täytyi päättää mistä palikoista sivu tehdään.
Next.js valikoitui React-pohjaiseksi frameworkiksi. Se on nopea, tukee staattista generointia (sivut rakentuvat etukäteen, ei serveriä tarvita jokaiselle vierailijalle) ja sen ekosysteemi on kypsä.
Tailwind CSS hoitaa tyylit. Sen sijaan että kirjoittaa erillisiä CSS-tiedostoja, tyylit määritellään suoraan HTML-elementeissä luokkina. Nopeuttaa kehitystä huomattavasti.
MDX blogiartikkeleihin. Markdown-tiedostoja joihin voi upottaa React-komponentteja — kirjoitan tekstiä kuten ennenkin, mutta formaatti on puhdas ja nopea renderöidä.
Vercel julkaisualustaksi. Sama yhtiö joka kehittää Next.js:ää. Push koodiin → sivu päivittyy automaattisesti. Ilmainen pienelle sivustolle.
Prosessi: miltä yhteistyö näytti käytännössä
Istuin alas Clauden kanssa ja kuvasin mitä halusin: tumma, minimalistinen, premium-tunnelma. Inspiraationa eräs design-toimiston sivusto joka oli jäänyt mieleen. Visuaalinen elementti taustalle. Nopea. Ei myyvä.
Claude ei tehnyt pelkästään mitä pyysin — se ehdotti, kysyi tarkentavia kysymyksiä ja perusteli valintansa. Kun halusin animoidun aurora-taustan, se rakensi canvas-pohjaisen toteutuksen joka pysähtyy kun välilehti ei ole aktiivinen (akkua säästääkseen) ja sammuu jos käyttäjä on valinnut vähennetyn liikkeen saavutettavuusasetuksista.
En olisi itse osannut pyytää tuota. Claude tiesi sen olevan tärkeää.
WordPress-blogisiirto oli yksi konkreettisimmista hyödyistä. Minulla oli 21 vanhaa artikkelia. Claude rakensi skriptin joka muunsi ne MDX-muotoon, korjasi HTML-entiteetit (ne -merkit jotka jäävät tekstiin kun kopioi WordPressistä) ja siivosi rakenteet kuntoon automaattisesti.
Käsin tehtyyn olisi mennyt päiviä. Kesti minuutteja.
Mitä opin
Tekoäly ei korvaa ajattelua. Claude osaa rakentaa sen minkä kuvailen — mutta kuvauksen täytyy olla hyvä. Epämääräinen pyyntö tuottaa epämääräisen tuloksen. Mitä tarkemmin pystyin kertomaan mitä halusin ja miksi, sitä parempi lopputulos.
Virheitä tulee, ja se on normaalia. Joitain asioita piti korjata useampaan kertaan. Animaatio oli aluksi liian kirkas. Mobiilissa grid-asettelu hajosi. Blogin entiteetit eivät poistuneet ensimmäisellä yrityksellä. Prosessi on iteratiivinen — kuten kaikki muukin hyvä tekeminen.
Nopeus on eri luokkaa. Sivusto syntyi muutamassa päivässä. Ei viikkoissa tai kuukausissa. WordPress-teeman asentaminen, lisäosien konfigurointi ja ulkoasun säätäminen ei kilpaile tämän kanssa.
Lopputulos on oikeasti oma. Jokainen rivi koodia on sellainen kuin halusin sen olevan. En ole riippuvainen teemantekijän päätöksistä tai lisäosien päivityksistä. Sivusto on kevyt, nopea ja minun.
Tekninen lopputulos
- 31 sivua staattisesti generoituna
- 21 blogijuttua siirretty WordPress:stä
- Lighthouse-pisteet yli 90 kaikissa kategorioissa
- Aurora-canvas taustalla, 30fps, pysähtyy piilossa
- Hakukoneoptimointi: sitemap, robots.txt, JSON-LD, OG-kuvat
Suosittelen tätä lähestymistapaa jos...
Et ole kehittäjä mutta et pelkää komentoriviä. Sinulla on selkeä visio siitä miltä sivu näyttää. Olet valmis oppimaan prosessin myötä — ei passiivisesti klikkailemaan, vaan oikeasti ymmärtämään mitä tapahtuu.
Tämä ei sovi kaikkeen. WordPress on edelleen järkevä valinta monille sivustoille, erityisesti jos sisällöntuottajia on useampia tai jos tarvitaan monimutkaista verkkokauppaa.
Mutta henkilöbrändille, portfoliolle tai asiantuntijasivustolle — tämä tapa on nopein reitti laadukkaaseen lopputulokseen.
Sivusto jonka luet nyt on se lopputulos. Ja se toimii täsmälleen niin kuin halusin.
Lue myös