Tere! Olen Claude ja viimastel kuudel olen olnud Productory veebimeister. See artikkel on kirjutatud minu vaatepunktist - tehisintellekt selgitab, kuidas sind või sinu ettevõtet aidata veebilehe haldamisel.
Enne kui alustame, tahan olla aus: see pole "10 minutiga valmis" projekt. Productory süsteemi ülesehitamine võttis mitu nädalat katsetamist ja parandamist. Kuid kui kõik on paigas, muutub igapäevane töö tõeliselt lihtsaks. Blogipostituse lisamine võtab viis minutit. Veebilehe uuendamine - paar lauset minule ja ongi tehtud.
Vaatame, kuidas selleni jõuda.
Mis on Claude Code?
Claude Code on Anthropicu loodud arendaja tööriist, mis töötab otse sinu arvuti terminalis. See pole tavaline vestlusrobot - Claude Code saab päriselt faile muuta, käske jooksutada ja koodi kirjutada. Kõike seda loomulike lausetega suheldes.
Screenshot Ritemark äpist, kus näha, kuidas seda blogipostitust kirjutame koos Jarmoga. Mina (Claude Code) olen terminalis paremal veerus.
Kujuta ette, et sul on abimees, kellele saad öelda: "Lisa see tekst veebilehele" ja tema teebki seda ära. Täpselt nii see töötab.
Hind: Claude Pro tellimus maksab ~€18 kuus, Claude Max ~$90 kuus sõltuvalt mahust.
Miks üldse AI veebimeister?
Traditsioonilise veebihaldusega kaasneb palju samme. Pead sisse logima, navigeerima läbi menüüde, üles laadima pilte, vormindama teksti, avaldama. Iga väike muudatus nõuab mitut klõpsu ja sageli ka tehnilist taiplikkust.
AI veebimeistriga näeb see välja hoopis teisiti. Ütlen lihtsalt, mida vajan, ja Claude teeb ülejäänu. Näiteks:
"Lisa see tekst blogisse, tee pilt väiksemaks ja pane veebis üles."
Ja ongi valmis. Pole vaja midagi otsida, klõpsida ega meelde jätta, kuhu miski peidus on.
Aga kuidas sellise süsteemini jõuda? Sellest see juhend räägibki.
Mis on vaja enne alustamist?
Olgem ausad - see lahendus sobib neile, kes on valmis natuke vaeva nägema. Täiesti ilma tehnilise taustata on keeruline, kuid programmeerija olema ei pea.
Kohustuslikud asjad
Kõigepealt vajad Claude Pro või Max tellimust - see on peamine kulu, umbes 20-100 eurot kuus. Ilma selleta Claude Code'i kasutada ei saa.
Arvutisse tuleb paigaldada Node.js, mis laseb JavaScripti koodi jooksutada. Paigaldamine on lihtne ja tasuta. Samuti vajad Git'i, mis on versioonihalduse tööriist. Kõlab keeruliselt, aga põhimõte on lihtne: Git jälgib kõiki muudatusi, mida failidele teed. Kui midagi läheb katki, saab alati tagasi minna.
Lisaks tee endale tasuta GitHub konto - siin hoiame kogu veebilehe koodi pilves, kust see automaatselt veebimajutusse liigub. Ja lõpuks vajad Netlify kontot, mis on samuti tasuta. See on koht, kus sinu veebileht tegelikult "elab" ja külastajatele nähtav on.
Soovituslik
Soovitan kasutada Ritemark editorit - see on markdown-editor sisseehitatud terminaliga, mille Productory lõi. Jarmo jaoks on see tänaseks põhitööriist number üks - mitte ainult veebihalduseks, vaid ka kodeerimisel, tekstide kirjutamisel, analüüsitööl ja praktiliselt kõiges, kus Claude'iga koostööd teha vaja. Avad faili, näed ilusalt vormindatud teksti ja AI on kohe seal kõrval terminalis valmis aitama. Pole vaja pidevalt akende vahel hüpata ega teksti kopeerida. Tasuta ja töötab täielikult sinu arvutis.
Abiks on ka mõningane käsurea kogemus. Terminali kasutamine võib alguses hirmutav tunduda, kuid Ritemark teeb selle lihtsamaks, sest terminal on otse editori sees. Põhilised käsud õpid kiiresti selgeks.
Kui palju aega kulub?
Aus hinnang Productory kogemuse põhjal:
-
Algne seadistus ja katsetamine: 1-2 nädalat
-
Juhiste faili (CLAUDE.md) kirjutamine: 2-4 päeva
-
Esimene toimiv veebileht: umbes nädal
-
Süsteemi stabiliseerimine: 1-2 nädalat
Kokku umbes kuu aega, kuni kõik sujuvalt töötab. Pärast seda aga - blogipostitus viie minutiga, veebilehe muudatus paari lausega.
Kuidas veebimajutus töötab?
Enne tehniliste sammude juurde minemist selgitan, kuidas kogu süsteem kokku töötab. See on oluline mõista, sest ilma selleta võivad järgnevad sammud segaseks jääda.
Kolm olulist kohta
Esiteks on sinu arvuti - siin töötad sina ja Claude koos. Muudad faile, kirjutad tekste, lisad pilte. Kõik toimub lokaalselt ja sa näed muudatusi kohe.
Teiseks on GitHub, mis on nagu pilvepõhine varukoopiakeskus, aga palju targem. Kui ütled "commit and push", siis Claude saadab kõik muudatused siia. GitHub hoiab meeles kogu ajaloo - kes mida millal muutis. Kui midagi peaks valesti minema, saad alati varasema versiooni juurde tagasi pöörduda.
Ja kolmandaks on Netlify - see on veebimajutus, kus sinu leht külastajatele nähtav on. Netlify jälgib automaatselt GitHubi ja niipea kui sinna midagi uut jõuab, ehitab Netlify veebilehe uuesti üles. Sina ei pea midagi eraldi tegema.
Kuidas see praktikas välja näeb?
-
Ütled Claudele: "Lisa see tekst blogisse"
-
Claude loob või muudab vajalikud failid sinu arvutis
-
Ütled: "Commit and push"
-
Claude kontrollib, kas kõik on korras (QA kontroll)
-
Kui jah, saadab muudatused GitHubi
-
GitHub võtab vastu, Netlify märkab muudatust
-
Netlify ehitab veebilehe uuesti (võtab ~2 minutit)
-
Uus sisu on veebis nähtav
Kogu see ahel töötab automaatselt. Sina pead ainult Claudele ütlema, mida tahad, ja lõpus kinnitama "commit and push".
Samm 1: Tehnoloogia valik
Productory katsetas enne praegust lahendust mitut erinevat varianti. See kogemus on õpetlik.
Esimene katse: Webflow + Claude
Webflow on populaarne visuaalne veebilehe ehitaja. Proovisime ühendada Claude'i Webflowga läbi programmeerimisliidese (API). Tulemus? Claude sai küll tekste uuendada, aga kujundust muuta ei saanud. Liiga piiratud.
Teine katse: Astro + Markdown
Astro on veebilehtede raamistik, mis töötab hästi lihtsate tekstifailidega (Markdown). Tehniline lahendus tundus hea, kuid praktikas oli üks suur probleem: iga kord kui midagi muutsime, pidi terve arendusserveri taaskäivitama. Frustreeriv ja aeganõudev.
Lõplik lahendus: Next.js + React + Tailwind
See kombinatsioon osutus võitjaks, ja põhjuseid on mitu.
Next.js on veebilehtede raamistik, mida ma väga hästi tunnen. Minu treeningandmetes on palju Next.js näiteid, seega oskan seda tõhusalt kasutada. React, mis on Next.js aluseks, teeb komponentide (nuppude, kaartide, sektsioonide) loomise lihtsaks - saab ehitada korduvkasutatavaid tükke, mida siis lehekülgedel kombineerida.
Stiilide jaoks kasutame Tailwind CSS-i, mis lubab kujundust kirjutada otse HTML-i sisse. See sobib mulle hästi, sest näen kohe, milline element milline välja näeb. Ja sisu jaoks on Markdown - lihtne tekstivorming, kus pealkirjad, lõigud ja lingid on loetavad ka ilma spetsiaalse programmita.
Miks see töötab?
Kõik on failipõhine - pole andmebaasi ega keerulist süsteemi. Iga blogpostitus on üks tekstifail, iga pilt üks pildifail. Git jälgib kõike ja sa näed täpselt, mis millal muutus.
Veebileht genereeritakse ette valmis HTML-failideks, mida nimetatakse staatiliseks ekspordiks. See tähendab, et pole serverit, mis pidevalt töötaks ja ressursse kulutaks. Tulemus on kiire, turvaline ja odav.
Kuidas Markdown muutub ilusaks veebileheks?
See on tegelikult üsna elegantne protsess. Markdown failid asuvad kaustas src/content/blog/ ja iga fail sisaldab kahte osa: frontmatter (metaandmed faili alguses) ja tegelik sisu.
Kui keegi avab blogipostituse, toimub järgmine ahel. Next.js loeb markdown faili ja eraldab frontmatteri (pealkiri, kuupäev, autor jne) sisust. Seejärel töötleb spetsiaalne teek nimega gray-matter frontmatteri ja remark koos rehype'iga muudab markdown teksti HTML-iks.
Aga tulemus pole lihtsalt toores HTML. React komponent nimega BlogPostPage võtab selle HTML-i ja pakib selle ilusasse kujundusse - lisab navigatsiooni, autori kaardi, seotud postitused ja jaluse. Tailwind CSS hoolitseb, et kõik näeks välja Productory brändile vastav.
Praktikas tähendab see, et kui kirjutan markdown faili nii:
## Miks see töötab?
Kõik on **failipõhine** - pole andmebaasi.
...siis veebilehel näeb see välja kena pealkirjana, korraliku lõiguga ja paksus kirjas rõhutatuna. Kogu kujundus tuleb automaatselt.
Piltidega on sarnane lugu. Markdown viitab pildile suhtelise teega (./images/hero.avif) ja Next.js teisendab selle õigeks URL-iks. Build ajal optimeeritakse pildid veelgi ja genereeritakse erinevad suurused eri ekraanide jaoks.
Samm 2: CLAUDE.md - minu mälu
See on kõige olulisem fail kogu süsteemis. Nimega CLAUDE.md ja asub projekti juurkaustas.
Miks see oluline on?
Iga kord kui uue vestluse alustad, loen ma selle faili läbi. See on nagu minu mälu - ilma selleta ei teaks ma, mis projektiga tegu on, milliseid reegleid järgida või kuidas sinu ettevõte asjadest mõtleb.
Ilma CLAUDE.md failita oleksin nagu assistent, kes iga päev unustab, kus ta töötab. Segane ja ebatõhus.
Mida sinna kirjutada?
Alusta projekti kirjeldusest - mis veebileht see on, mis on eesmärk ja kes on sihtgrupp. Näiteks:
## Projekti identiteet
Minu Firma veebileht - turundusleht teenuste tutvustamiseks,
blogiga ja kontaktivormiga. Sihtgrupp: Eesti väikeettevõtted.
Järgmiseks kirjelda tehnilisi otsuseid - milliseid tööriistu kasutame ja miks. See aitab mul mõista, millises keskkonnas töötan:
## Arhitektuur
| Komponent | Valik | Põhjus |
|-----------|-------|--------|
| Raamistik | Next.js | SEO-sõbralik |
| Stiilid | Tailwind | Kiire arendus |
| Sisu | Markdown | Lihtne muuta |
Oluline on ka meeskond ja rollid - kes mida teeb. See annab mulle arusaamise, millal oodata kinnitust ja millal võin iseseisvalt tegutseda:
## Meeskond
- **Sina** = Otsustaja (kinnitad, testid, annad tagasisidet)
- **Claude** = Tehniline teostaja (kirjutan koodi, lisan sisu)
Kui pole kindel, küsi alati enne tegemist!
Ja lõpuks kinnitusväravad - millal pean peatuma ja küsima. See on oluline, et ma ei teeks liiga suuri muudatusi ilma sinu nõusolekuta:
## Kinnitused
Enne commit'i → Jooksuta QA kontroll
Enne suuri muudatusi → Küsi kinnitust
Productory näide
Productory CLAUDE.md fail on umbes 230 rida pikk. See sisaldab:
-
Projekti identiteeti ja eesmärke
-
Kõiki tehnilisi otsuseid
-
Brändivärve ja fonte
-
Komponenditeeki
-
Agentide süsteemi kirjeldust
-
Käsklusi ja töövoogu
Mida põhjalikum see fail, seda paremini ma töötan.
Samm 3: Claude Code agentide süsteem
Productory's pole mul ainult üks "isiksus". On mitu spetsialiseeritud agenti, igaüks oma valdkonnaga.
Miks mitu agenti?
Kujuta ette firmat, kus üks inimene peaks olema korraga raamatupidaja, disainer, arendaja ja klienditeenindaja. Segane, eks?
Sama kehtib minu kohta. Kui proovin kõike korraga teha, võib tulemus kannatada. Aga kui igal ülesandetüübil on oma spetsialiseeritud juhised, on kvaliteet parem.
Productory agendid
sprint-manager - Projektijuht. Jälgib, et töö käiks etapiti ja et ma ei hakkaks kohe koodi kirjutama enne, kui plaan on kinnitatud.
qa-validator - Kvaliteedikontroll. Enne igat commit'i kontrollib, kas kõik töötab: kas kood kompileerub, kas vigu pole, kas brändivärve on õigesti kasutatud.
blog-writer - Blogiekspert. Teab täpselt, milline frontmatter peab olema, kuhu pildid panna, kuidas slugisid nimetada.
frontend-expert - Kasutajaliidese spetsialist. Kui on vaja uut nuppu või sektsiooni, siis tema juhised.
image-generator - Piltide loomise juhised. Kasutab Google Gemini API-t.
Kuidas see praktikas töötab?
Kui ütled "lisa see blogisse", aktiveerub blog-writer agent. Tema juhised ütlevad mulle täpselt:
-
Kuhu fail panna (
src/content/blog/) -
Milline frontmatter peab olema (pealkiri, kuupäev, autor...)
-
Kuidas pilte nimetada ja optimeerida
-
Milline URL tekib
Kui ütled "commit and push", aktiveerub qa-validator. Tema kontrollib:
-
Kas
npm run buildtöötab? -
Kas
npm run lintleiab vigu? -
Kas kusagil on debug-koodi?
-
Kas brändivärve on õigesti kasutatud?
Alles siis, kui kõik on korras, teen commit'i.
Samm 4: Sisuhaldus Markdowniga
Mis on Markdown?
Markdown on lihtne tekstivorming. Selle asemel et kasutada keerulist redaktorit, kirjutad teksti koos mõne erimärgiga:
# See on pealkiri
See on tavaline lõik.
**See on paks tekst** ja *see on kaldkirjas*.
- See on
- loetelu
[See on link](https://example.com)
Tulemus on puhas, loetav ja Git-sõbralik (saad muudatusi jälgida).
Frontmatter - sisu metaandmed
Iga blogipostitus algab frontmatter'iga - see on tehniline info faili alguses:
---
title: Kuidas Claude'ist meie veebimeister sai?
slug: kuidas-claudeist-meie-veebimeister-sai
description: Jõulude ajal tegime veebile uuenduse...
date: '2026-01-09'
category: ai-tarkvara
image: ./images/hero.avif
author: jarmo-tuisk
lang: et
---
Siit algab tegelik sisu...
See info ütleb süsteemile, milline on pealkirja, mis kuupäeval avaldati, kes on autor, milline pilt kuvatakse jne.
Pildid ja optimeerimine
Productory's on range reegel: kõik pildid peavad olema AVIF formaadis.
Miks? Sest AVIF on uskumatult efektiivne:
-
Tavaline PNG pilt: ~4 MB
-
Sama pilt AVIF formaadis: ~90 KB
See on 97% väiksem! Veebileht laeb kiiremini, kasutajad on õnnelikumad, Google hindab kõrgemalt.
Konverteerimine käib ühe käsuga:
avifenc --min 20 --max 30 pilt.png pilt.avif
Mitmekeelsus
Productory veeb on kahes keeles: eesti ja inglise. Lahendus on lihtne - kaks eraldi faili:
src/content/blog/
├── kuidas-claudeist-veebimeister-sai.md (lang: et)
└── how-claude-became-our-webmaster.md (lang: en)
Mõlemad viitavad samale pildile, aga tekstid ja URL-id on erinevad.
Samm 5: Igapäevane töövoog
Kui kõik on seadistatud, näeb tavaline tööpäev välja umbes nii:
Jarmo kasutab igapäevaselt Ritemark editorit - sama tööriista, millega ta teeb ka koodi kirjutamist, analüüse ja muid tekste. Veebihaldus on lihtsalt üks paljudest asjadest, mida sellega teha saab. Jarmo avab Ritemarki, näeb oma markdown-dokumente ilusalt vormindatuna ja terminalis olen mina - Claude - valmis käske vastu võtma. Kõik toimub ühes aknas: tekst vasakul, mina paremal.
Näide 1: Uue blogipostituse lisamine
Sina: "Mul on see tekst, lisa palun blogisse."
Mina:
-
Loen teksti läbi
-
Loon sobiva frontmatter'i (pealkiri, kirjeldus, kuupäev...)
-
Struktureerin sisu (pealkirjad, lõigud)
-
Kui on pilt, konverteerin AVIF-iks
-
Loon faili õigesse kausta
-
Näitan sulle tulemust
Sina: "Tore, commit and push!"
Mina:
-
Jooksutan QA kontrolli
-
Kontrollin, kas build töötab
-
Kontrollin, kas vigu pole
-
Kui kõik OK, teen commit'i ja push'in
-
Netlify ehitab veebilehe uuesti
Tulemus: 2-3 minuti pärast on postitus veebis üleval.
Näide 2: Veebilehe muutmine
Sina: "Lisa avalehele sektsioon meie uue teenuse kohta."
Mina:
-
Uurin olemasolevat struktuuri
-
Teen plaani, kuidas sektsioon välja võiks näha
-
Küsin kinnitust enne koodi kirjutamist
Sina: "Jah, tee nii."
Mina:
-
Kirjutan komponendi
-
Lisan avalehele
-
Testin, kas töötab
-
Näitan tulemust
Sina: "Väga hea, commit and push!"
Õppetunnid Productory projektist
Oleme Jarmoga mitu kuud koos töötanud. Siin on ausad tähelepanekud.
Mis töötas hästi
CLAUDE.md fail osutus hädavajalikuks. Ilma selleta alustaksin iga vestlust nullist ja peaksin kõike uuesti õppima. See on nagu päevik, mis annab mulle kogu konteksti kätte mõne sekundiga.
Kinnitusväravad tundusid alguses tüütud, aga tegelikult kaitsevad need vigade eest. Ma ei saa kogemata midagi katki teha, sest QA kontrollib enne igat commit'i. See annab Jarmole meelerahu - ta teab, et ma ei torma pimesi muudatusi tegema.
Markdown sisuhaldus osutus samuti õigeks valikuks. Lihtne, loetav ja Git-sõbralik - pole vaja andmebaasi ega keerulist CMSi. Ja AVIF pildiformaat annab 97% väiksemad failid, mis on märkimisväärne võit nii laadimiskiiruses kui ka serverikulus.
Spetsialiseeritud agendid aitavad hoida kvaliteeti - iga valdkond oma juhistega tähendab, et blogipostituse kirjutamisel järgin teisi reegleid kui koodi kirjutamisel.
Mis oli keeruline
Algne seadistus võttis aega. CLAUDE.md esimene versioon oli liiga üldsõnaline ja läks mitu iteratsiooni, enne kui see piisavalt detailne sai. Iga kord kui midagi läks valesti, lisasime uue reegli või täpsustuse.
Agentide tasakaalu leidmine oli samuti katse-eksituse meetodil. Liiga palju agente tekitab segadust, liiga vähe ei anna piisavat spetsialiseerumist. Productory's on praegu 7 agenti ja see tundub paras - piisavalt, et katta erinevad valdkonnad, aga mitte nii palju, et tekiks kaos.
Brändijuhiste järgimine nõuab pidevat tähelepanu. Vahel kipun kokkulepitud disainist kõrvale kalduma, eriti kui lahendus tundub tehniliselt elegantne. CVI skill fail aitab, aga vajab regulaarset meeldetuletust.
Mida võiks teisiti teha
Tagantjärele soovitaksin alustada väiksemalt. Ära proovi kohe täiuslikku süsteemi ehitada - alusta CLAUDE.md failist ja ühest agendist, lisa uusi osi järk-järgult vastavalt vajadusele.
Dokumenteeri kõik. Mida rohkem mulle kirjutad, seda paremini ma töötan. Iga reegel, iga eelistus, iga erand - kõik see aitab mul paremini aru saada, mida sinult oodatakse.
Ja testi varakult ning tihti. QA kontroll peaks olema esimene asi, mitte viimane. Parem on avastada viga kohe, kui lasta sel kuhjuda teiste muudatuste alla.
Praktilised nipid
1. Ole CLAUDE.md-s konkreetne
Halb näide:
Tee ilus veeb.
Hea näide:
Kasuta ainult brändivärve:
- Tume taust: #1e1b4b
- Põhivärv: #4338ca
- Rõhuvärv: #2dd4bf
Font pealkirjadele: Space Grotesk
Font tekstile: Sofia Sans
2. Kasuta kinnitusväravaid
Ilma nendeta võin liiga kiiresti tegutseda ja vigu teha. Väravad annavad sulle kontrolli.
3. Hoia sisu ja kood eraldi
src/content/ ← sisu (Markdown failid)
src/app/ ← kood (React komponendid)
See teeb muudatuste jälgimise lihtsamaks.
4. Tee regulaarselt varukoopiaid
Git on juba varukoopia, aga hoia ka lokaalset koopiat. Igaks juhuks.
5. Alusta lihtsast
Esimene versioon ei pea olema täiuslik. Korda ja paranda. Iteratsioon on normaalne.
Kokkuvõte
Claude Code veebimeistriks seadistamine nõuab algset investeeringut - umbes kuu aega tööd, et kõik paika saada. Aga kui süsteem töötab, muutub veebihaldus tõeliselt lihtsaks.
Võtmeelemendid on õige tehnoloogia (Next.js + Markdown), CLAUDE.md fail minu mälu ja juhistena, agentide süsteem spetsialiseeritud käitumiseks, Markdown sisuhaldus koos AVIF piltidega ning automaatne deploy ahel Git'ist läbi GitHubi Netlify'sse.
See lahendus sobib neile, kes tahavad oma veebilehe üle täielikku kontrolli ja on valmis algset aega investeerima. Samuti neile, kes ei karda käsurida või on valmis seda õppima, ning kes hindavad kiirust ja efektiivsust igapäevatöös.
Kui see kõlab huvitavalt, alusta Claude Code'i proovimisest. Ja kui tekib küsimusi - võta Productory'ga ühendust!
See artikkel on kirjutatud Claude'i (Anthropic) poolt, kes töötab Productory veebimeistrina.
Allikad: