# Susikurk naują svetainę per 1 valandą > Nuo tuščio lapo iki veikiančios svetainės su savo domenu. Su AI, nemokamu hostingu ir be nė vienos kodo eilutės. ## Ką realiai padarysime per valandą Būkime sąžiningi iš karto: per valandą nepadarysime elektroninės parduotuvės ar sudėtingos sistemos. Bet padarysime tai, ko daugumai smulkių įmonių iš tikrųjų reikia — **nedidelę svetainę iš keturių puslapių**: - **Pagrindinis** — kas jūs ir ką siūlote; - **Paslaugos** (arba **Prekės**) — ką konkrečiai galima iš jūsų gauti; - **Apie mus** — kodėl verta pasitikėti; - **Kontaktai** — kaip su jumis susisiekti. Su savo domenu, veikiančią telefone, nemokamai talpinamą. Ir be nė vienos kodo eilutės. ## Svarbiausia: jūs svetainės nekursite Šioje pamokoje jūs neišmoksite HTML ir nereikės nieko programuoti. Išmoksite kai ką naudingesnio ir ilgaamžiškesnio — **duoti užduotį AI ir priimti jos darbą**. Skirtumas esminis. Mygtukų vietos keisis, įrankiai keisis, bet gebėjimas aiškiai paaiškinti, ko norite, ir patikrinti rezultatą veiks visur: svetainei, sutarties juodraščiui, „Excel" formulei ar reklamos tekstui. Todėl visoje pamokoje bus du keliai:

🤖 AI kelias rekomenduojama

AI padaro, jūs tvirtinate

Naudojate AI, kuri gali ne tik rašyti, bet ir veikti: kurti failus, įkelti juos į GitHub, paskelbti Cloudflare. Jūsų darbas — paaiškinti, patikrinti ir patvirtinti.

Tokios yra AI su įrankiais, dažnai vadinamos agentais (pvz. Claude Code, Cursor, ChatGPT su prijungtais įrankiais).

✋ Rankinis kelias

AI parašo, jūs nukopijuojate

Naudojate įprastą AI pokalbį (ChatGPT, Claude, Gemini). Jis parašo failus, o jūs juos patys įkeliate ir paspaudžiate mygtukus.

Tinka, jei agento neturite arba norite viską matyti savo akimis.

