Seurattava opas
Valmiit vaiheet0 / 6
Vibe Coding · Aloittelijan työpaja
🇬🇧 English/🇫🇮 Suomi

Ideasta verkkosivuksi:
Vibe Coding aloittelijoille

Tänään rakennat ensimmäisen oikean verkkosivusi kuvailemalla selkokielellä, mitä haluat. Et tarvitse aiempaa kokemusta. Seuraa vaiheet järjestyksessä ja merkitse ne valmiiksi.

AIKA ≈ 90 minRAKENNA portfolio- tai yrityssivuTARVITSET kannettavan + työkalut + AI-mallin
Napauta jokaisen vaiheen vieressä olevaa ympyrää, kun vaihe on valmis.
Ennen aloitusta

Asenna nämä työkalut ensin

Varmista ennen projektin rakentamista, että nämä ilmaiset sovellukset on asennettu. Jos olet epävarma, pidä asennuksessa oletusasetukset.

01OpenCode (desktop)
avoimen lähdekoodin AI-mallien käyttöön

Käytämme OpenCodea — avoimen lähdekoodin AI-koodausagenttia, joka toimii terminaalissa, työpöytäsovelluksena ja IDE-laajennuksina. Tähän työpajaan riittää työpöytäsovellus (beta).

Lataa OpenCode Desktop
WindowsLataa Windows-versio (x64), suorita asennusohjelma ja käynnistä OpenCode Käynnistä-valikosta.
macOSLataa omalle sirullesi sopiva versio (Apple Silicon tai Intel), avaa asennusohjelma ja vedä OpenCode Applications-kansioon. Salli sovellus ensimmäisellä käynnistyksellä, jos macOS kysyy.
LinuxLataa .deb tai .rpm lataussivulta ja asenna paketinhallinnalla.
Valinnainen: OpenCode on saatavilla myös terminaalisovelluksena: curl -fsSL https://opencode.ai/install | bash. Työpöytäsovellus riittää tänään.
OpenCode (desktop) on asennettu
02Node.js
verkkosivutyökalujen ajamiseen paikallisesti

Node.js mahdollistaa modernien verkkosivutyökalujen ajamisen omalla koneella. Tarvitsemme sitä projektin käyttöönottoon, esikatseluun ja pakettikomentoihin.

Lataa Node.js
WindowsAvaa nodejs.org/en/download, lataa Windows-asennusohjelma, suorita se ja pidä oletusasetukset.
macOSAvaa nodejs.org/en/download, lataa macOS-asennusohjelma, suorita se ja pidä oletusasetukset.
LinuxKäytä lataussivun Linux-ohjeita omalle jakelullesi tai asenna Node.js paketinhallinnalla.
Node.js on asennettu
03Git
työn tallentamiseen GitHubiin

Git on koodin versionhallintaa varten — kuin varmuuskopio koodistasi. Käytämme sitä myös sivuston lataamiseen GitHubiin.

Lataa Git
WindowsAvaa git-scm.com/install/windows, lataa asennusohjelma ja suorita se — pidä oletusasetukset jokaisessa näkymässä.
macOSGit on usein jo asennettu. Tarkista avaamalla Terminal ja suorittamalla git --version; jos se puuttuu, macOS tarjoaa asennusta.
Git on asennettu
04VS Code
koodieditori

Visual Studio Code on ilmainen editori, jossa voit avata ja tarkastella rakentamasi verkkosivun tiedostoja.

Lataa VS Code
WindowsAvaa code.visualstudio.com, klikkaa Download for Windows, suorita asennusohjelma ja pidä oletusasetukset.
macOSLataa, pura zip-tiedosto ja vedä Visual Studio Code Applications-kansioon.
VS Code on asennettu
7 vaihetta
01

Luo GitHub-tili

GitHub on paikka, johon tallennamme tänään rakentamasi verkkosivun. Ilmainen tili riittää — siirrämme projektisi sinne työpajan aikana, jotta voit säilyttää ja jakaa sen.

Tee näin
  • Mene osoitteeseen github.com/signup
  • Syötä sähköpostisi, luo salasana ja valitse käyttäjänimi
  • Suorita vahvistustehtävä tai syötä GitHubin sähköpostitse lähettämä koodi
  • Vastaa lyhyisiin aloituskysymyksiin (voit ohittaa valinnaiset vaiheet — Free-taso riittää)
  • Vahvista sähköpostiosoitteesi, jos GitHub pyytää sitä
GitHubin rekisteröitymissivu
GitHubin rekisteröitymislomake — syötä sähköposti, salasana ja käyttäjänimi ja klikkaa Create account.

Valmis projektisi sijaitsee GitHub-repositoriossa eli pilvessä olevassa projektikansiossa. Näin voit tallentaa työsi, avata sen toisella koneella ja julkaista sen Vercelissä.

VinkkiOnko sinulla jo tili? Kirjaudu osoitteessa github.com/login ja varmista, että tiedät käyttäjänimesi ja salasanasi (tai miten kirjaudut Googlella/Applella).
02

Luo Vercel-tili

Vercel julkaisee sivustosi internetiin ja antaa jaettavan linkin (esim. your-site.vercel.app). Ilmainen Hobby-taso riittää tämän päivän yhden sivun sivustolle.

