Astro-sivusto Claude Coden avulla: kansiosta julkaisuun

Myös ihminen, joka ei ole koskaan kirjoittanut riviäkään koodia, voi rakentaa sivuston Astrolla Claude Coden avulla. Lopetin koodin kirjoittamisen käsin jo kauan sitten. Teen kaiken sanoilla tekoälyn avulla, ja sivuston rakentaminen Astrolla toimii aivan samalla tavalla: kerrot, mitä tarvitset, ja Claude kirjoittaa koodin puolestasi.

Ongelma ei yleensä ole itse rakentaminen, vaan se, että ohjeet ovat hajallaan. Yhdessä artikkelissa kerrotaan asennuksesta, toisessa käsitellään komentoja ja kolmannessa julkaisemista, eikä kokonaisuus koskaan hahmotu. Tässä opastan sinut tyhjästä kansiosta sivustoon, joka avautuu internetissä linkistä: mitä pitää asentaa, millä komennolla projekti aloitetaan, miten sivuja rakennetaan Claude Coden avulla ja miten tulos julkaistaan ilmaiseksi. Tukeudun Astron viralliseen dokumentaatioon.

Palvelun käyttämisestä kerrotaan Ailoot-dokumentaatiossa.

Mitä tarvitset ennen aloittamista?#

Astro ei edellytä minkään lataamista etukäteen — tarvittava asennetaan seuraavan vaiheen komennolla. Tarvitset kuitenkin ympäristön, jossa kaikki toimii. Astro kuvaa aloituksen näin: tarvitset kolme asiaa:

Käydään läpi, mitä nämä käytännössä tarkoittavat:

1. Node.js — ohjelma, jota ilman Astro tai useimmat vibe-koodauksen työkalut eivät toimi. Lataa se osoitteesta nodejs.org ja asenna tavallisen sovelluksen tapaan. Dokumentaation versionumero kasvaa ajan myötä, joten tarkista vaatimus Astron asennussivulta ennen aloittamista. Tarvitset parillisen version (22, 24); paritonta versiota (23, 25) kannattaa välttää.
2. VS Code — Microsoftin ilmainen editori. Avaat projektikansion siinä, ja myös Claude Code toimii siellä ja kirjoittaa koodin.
3. Pääte — ikkuna, johon kirjoitat komentoja. Sitä ei tarvitse asentaa erikseen: sen voi avata VS Coden valikosta, ja kaikki alla olevat komennot kirjoitetaan siihen.

Jos olet jo asentanut Claude Coden ja rakentanut sillä jotakin, sinulla on kaikki nämä valmiina ja voit ohittaa tämän vaiheen. Muussa tapauksessa lue erillinen oppaani siitä, miten Claude Code asennetaan.

Miten Astro-projekti luodaan yhdellä komennolla?#

Tästä projekti alkaa, ja siihen tarvitaan vain yksi komento. Avaa pääte ja kirjoita:

npm create astro@latest

Asennusvelho käynnistyy. Dokumentaatio kertoo siitä näin:

Toiminto opastaa sinut vaiheiden läpi ja kysyy muutaman kysymyksen: minkä nimen haluat projektikansiolle, mitä mallia haluat käyttää pohjana ja asennetaanko riippuvuudet heti. Voit valita jokaiseen kysymykseen oletusvaihtoehdon — tyhjä tai minimaalinen malli sopii hyvin ensimmäiselle sivustollesi. Jos vastasit ”ei” riippuvuuksien asennusta koskevaan kysymykseen, lisää ne myöhemmin itse suorittamalla projektikansiossa komento npm install.

Kun toiminto on valmis, se ilmoittaa projektin luomisesta ja ehdottaa seuraavaa vaihetta — siirtymistä projektikansioon:

cd your-project-name

Projektin luomiseen ei tarvita muuta. Kansiossa on jo toimiva sivuston pohja: useita tiedostoja ja kansioita, joiden avulla sivu rakennetaan. Niitä ei tarvitse muokata käsin, mutta on hyödyllistä tietää, missä mikäkin sijaitsee. Astro edellyttää vain yhtä kansiota:

Toisin sanoen src/pages sisältää sivuston sivut: etusivun, ”tietoa meistä” -sivun ja yhteystietosivun. Lähellä ovat yleensä myös src/components (uudelleenkäytettäviä osia, kuten ylä- ja alatunnisteita sekä painikkeita), src/layouts (yhteinen sivupohja) ja public-kansio kuville ja tiedostoille. Rakennetta ei tarvitse opetella ulkoa — muista vain, että sivut ovat kansiossa src/pages, ja viittaa siihen, kun pyydät Claudea ”lisäämään yhteystietosivun”.

Miten itse sivusto rakennetaan Claude Coden avulla?#

Pohja on valmis; nyt rakennat sivuston sen pohjalta, ja Claude Code ottaa ohjat. Avaa projektikansio VS Codessa, käynnistä Claude Code ja kuvaile sanoin, mitä tarvitset. Se muokkaa itse tiedostoja kansiossa src/pages ja sen viereisissä kansioissa — sinä annat sille tehtäviä ja tarkistat tuloksen.

Kokemukseni mukaan pienissä vaiheissa työskentely toimii parhaiten. Yksi valtava pyyntö, kuten ”tee minulle yrityksen verkkosivusto”, johtaa sekavaan lopputulokseen, jota on vaikea korjata. Jaa työ siksi lyhyisiin ja selkeisiin tehtäviin ja anna ne yksi kerrallaan:

1. ”Tee etusivu: iso otsikko, pari virkettä siitä, mitä teen, ja painike, joka vie yhteystietosivulle.”
2. ”Lisää palvelusivu, jolla on kolmen kohdan luettelo.”
3. ”Lisää yhteystietosivu, jolla on puhelinnumero ja linkki Telegramiin.”
4. ”Muuta ulkoasua: vaalea tausta ja suuri, helppolukuinen fontti.”

Tarkista jokainen vaihe ennen kuin jatkat — näin virheet on helpompi huomata ja palata korjaamaan. Se, miksi pienet tehtävät ovat luotettavampia ja miten tekoälyn saa pysymään oikealla polulla, liittyy kontekstisuunnitteluun: mitä selkeämpi tehtävä ja projektin rakenne ovat, sitä ennustettavampi tulos on.

Astro tarjoaa tekoälylle tähän sopivan rakenteen: sivujen sisältö on erotettu tyyleistä, ja sivut rakennetaan yhteisten sääntöjen mukaan. Tämän rakenteen ansiosta Claude menee harvemmin sekaisin ja rikkoo epätodennäköisemmin jotakin viereistä, kun se muokkaa yhtä kohtaa. Jos Claude yhtäkkiä lakkaa näkemästä tiedostojasi tai vastaa epäolennaisesti, katso opas siitä, miksi Claude Code ei näe projektitiedostoja.

Miten voit esikatsella sivustoa ennen julkaisemista?#

Ennen kuin näytät sivuston muille, esikatsele sitä omalla tietokoneellasi. Astro tarjoaa tähän kehityspalvelimen — se näyttää sivuston suoraan tietokoneellasi. Käynnistä se päätteessä projektikansion sisällä komennolla:

npm run dev

Astro käynnistää paikallisen esikatselun ja tulostaa osoitteen päätteeseen. Oletuksena osoite on localhost:4321. Kopioi osoite, avaa se selaimessa, niin näet sivustosi. Toistaiseksi osoite toimii vain sinulle — kukaan ulkopuolinen ei pääse siihen; tämä on luonnoksesi.

Kätevästi esikatselu päivittyy reaaliajassa: Claude muokkaa tiedostoa, ja sivu päivittyy selaimessa itsestään; sitä ei tarvitse ladata uudelleen käsin. Työ sujuu nopeasti — pyydä Claudea tekemään jotakin, tarkista tulos selaimessa, tee korjaus ja katso uudelleen. Tässä vaiheessa viimeistelet sivustoa. Kun olet tyytyväinen tulokseen, julkaise se verkossa.

Miten Astro-sivuston voi julkaista verkossa ilmaiseksi?#

Valmis sivusto täytyy sijoittaa paikkaan, josta muut voivat avata sen linkistä. Helpoin ilmainen tapa kulkee GitHubin kautta: lataa ensin projektin koodi repositorioon ja yhdistä sitten hosting-palvelu, joka rakentaa ja julkaisee sivuston. Toimi näin:

1. Luo repositorio GitHubiin. Repositorio on verkossa oleva koodivarasto, johon lähetät projektin tiedostot. Claude Code voi auttaa tässä luonnollisella kielellä annettavien ohjeiden avulla: pyydä sitä ”lataamaan projekti uuteen GitHub-repositorioon”, niin se ehdottaa komentoja. Jos et ole käyttänyt GitHubia aiemmin, pidä rekisteröitymis- ja kirjautumisohjeet käden ulottuvilla.
2. Yhdistä hosting-palvelu. Siirry johonkin palveluun (Netlify tai Vercel), kirjaudu sisään GitHub-tililläsi ja valitse repositoriosi. Astron dokumentaatio kuvaa menetelmän näin: hosting-palvelu seuraa repositoriota, rakentaa sivuston ja julkaisee sen.
3. Tarkista build-asetukset. Hosting-palvelu tunnistaa yleensä Astron ja täyttää tarvittavat asetukset. Jos se pyytää syöttämään ne itse, dokumentaation build-komento on astro build (tai npm run build), ja valmis sivusto sijoitetaan dist-kansioon.
4. Napsauta ”Julkaise”. Palvelu rakentaa sivuston ja antaa sinulle linkin, kuten site-name.netlify.app. Kuka tahansa voi avata sivuston kyseisestä osoitteesta.

Tässä on dokumentaation täsmällinen muotoilu siitä, miten repositorio yhdistetään hosting-palveluun:

Sen jälkeen julkaiseminen tapahtuu automaattisesti: lähetä uusi muutos repositorioon, niin sivusto rakennetaan ja päivitetään itsestään; mitään muuta ei tarvitse napsauttaa.

Toinen ilmainen vaihtoehto on GitHub Pages, jossa sivusto julkaistaan suoraan repositoriosta GitHubin omilla työkaluilla. Astrolla on siihen virallinen aloituspohja:

Tällä vaihtoehdolla sivusto avautuu osoitteessa, kuten your-name.github.io/repository-name, ja voit myöhemmin yhdistää siihen oman verkkotunnuksesi. Voit hoitaa asetukset myös Claude Coden avulla: kuvaile tehtävä sanoin, niin se valmistelee tarvittavan tiedoston.

Paljonko Astro-sivuston rakentaminen maksaa?#

Puhutaan rahasta. Astro on ilmainen avoimen lähdekoodin työkalu, jolla ei ole erillistä hintaa. Myös perus-hosting-palvelut tarjoavat ilmaisia vaihtoehtoja: GitHub Pages sekä Netlifyn ja Vercelin aloitustason paketit, jotka yleensä riittävät kevyeen Astro-sivustoon (ilmaisilla paketeilla on liikennöintirajoituksia, mutta ne riittävät tavallisesti yksinkertaiseen yrityksen esittelysivustoon tai laskeutumissivuun).

Käytännössä saattaa siis tulla maksettavaksi kaksi asiaa, mutta ei välttämättä edes niitä. Ensimmäinen on sivuston rakentamiseen käyttämäsi tekoälytyökalu. Toinen on oma verkkotunnus esimerkiksi osoitteen name.netlify.app sijaan; se on valinnainen ja maksaa vain vähän vuodessa. Voit rakentaa sivuston ja julkaista sen verkossa maksamalla ainoastaan Claudesta.

Mitä muuta Astro-sivustoista ja Claude Codesta kysytään?#

Tutustu Ailootiin.