Näin rakennat verkkosivut itse tekoälyn avulla

Verkkosivujen rakentaminen ”tee-se-itse” -työkaluilla on tuttua useimmille yrittäjille. Usein ensimmäiset kotikutoiset sivut palvelevatkin aikansa, mutta toiminnan kasvaessa moni huomaa turhautuvansa: aikaa kuluu loputtomaan visuaaliseen tuunaamiseen, vaikka lopputulos tuntuu hitaalta ja kömpelöltä.

Tähän asti yrittäjän onkin pitänyt valita joko helppous tai laatu. Helpot kotisivukoneet ovat usein hitaita ja sitovat käyttäjänsä kalliisiin kuukausimaksuihin ilman mahdollisuutta siirtää sivustoa muualle. Toisessa ääripäässä ovat huippunopeat, ammattilaisten koodaamat sivustot, jotka ovat vaatineet tuhansien eurojen investointeja.

Tekoäly on kuitenkin muuttanut pelin säännöt. Nyt voit saavuttaa optimaalisen suorituskyvyn ja täyden omistajuuden sivustosi koodiin tekoälyagentin avulla. Kyse ei ole enää siitä, osaatko koodata, vaan siitä, että tekoäly poistaa tekniset esteet laadun tieltä. Voit nyt rakentaa ammattitasoisen sivuston ilman riippuvuutta suljetuista alustoista tai kalliista kehittäjistä.

Jos tavoitteenasi on erinomainen suorituskyky tinkimättä laadusta, paras tapa on mielestäni rakentaa staattinen sivusto. Muitakin vaihtoehtoja on, mutta vertaillaan niitä joskus toiste.

Esivalmistelut: Työkalupakin kokoaminen

Ennen kuin aloitat, tarvitset muutaman perusasian. Useimmissa näistä on erittäin avokätiset ilmaisversiot, joten voit aloittaa lähes nollabudjetilla. Tietokone on käytännössä välttämätön – puhelimellakin sivujen tekeminen voisi teoriassa onnistua, mutta en ole kokeillut sitä itse.

1. GitHub: Paikka, jossa sivustosi tiedostot asuvat. Vaihtoehtojakin löytyy, mutta GitHub on ylivoimaisesti suosituin ja itselleni tutuin Git-pohjainen versionhallintajärjestelmä.
2. Claude Code: Erittäin älykäs ja kyvykäs komentorivityökalu Anthropicilta. Seuraa asennusohjeita täältä.
3. Cloudflare: Alusta, jota käytämme sivuston julkaisuun (hosting) ja nimipalveluiden (DNS) hallintaan. Cloudflare Pages tarjoaa ilmaisen ja huippunopean tavan saada sivustosi livenä verkkoon yhdellä klikkauksella.

Claude Coden tilalla voi käyttää esimerkiksi GitHub Copilot CLI:tä, jota voi hyödyntää myös selaimen kautta (GitHub Codespaces) ilman erillisten ohjelmistojen asentamista omalle koneelle.

Claude Codeen ei ole tällä hetkellä saatavilla täysin ilmaista versiota, mutta sitä voi käyttää ”maksa mitä käytät” -periaatteella ilman kuukausittaista sitoutumista. Voit myös pyytää joltain työkalua jo käyttävältä ystävältä suosittelukoodin (referral code), jolla saat ilmaisia krediittejä alkuun pääsemiseksi. Erillinen tilaus (subscription) ei ole siis välttämätön.

Vaihe 1: Repositorion luominen (GitHub-”kansio”)

GitHub on järjestelmä, jossa koodisi sijaitsee pilvessä. Koodista on kopio myös omalla koneellasi, mutta jotta saamme yhdistettyä tiedostot julkaisujärjestelmään helposti, ne kannattaa tallentaa verkkoon.

• Mene GitHubiin ja luo uusi projekti (New Repository).
• Anna sille nimi (esim. yrityksen-sivut).

Myöhemmässä vaiheessa, kun koodisi on ladattu GitHubiin ja sinne on lisätty tarpeelliset integraatiot, sivustosi päivittyy automaattisesti verkkoon aina, kun teet muutoksia.

Vaihe 2: Tekoälyn käyttöönotto

Vaihtoehto A (Paikallinen asennus): Nyt on aika antaa tekoälyn hoitaa tekninen suoritus. Jos asensit Claude Coden, voit nyt kirjoittaa komentoriville claude. Järjestelmä pyytää sinua kirjautumaan sisään tai antamaan API-avaimen. Kun olet kirjautunut, voit testimielessä kysyä siltä jotain tai sanoa ihan vain “terve”, ja Claude vastaa.

Vaihtoehto B (GitHub Codespaces): Jos et halua asentaa tietokoneellesi mitään, voit avata GitHub-projektisi suoraan selaimessa (Codespaces). Se tarjoaa valmiin tietokoneen pilvessä, jossa on tekoäly valmiina auttamaan. Minulla ei ole tästä lähestymistavasta laajaa henkilökohtaista kokemusta, mutta se on toimiva ja pidetty tapa.

Vaihe 3: Teknologian valinta