Tee näin
  • Mene osoitteeseen vercel.com/signup
  • Klikkaa Continue with GitHub — tämä on helpoin tapa, koska loit GitHub-tilin vaiheessa 1
  • Valtuuta Vercel, kun GitHub kysyy lupaa
  • Viimeistele Vercelin lyhyt käyttöönotto (tiimin nimi voi olla oma nimesi; valitse ilmainen Hobby-plan)
  • Kun pääset Vercel Dashboardiin, olet valmis — julkaisemme sivuston yhdessä työpajassa
Vercelin rekisteröitymissivu
Vercelin rekisteröityminen — klikkaa Continue with GitHub.

Kun olet rakentanut sivustosi OpenCodella, laitamme sen GitHubiin ja tuomme repositorion Verceliin. Vercel rakentaa ja hostaa sivuston — saat live-URL:n, jonka voit avata puhelimella ja jakaa muille.

VinkkiÄlä liitä salaisuuksia. Älä koskaan tallenna salasanoja tai API-avaimia GitHubiin tai sivuston tiedostoihin.
03

Kirjaudu GitHubiin VS Codessa

Yhdistä VS Code luomaasi GitHub-tiliin, jotta editori voi julkaista ja synkronoida projektisi.

Tee näin
  • Avaa VS Code
  • Klikkaa vasemman alakulman Accounts-kuvaketta
  • Valitse Sign in with GitHub
  • Seuraa selaimen ohjeita ja valtuuta Visual Studio Code
  • Palaa VS Codeen ja tarkista, että GitHub-käyttäjänimesi näkyy Accounts-valikossa
VS Coden Accounts-valikko, jossa näkyy Sign in with GitHub
VS Code -kirjautuminen — avaa Accounts ja valitse Sign in with GitHub.
VinkkiKäytä samaa GitHub-tiliä kuin vaiheessa 1. Jos selainikkuna avautuu, hyväksy VS Coden valtuutus ja palaa editoriin, kun kirjautuminen on valmis.
04

Rakenna promptisi

Käytä interaktiivista prompt builderia ja vastaa muutamaan kysymykseen sivustosta, jonka haluat rakentaa. Työkalu kirjoittaa personoidun PRD-promptin, jonka voit liittää ChatGPT:hen.

Avaa Prompt Builder
VinkkiBuilder sisältää 5 sivustotyyppiä ja niihin sopivat ohjatut kysymykset. Se pyytää vain PRD:n, ei koodia — täydellinen tähän työpajaan.
05

Katso ja tarkenna

Ensimmäinen versio ei yleensä näytä täsmälleen siltä kuin kuvittelit. Tarkenna antamalla AI:lle palautetta. Muuta yksi asia kerrallaan.

Tee otsikosta suurempi ja käytä lämmintä kermanväristä taustaa.
Lisää Contact-osio, jossa on sähköpostini ja painike.
Tekstiä on vaikea lukea puhelimella, korjaa välit.
VinkkiJos jokin hajoaa, kerro AI:lle tarkasti mikä näyttää väärältä. Jos näet virheen, kopioi virhekoodi ja pyydä korjausta.
06

Lisää oikea sisältösi

Vaihda paikkamerkkitekstit ja kuvat oikeisiin sisältöihin. Liitä oma tekstisi ja lisää kuvat projektikansioon.

Tee näin
  • Korvaa paikkamerkkitekstit omilla teksteilläsi
  • Lisää logo tai kuvat, tai kysy mihin ne kannattaa laittaa
  • Pyydä AI:ta siistimään asettelu, jos jokin siirtyi
Prompt · Lisää sisältö
Päivitä About-osio tällä tekstillä:
[liitä bio].
Korvaa paikkamerkkikuvat lataamillani kuvilla.
Säilytä sama asettelu ja tyyli.
VinkkiEikö kuvia ole valmiina? Löydät ilmaisia kuvapankkikuvia esimerkiksi Unsplashista ja Pexelsistä.
07

Julkaise verkkosivusi Vercelissä

Tuo GitHubissa oleva verkkosivuprojektisi Verceliin ja julkaise se, jotta saat jaettavan julkisen linkin.

Tee näin
  • Mene osoitteeseen vercel.com ja kirjaudu tilillesi
  • Klikkaa Add New ja valitse Project
  • Valitse Import Git Repository -kohdasta oma verkkosivuprojektisi
  • Klikkaa Import, pidä oletusasetukset ja klikkaa sitten Deploy
  • Kun julkaisu on valmis, kopioi live-URL ja avaa se testataksesi sivuston
VinkkiValitse GitHub-repositorio, jossa tämän työpajan verkkosivuprojektisi on. Kun julkaisu on valmis, avaa Vercelin URL yksityisessä ikkunassa ja tarkista, että sivu toimii.
Valmista tuli

Se on oikea verkkosivu.

Muutit idean eläväksi sivustoksi vain kuvailemalla sen. Jatka: lisää sivuja, muuta ulkoasua tai tee toinen sivusto jollekulle tutulle.

Lisää blogisivuKokeile uutta väriteemaaLiitä oma domain
Ideasta verkkosivuksi · Vibe Coding aloittelijoille
Mchael Poncardas
www.poncardas.com