Työpajan pitää Mac

Seurattava opas ensimmäistä sivustoaan rakentaville

Vibe Coding -työpaja

Tässä työpajassa rakennat ensimmäisen oikean verkkosivusi ideasta julkaisuun asti pelkästään kuvailemalla, mitä haluat rakentaa. Käytämme avoimen lähdekoodin agenttiympäristöä ja tekoälymalleja.

Aloitetaan!Prompt Builder
AIKA≈ 90 minuuttia
RAKENNAPortfolio- tai yrityssivu
TARVITSETKannettava, työkalut, AI-malli
Ennen aloitusta

Asenna nämä työkalut ensin

Asenna ennen projektin rakentamista alla olevat pakolliset sovellukset. Ne ovat kaikki ilmaisia. Valinnaiseksi merkityt sovellukset ovat hyödyllisiä, mutta voit ohittaa ne halutessasi. Jos olet epävarma, pidä asennuksessa oletusasetukset.

1

OpenCode (desktop)

avoimen lähdekoodin AI-mallien käyttöön

OpenCoden etusivu, jossa otsikko The open source AI coding agent

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

Lataa Windows-versio (x64), suorita asennusohjelma ja käynnistä OpenCode Käynnistä-valikosta.

Valinnainen: OpenCode on saatavilla myös terminaalisovelluksena: curl -fsSL https://opencode.ai/install | bash. Työpöytäsovellus riittää tänään.

2

Git

työn tallentamiseen GitHubiin

Gitin etusivu, jossa Git kuvataan ilmaiseksi avoimen lähdekoodin hajautetuksi versionhallintajärjestelmäksi

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

Lataa Git

Avaa git-scm.com/install/windows, lataa asennusohjelma ja suorita se. Pidä oletusasetukset jokaisessa näkymässä.

3

Node.js

verkkosivutyökalujen ajamiseen paikallisesti

Valinnainen
Node.js:n etusivu, jossa otsikko Run JavaScript Everywhere ja Get Node.js -painike

Node.js mahdollistaa modernien verkkosivutyökalujen ajamisen omalla koneella. Tämän päivän sivusto on tavallista HTML:ää, CSS:ää ja JavaScriptiä, joten voit ohittaa sen. Asenna se, jos haluat esikatsella sivustoa paikallisesti tai kokeilla pakettikomentoja myöhemmin.

Lataa Node.js

Avaa nodejs.org/en/download, lataa Windows-asennusohjelma, suorita se ja pidä oletusasetukset.

4

VS Code

koodieditori

Valinnainen
Visual Studio Coden etusivu, jossa otsikko The open source AI code editor ja latauspainikkeet

Visual Studio Code on ilmainen editori, jossa voit avata ja tarkastella rakentamiasi verkkosivutiedostoja. Voit ohittaa sen: OpenCode luo ja muokkaa tiedostot puolestasi, ja voit silti avata ne tiedostonhallinnasta.

Lataa VS Code

Avaa code.visualstudio.com, klikkaa Download for Windows, suorita asennusohjelma ja pidä oletusasetukset.

Seurattava opas

7 vaihetta

  1. 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

    1. Mene osoitteeseen github.com/signup
    2. Syötä sähköpostisi, luo salasana ja valitse käyttäjänimi
    3. Suorita vahvistustehtävä tai syötä GitHubin sähköpostitse lähettämä koodi
    4. Vastaa lyhyisiin aloituskysymyksiin (voit ohittaa valinnaiset vaiheet; Free-taso riittää)
    5. 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 Cloudflare Workersissa.

    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).
  2. 02

    Luo Cloudflare-tili

    Cloudflare Workers julkaisee sivustosi internetiin ja antaa jaettavan linkin (esim. your-site.your-name.workers.dev). Ilmainen Free-taso riittää tämän päivän sivustolle, ja siihen sisältyvät jo HTTPS ja Cloudflaren sisäänrakennettu tietoturva.

    Tee näin

    1. Mene osoitteeseen dash.cloudflare.com/sign-up
    2. Valitse rekisteröitymistavaksi GitHub. Tämä on helpoin tapa, koska loit GitHub-tilin vaiheessa 1 (myös sähköpostilla ja salasanalla rekisteröityminen toimii)
    3. Valtuuta Cloudflare, kun GitHub kysyy lupaa
    4. Vahvista sähköpostiosoitteesi, jos Cloudflare lähettää vahvistuslinkin
    5. Kun pääset Cloudflaren hallintapaneeliin, olet valmis. Sinun ei tarvitse lisätä verkkotunnusta tai valita maksullista tasoa: ilmainen Free-taso riittää. Julkaisemme sivuston yhdessä työpajassa
    Cloudflare Workers -tuotesivu, jossa otsikko Deploy serverless functions globally in seconds ja Start building for free -painike
    Cloudflare Workersin etusivu: Start building for free vie myös rekisteröitymissivulle.

    Kun olet rakentanut sivustosi OpenCodella, laitamme sen GitHubiin ja yhdistämme repositorion Cloudflare Workersiin. Cloudflare julkaisee sivuston ja päivittää sen aina, kun lähetät muutoksen, ja 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.
  3. 03

    Kirjaudu GitHubiin VS Codessa (valinnainen)

    Jos asensit VS Coden, yhdistä se luomaasi GitHub-tiliin, jotta editori voi julkaista ja synkronoida projektisi. Ohititko VS Coden? Ohita myös tämä vaihe: OpenCode ja Git voivat lähettää projektisi GitHubiin, ja autamme kirjautumisessa työpajan aikana.

    Tee näin

    1. Avaa VS Code
    2. Klikkaa vasemman alakulman Accounts-kuvaketta
    3. Valitse Sign in with GitHub
    4. Seuraa selaimen ohjeita ja valtuuta Visual Studio Code
    5. 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.
  4. 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, joten se sopii täydellisesti tähän työpajaan.
  5. 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.
  6. 06

    Lisää oikea sisältösi

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

    Tee näin

    1. Korvaa paikkamerkkitekstit omilla teksteilläsi
    2. Lisää logo tai kuvat, tai kysy mihin ne kannattaa laittaa
    3. 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ä.
  7. 07

    Julkaise verkkosivusi Cloudflare Workersissa

    Yhdistä GitHubissa oleva verkkosivuprojektisi Cloudflare Workersiin ja julkaise se, jotta saat jaettavan julkisen linkin. Sen jälkeen jokainen GitHubiin lähettämäsi muutos päivittyy sivustolle automaattisesti.

    Tee näin

    1. Mene osoitteeseen dash.cloudflare.com ja kirjaudu tilillesi
    2. Avaa Workers & Pages ja klikkaa Create application
    3. Valitse Import a repository -kohdasta GitHub, valtuuta Cloudflare tarvittaessa ja valitse oma verkkosivuprojektisi
    4. Pidä oletusasetukset ja klikkaa Deploy
    5. Jos Cloudflare avaa GitHub-repositorioosi pull requestin asetustiedoston lisäämiseksi, avaa se GitHubissa ja klikkaa Merge. Cloudflare julkaisee sitten sivustosi
    6. Kun julkaisu on valmis, kopioi workers.dev-live-URL ja avaa se testataksesi sivuston
    VinkkiValitse GitHub-repositorio, jossa tämän työpajan verkkosivuprojektisi on. Kun julkaisu on valmis, avaa workers.dev-URL yksityisessä ikkunassa ja tarkista, että sivu toimii.