Rezultatas abiem atvejais tas pats. Skiriasi tik tai, kiek darbo padarote jūs. ## Ko reikia pradėti Trys dalykai, visi nemokami: 1. **AI pokalbis** — ChatGPT, Claude, Gemini ar Copilot. Turite? Puiku. 2. **GitHub paskyra** — svetainės failams ir versijų istorijai. 3. **Cloudflare paskyra** — talpinimui. Abiejose galima jungtis su Google paskyra. Ir dešimt minučių informacijos apie savo verslą — apie tai kitame žingsnyje. ## Paruoštas promptas: pradėkite nuo šito Nekurkite prompto patys. Nukopijuokite šį, užpildykite laužtinius skliaustus ir įklijuokite į AI pokalbį. Viskas kita — jau jo darbas. ```text Tu esi mano svetainės kūrėjas. Aš turiu verslą, tu — įrankius ir laiką. KONTEKSTAS - Įmonė: [pavadinimas] - Veikla: [ką darote, vienu sakiniu] - Klientai: [kam tai skirta] - Miestas ar regionas: [kur dirbate] - Ko noriu iš lankytojo: [skambučio / užklausos / užsakymo] UŽDUOTIS Sukurk keturių puslapių svetainę: pagrindinis, paslaugos, apie mus, kontaktai. Atskiri HTML failai su įdėtu CSS, be išorinių bibliotekų. Bendra navigacija tarp puslapių, skirtingi title ir meta description kiekvienam puslapiui. Šviesus, tvarkingas dizainas, gerai veikiantis telefone. EIGA — labai svarbu 0. ĮRANKIAI. Pirmiausia pasakyk, ką gali pats: kurti failus, naudoti terminalą, valdyti naršyklę, jungtis prie GitHub ar Cloudflare. Ko negali — pasakyk iš karto. 1. KLAUSK. Tada užduok man klausimus, kurių atsakymų trūksta — po vieną. Nieko nekurk, kol nesurinkai pakankamai informacijos. 2. PLANAS. Parodyk trumpą planą ir paklausk, ar tinka. 3. DARYK. Kurk tik gavęs mano sutikimą. TIKSLAS — veikiantis adresas internete, ne failai kompiuteryje - Nesustok ties zip failu ar atsisiuntimu. Darbas baigtas tada, kai svetainė pasiekiama internetu. - Viską, ką gali padaryti pats, padaryk pats: sukurk GitHub repozitorijų, sudėk failus, prijunk Cloudflare Pages, paskelbk. - Jei reikia mano prisijungimo ar leidimo — pasakyk tiksliai, ką paspausti, palauk, kol patvirtinsiu, ir TĘSK darbą toliau. - Jei ko nors negali padaryti visai — duok man tikslius žingsnius ir liepk pranešti, kai padarysiu; tada tęsk. TAISYKLĖS - Rašyk lietuviškai, dalykiškai, be tuščių frazių tipo „inovatyvūs sprendimai". - NIEKO NEIŠGALVOK apie mano įmonę: nei veiklos metų, nei klientų skaičiaus, nei sertifikatų, nei atsiliepimų. Trūksta fakto — klausk manęs. - Naudok tik tuos kontaktus ir rekvizitus, kuriuos pateiksiu. - Kur reikia nuotraukos, o aš jos dar neturiu, palik aiškiai pažymėtą vietą. PABAIGOJE Parašyk: ką sukūrei, kokie failai, ir atskirai — KO NEPATIKRINAI, ką turėčiau peržiūrėti pats. ``` Viskas. Toliau pamokoje — ką AI paklaus, ką jam atsakyti ir ką būtinai patikrinti prieš rodant svetainę klientams. ## Dažniausia kliūtis: AI sustoja ties zip failu Šitą išbandėme patys, todėl perspėjame iš anksto. Be aiškaus nurodymo AI dažnai padaro failus, supakuoja į zip ir mandagiai pasiūlo: *„kai būsite pasiruošę, galiu padėti sudėti tai į GitHub"*. Skamba paslaugiai, bet svetainės internete jūs vis tiek neturite. Priežastis paprasta: modeliai linkę sustoti ties saugiu rezultatu, jei niekas nepasakė, kur finišas. Todėl prompte ir yra eilutė **„Nesustok ties zip failu"**. Jei vis tiek sustojo — parašykite tiesiai: ```text Nesustok. Tikslas — veikiantis adresas internete. Padaryk viską, ką gali pats. Kur reikia mano prisijungimo — pasakyk, ką paspausti, palauk patvirtinimo ir tęsk toliau, kol svetainė bus paskelbta. ``` Ir dar vienas patarimas: **paklauskite AI, ką jis apskritai moka.** Vieni įrankiai tik rašo tekstą, kiti gali kurti failus, valdyti naršyklę ar jungtis prie jūsų paskyrų. Nuo to priklauso, kiek darbo liks jums — todėl prompte pirmas žingsnis ir yra „pasakyk, ką gali pats". ## Ko nepatikrino — skaitykite šitą dalį atidžiai Prompto pabaigoje prašome AI atskirai surašyti, **ko jis nepatikrino**. Tai vertingiausia atsakymo dalis. Realus pavyzdys iš mūsų bandymo. AI pabaigoje parašė maždaug taip: > El. pašto adresą perrašiau tiksliai taip, kaip pateikėte. Patikrinkite, ar > nėra rašybos klaidos — įmonės pavadinime rašote vienaip, o el. pašte kitaip. > Svetainės realioje naršyklėje neatidariau ir telefone netikrinau. > Tekstų tonas ir spalvos — mano pasirinkimas, su jumis nesuderintas. Trys dalykai vienu metu: rado **tikrą rašybos klaidą** kliento duomenyse, sąžiningai pasakė, kad **netikrino naršyklėje**, ir įvardijo, kur priėmė sprendimus **už jus**. Be to sakinio prompte būtumėte gavę tik „viskas paruošta" — ir klaidingą el. paštą svetainėje. ## Kodėl ne vienas puslapis Vienas ilgas puslapis atrodo paprasčiau, bet turi vieną trūkumą, kuris kainuoja klientus: **Google ir AI paieška rodo puslapius, ne svetaines.** Turėdami atskirą „Paslaugos" puslapį, galite būti rasti pagal konkrečią paslaugą. Turėdami viską viename, konkuruojate tik vienu adresu — ir dažniausiai pralaimite tam, kas turi atskirą puslapį būtent tai paslaugai. Be to, atskiri puslapiai lengviau prižiūrimi: pakeitėte kainą — taisote vieną vietą, o ne ieškote jos ilgame tekste. ## Nuo ko iš tikrųjų prasideda: el. pašto paskyra Prieš svetainę reikės susikurti paskyras keliose vietose — hostingui, domenui, AI įrankiams. Visos jos prasideda nuo el. pašto. Paprasčiausias kelias — **prisijungti su Google paskyra** („Sign in with Google"). Taip nekuriate naujų slaptažodžių ir nereikia jų atsiminti. Tai rekomendacija, ne taisyklė — veiks ir bet koks kitas el. paštas. Bet du dalykai, kuriuos verta nuspręsti iš karto: - **Ta paskyra taps raktu į viską** — domeną, hostingą, svetainę. Todėl joje **būtinai įjunkite MFA** (žr. pamoką [Slaptažodžiai ir MFA be skausmo](/pamokos/slaptazodziai-ir-mfa)). Praradę tą paskyrą, prarasite ir svetainę. - **Verslui — įmonės, o ne asmeninė paskyra.** Klasikinė situacija: svetainė užregistruota buvusio darbuotojo asmeniniu gmail'u, o jo telefono niekas nebeturi. Naudokite `vardas@jusuimone.lt`. ## Pasiruošimas: 10 minučių, kurios sutaupys 40 Didžioji dalis žmonių valandą praleidžia ieškodami logotipo faile. Todėl prieš pradedant susidėkite į vieną aplanką: - **Logotipą** (jei turite) ir 3–5 nuotraukas. Neturite savo? Trys keliai: nemokamos nuotraukų bankuose ([Unsplash](https://unsplash.com), [Pexels](https://pexels.com)), **sugeneruotos su AI** arba tiesiog nufotografuotos telefonu. Apie AI nuotraukas — kitas žingsnis. - **Kontaktus**: telefoną, el. paštą, adresą, darbo laiką. - **Įmonės rekvizitus**: pavadinimą, kodą, PVM kodą. - **3–5 atsiliepimus** arba klientų pavadinimus, jei galite juos viešinti. Domeno kol kas nereikia — jį prijungsime pabaigoje. ## Nuotraukas irgi gali padaryti AI Neturite nuotraukų ir nenorite tų pačių, kurias naudoja pusė Lietuvos? Paprašykite AI (ChatGPT, Gemini ar kito įrankio su vaizdų generavimu): > Sukurk foninę nuotrauką svetainei: šviesi, rami, be teksto, be žmonių veidų, > horizontali, tinkanti [jūsų veiklai]. Realistiška, ne piešinys. **Kam AI nuotraukos tinka puikiai:** fonai, abstrakcijos, iliustracijos, piktogramos, nuotaikos vaizdai. **Kur riba, ir ji svarbi:** nekurkite netikrų savo komandos, patalpų ar produktų nuotraukų. „Mūsų komanda" su AI sugalvotais žmonėmis yra melas klientui — ir tas melas paaiškės pirmo susitikimo metu. Paprasta taisyklė: > AI nuotrauka gali **iliustruoti**, bet negali **liudyti**. Savo darbus, patalpas ir žmones fotografuokite telefonu. Netobula tikra nuotrauka parduoda geriau nei tobula netikra — ir ES taisyklės dėl AI turinio žymėjimo tik griežtėja. ## Turinys pirma. Visada Dažniausia klaida — pradėti nuo dizaino. Bet gražus tuščias puslapis nieko neparduoda, o AI iš gero turinio dizainą padaro per minutes. Atsakykite į penkis klausimus, po 2–3 sakinius: 1. **Ką jūs darote?** Vienu sakiniu, be „inovatyvių sprendimų“. 2. **Kam?** Kas jūsų klientas — kavinė Kaune ar 50 žmonių gamykla? 3. **Kodėl jūs?** Trys konkretūs dalykai. Ne „kokybė“, o „atvykstame per 4 val.“ 4. **Ką siūlote?** 3–6 paslaugos ar produktai. 5. **Ko norite iš lankytojo?** Skambučio? Užklausos? Vieno veiksmo, ne penkių. Šie penki atsakymai ir yra jūsų svetainė. Viskas kita — apipavidalinimas. ## Svarbiausia gudrybė: liepkite AI pirma klausti Dauguma žmonių AI parašo „padaryk svetainę“ ir gauna vidutinybę. Ne todėl, kad AI prastas, o todėl, kad jis spėlioja. Sprendimas paprastas ir veikia su bet kokia užduotimi: > **Pirma klausk. Tada planas. Tik tada daryk.** Prieš pagrindinę užduotį įklijuokite šias tris eilutes: > Prieš pradėdamas užduok man klausimus, kurių atsakymų trūksta — po vieną, > kol turėsi pakankamai. Tada parodyk trumpą planą ir paklausk, ar tinka. > Kurti pradėk tik tada, kai patvirtinsiu. Skirtumas didžiulis: vietoj išgalvotos „inovatyvios įmonės“ gausite puslapį apie **savo** verslą, nes AI paklaus to, ko nežino, užuot tai sugalvojęs. ## Projekto taisyklės: promptas, kurį rašote vieną kartą Rimtesniems darbams verta turėti nuolatinį promptą — savotišką projekto konstituciją, kurią pateikiate AI kaskart. Mes patys taip dirbame su klientų svetainėmis. Struktūra tokia: 1. **Kas tu esi.** „Tu esi mano svetainės kūrėjas.“ 2. **Ką turime.** Kur svetainė laikoma, kur domenas, kuo redaguojamas turinys. 3. **Principai.** Kas nekeičiama: logotipas, spalvos, kalba, greitis. 4. **Eiga.** Klausk → planas → daryk → patikrink. 5. **Ko niekada nedaryti.** Neišgalvoti faktų, nedėti slaptažodžių į tekstą, nekeisti to, ko neprašiau. 6. **Kaip atsiskaityti.** Ką pakeitei, kur tai matosi ir **ko nepatikrinai.** Šeštas punktas — vertingiausias. AI mielai pasako „viskas veikia“. Paprašius atskirai nurodyti, kas liko nepatikrinta, atsiranda sąžiningas atsakymas, o jūs žinote, kur pažiūrėti savo akimis. ## AI padaro pirmą versiją Dabar atverkite bet kurį AI pokalbį ir įklijuokite savo atsakymus su tokia užduotimi: > Sukurk keturių puslapių svetainę mano įmonei. Pateikiu atsakymus į penkis > klausimus žemiau. Padaryk keturis atskirus HTML failus su įdėtu CSS, be išorinių > bibliotekų, kad veiktų atidarius failą: > `index.html` (pagrindinis), `paslaugos.html`, `apie.html`, `kontaktai.html`. > Visuose puslapiuose ta pati viršutinė navigacija su nuorodomis tarp jų ir ta pati > poraštė su rekvizitais. Kiekvienam puslapiui parašyk skirtingą `title` ir > `meta description`. Šviesus, tvarkingas dizainas, gerai veikiantis telefone. > Tekstus rašyk lietuviškai, dalykiškai, be tuščių frazių. Nieko neišgalvok — > naudok tik tai, ką pateikiau. Prieš pradėdamas užduok klausimus, jei ko nors trūksta. Gausite keturis failus. Sudėkite juos į vieną aplanką (nuotraukas — į poaplankį `img`) ir atidarykite `index.html` naršyklėje — svetainė jau veikia jūsų kompiuteryje, o nuorodos tarp puslapių veikia be interneto. Svarbu: **kiekvieno puslapio `title` turi skirtis.** Būtent jį Google rodo rezultatuose, ir būtent dėl to atskiri puslapiai laimi paiešką. Dizainui pagerinti galite naudoti ir [Google Stitch](https://stitch.withgoogle.com) — jis generuoja maketus iš teksto. ## Ką AI visada padaro blogai Būtinas žingsnis, kurio niekas nepraleidžia nebaudžiamas. Perskaitykite tekstą ir išmeskite: - **Išgalvotus faktus.** „Patirtis nuo 2009“, „200 patenkintų klientų“ — jei to nepateikėte, AI tai sugalvojo. Tai ir reputacijos, ir teisinė rizika. - **Tuščias frazes.** „Inovatyvūs sprendimai“, „individualus požiūris“ — jas rašo visi, todėl jos nieko nereiškia. - **Netikrus kontaktus.** AI mielai įrašo `info@example.com` ir +370 600 00000. - **Angliškus likučius** — „Learn more“, „Our Services“. Taisyklė: **viskas, ką galima patikrinti, turi būti tiesa.** ## Tvirtas pagrindas: versijų kontrolė ir automatinis talpinimas Čia yra vieta, kurioje dauguma pasirenka greitą kelią ir vėliau gailisi. Failus galima tiesiog nutempti į talpinimo paslaugą — veiks. Bet po mėnesio kas nors pakeis tekstą, kas nors kitas ištrins nuotrauką, o dar po savaitės svetainė „kažkodėl nebeveikia" ir niekas nebeprisimena, kas buvo prieš tai. Todėl padarykime iš karto teisingai. Reikia dviejų nemokamų dalykų: - **GitHub** — saugo visus failus ir **kiekvieno pakeitimo istoriją**; - **Cloudflare Pages** — talpina svetainę ir **paskelbia ją automatiškai**, vos tik kas nors pasikeičia GitHub. Ką tai duoda praktiškai: - **Kiekvienas pakeitimas turi datą, autorių ir aprašymą.** Matote, kas ir kada pakeitė kainą. - **Bet kada galima grįžti į ankstesnę versiją** — vienu paspaudimu, per kelias sekundes. Sugadinta svetainė nustoja būti katastrofa. - **Paskelbimas automatinis.** Pakeitėte tekstą — po minutės jis jau svetainėje. - **Failai niekada nedingsta**, net jei sudegtų kompiuteris. Ir svarbiausia pradedančiajam: **komandinės eilutės nereikia.** Viską padarysite naršyklėje. Būtent taip mes dirbame ir su klientų svetainėmis. ## Susikuriame pagrindą (vieną kartą) Reikės dviejų nemokamų paskyrų: [GitHub](https://github.com) ir [Cloudflare](https://dash.cloudflare.com). Abiejose galima jungtis su Google paskyra. Toliau — du keliai.