Erilaisia verkkoalustoja on valtavasti. Jokaisella kehittäjällä on oma lempilapsensa ja mielipiteensä siitä, miten asioita kannattaa tehdä. Osa työkaluista soveltuu paremmin staattisten verkkosivujen tekemiseen kuin toiset.

Staattisia sivuja voi tehdä millä tahansa teknologialla, ja tekoäly osaa rakentaa sivut vaikka pelkkää puhdasta HTML-, CSS- ja JavaScript-koodia käyttäen. Itse olen kuitenkin viime aikoina päätynyt Astroon, koska se yhdistää mahdollisuuden käyttää tehokkaasti komponentteja (esim. Reactin avulla), mutta tukee samalla staattisia sivuja erinomaisesti. Muita hyviä vaihtoehtoja ovat esimerkiksi Hugo tai Jekyll.

Vaihe 4: Sivuston rakentaminen

Sinulla pitäisi olla tässä vaiheessa auki oleva keskustelu Claude Coden kanssa. Kirjoita seuraavaksi komentoriville:

“Luo uusi verkkosivuprojekti käyttäen Astroa ja Tailwind CSS -tyylejä. Tee sivustosta minimalistinen ja ammattimainen. Tarvitsen etusivun, jossa on selkeä arvolupaus ja palvelukuvaus. Lisäksi haluan sivun, jolla on yhteystiedot. Kun olet tehnyt pohjan, kerron sinulle tarkempaa tietoa sisällöstä.”

Tämän jälkeen kuvaile, mitä yrityksesi tekee. Tekoäly asentaa tarvittavat osat, luo tiedostot ja kirjoittaa koodin puolestasi. Voit pyytää muutoksia lennosta: “Vaihda fontti tyylikkääseen sans-serif-fonttiin ja tee sivuista mobiiliystävälliset.”

Jotta voit seurata sivujen rakentumista, pyydä tekoälyä käynnistämään esikatselunäkymä (preview). Astron vakio-osoite on yleensä http://localhost:4321.

Vaihe 5: Julkaisu

Kun sivusto näyttää hyvältä esikatselussa, voit julkaista sen. Kysy tekoälyltä:

“Miten julkaisen tämän projektini Cloudflare Pagesiin?”

Cloudflare Pagesin käyttöönotto vaatii Cloudflare-tilin. Claude osaa opastaa sinua löytämään oikeat napit ja yhdistämään Cloudflare Pagesin GitHub-kansioosi. Kun ne on yhdistetty, jokainen tekemäsi muutos päivittyy automaattisesti sivuillesi.

Vaihe 6: Oma verkkotunnus eli “domain”

Viimeinen silaus on ammattimainen osoite (esim. yrityksesi.fi). Tähän ei ole varsinaista oikopolkua, mutta suosittelen lämpimästi omaa KamuDNS-palveluamme. Toteutimme sen, koska suurin osa .fi-verkkotunnuksia välittävistä palveluntarjoajista on edelleen erittäin kankeita.

1. Mene osoitteeseen app.kotisivukamu.fi/domains ja valitse “Tilaa verkkotunnus”.
2. Kun olet ostanut domainin, kysy tekoälyltä: “Ostin domainin [osoitteesi]. Mitkä ovat DNS-asetukset, jotta saan sen toimimaan Cloudflare Pagesin kanssa?”
3. Koska Cloudflare Pagesin käyttö on helpompaa, jos nimipalvelimet ovat Cloudflarella, Claude pyytää sinua luultavasti siirtämään nimipalvelimet sinne.
4. Seuraa tekoälyn antamia ohjeita ja kopioi tarvittavat tiedot verkkotunnuspalveluun.

Vaihe 7: Laadunvarmistus

Kun sivusto on livenä, käytä PageSpeed Insightsia sen suorituskyvyn tarkasteluun. Voit lukea aiemmasta julkaisustamme, miksi nopeus on kriittinen tekijä: Miksi nopeus ratkaisee?

Kun tulokset ovat selvät, kopioi sivulta kaikki olennaiset huomiot ja pyydä tekoälyä korjaamaan ne.

---

Miksi tämä prosessi toimii?

• Ei turhaa painolastia: Koska käytät Astroa, sivustosi ei lataa hidasta tietokantaa tai raskaita lisäosia.
• Tekoäly korjaa virheet: Jos jokin ei toimi, kopioit virheilmoituksen tekoälylle ja sanot: “Korjaa tämä”. Se on kuin sinulla olisi oma IT-osasto taskussasi.
• Huippunopeus vakiona: Staattiset tiedostot globaalissa pilvipalvelussa latautuvat aina nopeammin kuin perinteiset dynaamiset sivut.

Tämä DIY-tapa ei vaadi koodausosaamista, vaan kykyä käyttää tietokonetta ja keskustella tekoälyn kanssa. Lopputuloksena on verkkosivu, joka latautuu välittömästi ja viestii asiakkaillesi tinkimättömästä laadusta.

Onhan tässä toki monta askelta. Ehdin tehdä useita sivuja tällä tyylillä, ennen kuin päätimme rakentaa Kotisivukamun. Kotisivukamu automatisoi tämän kaiken – emme tosin enää käytä Cloudflarea, vaan omaa sisällönjakeluverkostoamme KamuCDN:ää.