🤖 AI kelias rekomenduojama

Pasakykite, ko norite

„Sukurk privatų GitHub repozitorijų `mano-svetaine`, sudėk į jį šios svetainės failus, tada prijunk jį prie Cloudflare Pages ir paskelbk. Baigęs parašyk adresą, kuriuo svetainė pasiekiama, ir ką dar reikėtų patikrinti man pačiam. Jei reikės mano prisijungimo — pasakyk, ką paspausti, palauk ir tęsk."

Ta paskutinė eilutė svarbi. Be jos AI dažnai sustoja ties failais ir tik pasiūlo padėti paskelbti.

Agentas paprašys leidimo prisijungti prie jūsų paskyrų — leidimą duodate jūs, o slaptažodžių jam nerodote.

Jūsų darbas: patvirtinti veiksmus ir pabaigoje atidaryti gautą adresą — ar tikrai veikia.

✋ Rankinis kelias

Penki žingsniai naršyklėje

  1. GitHub → New repository, pavadinkite mano-svetaine, pasirinkite Private.
  2. Add file → Upload files, nutempkite HTML failus ir img aplanką.
  3. Apačioje aprašykite („pirma versija") → Commit changes.
  4. Cloudflare → Workers & Pages → Create → Pages → Connect to Git.
  5. Pasirinkite repozitorijų → Save and Deploy.
Po minutės turėsite veikiantį adresą, pvz. `mano-svetaine.pages.dev`. Nuo šiol **kiekvienas pakeitimas GitHub'e automatiškai atsiranda svetainėje.** ## Kaip keisti tekstą vėliau

🤖 AI kelias rekomenduojama

Pasakykite, ką pakeisti

„Kontaktų puslapyje pakeisk telefono numerį į +370 600 12345, atnaujink jį ir poraštėje, jei ten irgi yra. Padaryk commit su aiškiu aprašymu ir paskelbk."

AI suras visas vietas — įskaitant tą, kurią jūs pamirštumėte.

✋ Rankinis kelias

Pieštukas GitHub'e

  1. Atidarykite failą, pvz. kontaktai.html.
  2. Spauskite pieštuko piktogramą (Edit).
  3. Pakeiskite tekstą.
  4. Commit changes su trumpu aprašymu.
Po minutės pakeitimas jau svetainėje. O jei suklydote — kitas žingsnis. ## Kai kas nors sugenda: grįžimas atgal Tai ta dalis, dėl kurios visa tai ir darėme. - **Cloudflare** išsaugo kiekvieną paskelbtą versiją. **Workers & Pages → jūsų projektas → Deployments** — prie senesnės versijos spauskite **Rollback**. Svetainė grįžta į ankstesnę būseną per kelias sekundes. - **GitHub** saugo kiekvieno failo istoriją. Skiltyje **History** matote visus pakeitimus ir galite atkurti bet kurią versiją. Palyginkite su įprasta situacija, kai svetainę tvarko vienas žmogus savo kompiuteryje: ten „grįžti atgal" dažniausiai reiškia „padaryti iš naujo". ## Prijungiame savo domeną `jusu-imone.pages.dev` tinka testavimui, bet klientams reikia savo vardo. Domeną (.lt kainuoja apie 10–15 EUR metams) pirkite pas bet kurį registratorių. Tada Cloudflare projekte pasirinkite **Custom domains → Set up a domain** ir sekite instrukcijas — jos parodys, kokius įrašus pakeisti. Per kelias minutes (kartais valandas) jūsų svetainė bus pasiekiama adresu `jusuimone.lt`. HTTPS spynelė įsijungs automatiškai ir nemokamai. ## Būtini dalykai prieš rodant klientams Trumpas sąrašas, kurį verta pereiti: - **Kontaktai matomi iš karto**, be scrollinimo. Telefonas — nuoroda, kurią telefone galima paspausti. - **Įmonės rekvizitai poraštėje**: pavadinimas, kodas, adresas. - **Patikrinkite telefone.** Daugiau nei pusė lankytojų bus iš telefono. - **Privatumo politika**, jei turite kontaktų formą ar analitiką — renkate asmens duomenis, todėl Lietuvoje tai privaloma. - **Nuotraukų dydis.** 5 MB nuotrauka telefone kraunasi amžinybę; sumažinkite iki ~200 KB (pvz., [squoosh.app](https://squoosh.app)). ## Kad jus rastų — ir žmonės, ir AI Penkios minutės, kurios duoda daugiausiai naudos: - **Skirtingos antraštės (`title`) kiekvienam puslapiui** — „Paslauga mieste | Įmonė“ paslaugų puslapyje, „Kontaktai | Įmonė“ kontaktų. Tai didžiausia atskirų puslapių nauda: keturi puslapiai gali būti randami pagal keturias skirtingas paieškas. - **Aprašymas (`description`)**: vienas sakinys, kuris rodomas Google rezultatuose. - **Google Business profilis** — smulkiam verslui dažnai svarbesnis nei pati svetainė. - **Aiškus tekstas.** AI paieška (ChatGPT, Perplexity) skaito tą patį tekstą kaip Google. Kuo konkrečiau parašyta, ką ir kur darote, tuo dažniau būsite pasiūlyti. ## Jei įstrigote Dažniausios kliūtys ir sprendimai: - **AI grąžino kodą, o aš nežinau, ką su juo daryti** — paprašykite: „pateik kaip vieną HTML failą, kurį galėčiau atsisiųsti“. - **Svetainė atrodo blogai telefone** — parašykite AI: „padaryk, kad gerai veiktų telefone, tekstas nebūtų per mažas“. - **Domenas neveikia** — pakeitimai kartais užtrunka iki kelių valandų. Palaukite. - **Noriu keisti tekstą** — atidarykite failą GitHub'e, spauskite pieštuką, pataisykite ir patvirtinkite. Po minutės pakeitimas jau svetainėje. Neturite laiko arba norite, kad padarytume mes? **pagalba@itbroliai.lt** ## Pasitikrinkite Šeši klausimai apie tai, ką ką tik padarėte. Pabaigoje gausite sertifikatą su savo rezultatu.