„Astro“ svetainė per „Claude Code“: nuo aplanko iki paskelbimo
MarkdownŽingsnis po žingsnio vadovas: kaip sukurti svetainę su „Astro“ naudojant „Claude Code“, nemokant programuoti. Ką įdiegti, kokią komandą naudoti projektui sukurti ir kaip jį nemokamai paskelbti.
Skaityti visą straipsnį
Net žmogus, kuris niekada nėra parašęs nė vienos kodo eilutės, gali sukurti svetainę su „Astro“ naudodamas „Claude Code“. Jau seniai neberašau kodo ranka; viską darau žodžiais, pasitelkdamas DI, ir svetainės kūrimas su „Astro“ vyksta lygiai taip pat: paaiškinate, ko reikia, o „Claude“ parašo kodą už jus.
Dažniausiai problema yra ne pats kūrimas, o tai, kad procesas suskaidytas į dalis. Viename straipsnyje aiškinama, kaip įdiegti, kitame aptariamos komandos, trečiame — paskelbimas, o visas kelias taip ir nesusideda į vientisą vaizdą. Čia vesiu jus nuo tuščio aplanko iki svetainės, kurią galima atidaryti internete paspaudus nuorodą: ką įdiegti, kokią komandą naudoti projektui pradėti, kaip kurti puslapius naudojant „Claude Code“ ir kaip nemokamai paskelbti rezultatą. Remiuosi oficialia „Astro“ dokumentacija.
Apie darbą su paslauga skaitykite „Ailoot“ dokumentacijoje.
Ko reikia prieš pradedant?
Svarbiausios išvados
Jūsų kompiuteryje reikia trijų dalykų: naujesnės „Node.js“ versijos, kodo rengyklės ir terminalo. „Node.js“ yra aplinka, kurioje veikia šie įrankiai; šio straipsnio rašymo metu „Astro“ dokumentacijoje reikalaujama 22.12.0 arba naujesnės versijos ir įspėjama, kad nelyginės versijos, pavyzdžiui, 23, nepalaikomos. Rengyklė paprastai yra „VS Code“, kur veikia ir „Claude Code“. Terminalas — tai juodas komandų langas; jis jau yra integruotas į „VS Code“. Nereikia visko atskirai diegti vien dėl „Astro“: jei jau ką nors kūrėte naudodami „Claude Code“, jūsų aplinka paruošta.
Pačiam „Astro“ nereikia iš anksto nieko atsisiųsti — jis bus atsisiųstas kitaame žingsnyje įvesta komanda. Tačiau reikia aplinkos, kurioje visa tai veikia. „Astro“ pasiruošimą pradėti apibūdina taip — reikia trijų dalykų:
„Node.js“ — v22.12.0 arba naujesnė versija. Nelyginės versijos, pavyzdžiui, v23, nepalaikomos. Teksto rengyklė — rekomenduojame „VS Code“ su oficialiu „Astro“ plėtiniu. Terminalas — „Astro“ valdoma komandų eilute.
Pažvelkime, ką kiekvienas iš šių dalykų reiškia praktiškai:
- „Node.js“ — programa, be kurios neveiks nei „Astro“, nei dauguma vibe-coding įrankių. Atsisiųskite ją iš nodejs.org ir įdiekite kaip įprastą programą. Dokumentacijoje nurodomas versijos numeris laikui bėgant keičiasi, todėl prieš pradėdami apsilankykite „Astro“ diegimo puslapyje ir patikrinkite reikalavimą. Reikia lyginės versijos (22, 24); geriau vengti nelyginės (23, 25).
- „VS Code“ — nemokama „Microsoft“ rengyklė. Joje atidarote projekto aplanką; ten pat veikia ir „Claude Code“, kuris parašys kodą.
- Terminalas — langas komandoms įvesti. Jo atskirai diegti nereikia: jį atidarysite iš „VS Code“ meniu, o visas toliau pateiktas komandas įvesite ten.
Jei jau įdiegėte „Claude Code“ ir ką nors sukūrėte, visa tai jau turite, todėl šį žingsnį galite praleisti. Jei ne, skaitykite atskirą vadovą kaip įdiegti „Claude Code“.
Kaip sukurti „Astro“ projektą viena komanda?
Svarbiausios išvados
Naujas projektas sukuriamas terminale įvedus komandą npm create astro@latest. Paleidžiamas vedlys, kuris užduoda kelis klausimus (kur įdiegti, kurį šabloną naudoti, ar įdiegti priklausomybes), o tada sukuria projekto pagrindą. Jei projekto aplanko dar nėra, vedlys jį sukurs. Tuomet pereisite į projekto aplanką naudodami komandą cd ir galėsite pradėti. Iš anksto tuščio aplanko kurti nereikia.
Čia prasideda pats projektas, ir tam tereikia vienos komandos. Atidarykite terminalą ir įveskite:
npm create astro@latest
Bus paleistas diegimo vedlys. Štai ką apie jį rašo dokumentacija:
Komandą create astro galite paleisti bet kurioje kompiuterio vietoje, todėl nereikia iš anksto sukurti tuščio projekto aplanko. Jei to aplanko dar nėra, vedlys padės jį sukurti automatiškai.
Vedlys padės atlikti veiksmus ir užduos kelis klausimus: kaip pavadinti projekto aplanką, nuo kurio šablono pradėti ir ar iškart įdiegti priklausomybes. Kiekviename klausime galite pasirinkti numatytąsias parinktis — pirmajai svetainei tiks tuščias arba minimalus šablonas. Jei į klausimą apie priklausomybių diegimą atsakėte „ne“, vėliau įdiekite jas rankiniu būdu, projekto aplanke paleidę komandą npm install.
Baigęs darbą vedlys praneš, kad projektas sukurtas, ir pasiūlys kitą žingsnį — pereiti į projekto aplanką:
cd your-project-name
Štai ir viskas, ko reikia projektui sukurti. Jame jau yra veikiantis svetainės pagrindas: keli failai ir aplankai, naudojami puslapiui kurti. Jų rankiniu būdu redaguoti nereikės, tačiau pravartu žinoti, kas kur yra. „Astro“ privalomu laiko tik vieną aplanką:
src/pages — privalomas projekto poaplankis. Be jo svetainėje nebus nei puslapių, nei maršrutų.
Kitaip tariant, src/pages yra aplankas, kuriame laikomi svetainės puslapiai: pradžios, „apie mus“ ir kontaktų puslapiai. Netoliese paprastai yra src/components (pakartotinai naudojamos dalys, pavyzdžiui, antraštės ir mygtukai), src/layouts (bendras puslapių karkasas) ir aplankas public, skirtas vaizdams bei failams. Išdėstymo įsiminti nereikia — tik prisiminkite, kad puslapiai yra aplanke src/pages, ir paminėkite jį prašydami „Claude“: „pridėk kontaktų puslapį“.
Kaip sukurti pačią svetainę naudojant „Claude Code“?
Svarbiausios išvados
Atidarykite projekto aplanką „VS Code“, paleiskite „Claude Code“ ir žodžiais paaiškinkite, ko norite svetainėje. „Claude“ pats redaguoja failus aplanke src/pages ir gretimuose aplankuose. Geriausiai veikia mažos ir aiškios užduotys: „sukurk pagrindinį puslapį su antrašte, trumpu aprašymu ir mygtuku“, tada „pridėk paslaugų puslapį“, o po to „pakeisk spalvas į tamsias“. Po kiekvieno prašymo peržiūrėkite rezultatą naršyklėje ir, jei reikia, patikslinkite užduotį. Programuoti nereikia. Jūsų užduotis — aiškiai nurodyti, ko norite, ir patikrinti rezultatą.
Projekto pagrindas paruoštas; dabar pagal jį kuriama svetainė, o darbą perima „Claude Code“. Atidarykite projekto aplanką „VS Code“, paleiskite „Claude Code“ ir žodžiais apibūdinkite, ko jums reikia. Jis pats redaguoja failus aplanke src/pages ir gretimuose aplankuose — jums tereikia pateikti užduotis ir peržiūrėti rezultatą.
Mano patirtis rodo, kad geriausia dirbti mažais žingsniais. Vienas didžiulis prašymas, pavyzdžiui, „sukurk man įmonės svetainę“, baigiasi painiava, kurią sunku taisyti. Todėl suskaidykite užduotį į trumpas, aiškias dalis ir pateikite jas po vieną:
- „Sukurk pagrindinį puslapį: didelę antraštę, kelis sakinius apie tai, ką veikiu, ir mygtuką, nukreipiantį į kontaktų puslapį.“
- „Pridėk paslaugų puslapį su trijų skyrių sąrašu.“
- „Pridėk kontaktų puslapį su telefono numeriu ir nuoroda į „Telegram“.“
- „Pakeisk stilių: šviesus fonas ir didelis, lengvai įskaitomas šriftas.“
Patikrinkite kiekvieną žingsnį prieš tęsdami — taip lengviau pastebėsite, jei kas nors nepavyko, ir galėsite grįžti atgal. Kodėl mažos užduotys patikimesnės ir kaip padėti DI nenukrypti nuo tikslo — tai konteksto inžinerijos dalis: kuo aiškesnė užduotis ir projekto struktūra, tuo labiau nuspėjamas rezultatas.
„Astro“ suteikia DI patogią struktūrą: puslapio turinys atskirtas nuo stilių, o puslapiai kuriami pagal bendras taisykles. Dėl šios struktūros „Claude“ rečiau sutrinka ir mažiau tikėtina, kad redaguodamas vieną vietą sugadins ką nors greta. Jei „Claude“ staiga nustoja matyti jūsų failus arba atsako ne į temą, skaitykite vadovą kodėl „Claude Code“ nemato projekto failų.
„Astro“ yra tik viena darbo su DI sudedamoji dalis. Kad „Claude“ nuosekliai kurtų tai, ko jums reikia, ir nesiremtų įtikinamai skambančiais spėjimais, visą projekto sąranką sudaro:
Kaip peržiūrėti svetainę prieš ją paskelbiant?
Svarbiausios išvados
Norėdami pamatyti svetainę prieš jai pasirodant internete, naudokite „Astro“ kūrimo serverį. Projekto aplanke esančiame terminale įveskite komandą npm run dev, ir „Astro“ paleis vietinę peržiūrą — paprastai adresu localhost, 4321 prievade. Atidarykite šį adresą naršyklėje ir matysite svetainę. „Claude“ atliekami failų pakeitimai iškart atsispindi: pakeiskite tekstą ir puslapis atsinaujins savaime. Šį serverį savo kompiuteryje matote tik jūs; jis nepaskelbia svetainės internete.
Prieš parodydami svetainę visiems, peržiūrėkite ją savo kompiuteryje. Tam „Astro“ turi kūrimo serverį — jis tiesiog jūsų kompiuteryje rodo svetainę realiuoju laiku. Paleiskite jį projekto aplanke esančiame terminale įvedę komandą:
npm run dev
„Astro“ paleis vietinę peržiūrą ir terminale parodys adresą. Pagal numatytuosius nustatymus tai localhost:4321. Nukopijuokite adresą, atidarykite jį naršyklėje ir pamatysite savo svetainę. Kol kas šį adresą galite atidaryti tik jūs — niekas iš išorės jo nepasieks; tai jūsų juodraštis.
Patogu tai, kad peržiūra atnaujinama realiuoju laiku: „Claude“ redaguoja failą, o puslapis naršyklėje atsinaujina savaime; nereikia jo atnaujinti rankiniu būdu. Tai vyksta greitai — pateikiate prašymą „Claude“, žiūrite naršyklėje, pataisote, vėl žiūrite; šiame etape ištobulinate svetainę. Kai rezultatas tenkina, paskelbkite ją internete.
Kaip nemokamai paskelbti „Astro“ svetainę internete?
Svarbiausios išvados
Paprasčiausias nemokamas būdas — naudoti „GitHub“. Pirmiausia įkelkite projektą į „GitHub“ saugyklą (internetinę kodo saugojimo vietą). Tada prijunkite prieglobos paslaugą, galinčią surinkti „Astro“ projektą: „Netlify“, „Vercel“ arba patį „GitHub Pages“. Prieglobos paslauga atpažins „Astro“, surinks svetainę naudodama build komandą ir paskelbs ją savo adresu. Kiekvieną kartą nusiuntus naują pakeitimą į saugyklą, svetainė automatiškai surenkama iš naujo ir atnaujinama. „Claude Code“ taip pat gali padėti visa tai nustatyti žodžiais.
Paruoštą svetainę reikia įkelti į vietą, iš kurios kiti galėtų ją atidaryti naudodami nuorodą. Paprasčiausias nemokamas būdas — per „GitHub“: pirmiausia įkelkite projekto kodą į saugyklą, o tada prijunkite prieglobos paslaugą, kuri svetainę surinks ir paskelbs. Veiksmų seka tokia:
- Sukurkite saugyklą „GitHub“. Saugykla — tai internetinė kodo saugojimo vieta, į kurią siunčiate projekto failus. „Claude Code“ gali padėti tai padaryti natūralios kalbos komandomis: paprašykite „įkelk projektą į naują „GitHub“ saugyklą“, ir jis pasiūlys komandas. Jei dar nesinaudojote „GitHub“, pasirūpinkite, kad turėtumėte registracijos ir prisijungimo instrukcijas.
- Prijunkite prieglobą. Apsilankykite vienoje iš paslaugų („Netlify“, „Vercel“), prisijunkite per savo „GitHub“ paskyrą ir pasirinkite saugyklą. „Astro“ dokumentacijoje šis būdas aprašomas taip: prieglobos paslauga stebi jūsų saugyklą, surenka svetainę ir ją paskelbia.
- Patikrinkite surinkimo nustatymus. Paprastai prieglobos paslauga atpažįsta „Astro“ ir užpildo reikiamus laukus. Jei prašoma juos įvesti rankiniu būdu, dokumentacijoje nurodyta surinkimo komanda yra
astro build(arbanpm run build), o paruošta svetainė patalpinama aplankedist. - Spustelėkite „Paskelbti“. Paslauga surinks svetainę ir pateiks nuorodą, pavyzdžiui,
site-name.netlify.app. Svetainę šiuo adresu galės atidaryti bet kas.
Štai tiksli dokumentacijos formuluotė apie saugyklos prijungimą prie prieglobos paslaugos:
Daugelis populiarių prieglobos paslaugų atpažins, kad jūsų projektas yra „Astro“ svetainė, ir automatiškai parinks tinkamus surinkimo bei diegimo nustatymus. Prieglobos paslauga stebės pagrindinę jūsų saugyklos šaką, iš naujo surinks svetainę ir iš naujo ją įdiegs po kiekvieno naujo pakeitimo.
Vėliau paskelbimas vyks automatiškai: nusiųskite naują pakeitimą į saugyklą, ir svetainė pati bus iš naujo surinkta bei atnaujinta; nieko daugiau spausti nereikės.
Yra ir antras nemokamas variantas — „GitHub Pages“, kuriame svetainė paskelbiama tiesiai iš saugyklos, naudojant pačios „GitHub“ įrankius. „Astro“ turi oficialų pradinį šabloną:
„Astro“ palaiko oficialią „GitHub Action“, skirtą projektui įdiegti „GitHub Pages“ beveik be jokios konfigūracijos; tai rekomenduojamas būdas diegti „GitHub Pages“.
Pasirinkus šį variantą, svetainė atidaroma adresu, panašiu į your-name.github.io/repository-name, o vėliau prie jos galima prijungti savo domeną. Šį nustatymą taip pat galite atlikti per „Claude Code“: aprašykite užduotį žodžiais, ir jis paruoš reikiamą failą.
Kiek kainuoja sukurti „Astro“ svetainę?
Svarbiausios išvados
„Astro“ yra nemokama atvirojo kodo programa — už ją mokėti nereikia. Nemokama gali būti ir bazinė priegloba: „GitHub Pages“ bei pradiniai „Netlify“ ir „Vercel“ planai, kurių pakanka nedidelei „Astro“ svetainei. Išlaidų gali pareikalauti DI įrankis, kurį naudojate svetainei kurti („Claude“), ir, jei norite, nuosavas domenas vietoj nemokamo prieglobos paslaugos adreso. Taigi minimaliu būdu „sukurti ir paskelbti svetainę“ galima naudotis nemokama priegloba: mokate tik už DI.
Dabar pakalbėkime apie pinigus. „Astro“ yra nemokamas atvirojo kodo įrankis; atskiro mokesčio už jį nėra. Bazinės prieglobos paslaugos taip pat siūlo nemokamus planus: „GitHub Pages“ ir pradinius „Netlify“ bei „Vercel“ planus, kurių paprastai pakanka nedidelei „Astro“ svetainei (nemokami planai turi lankytojų srauto apribojimų, tačiau jų dažniausiai pakanka nedidelei vizitinei svetainei ar nukreipimo puslapiui).
Praktiškai gali tekti mokėti už du dalykus, ir net ne visada. Pirmasis — svetainės kūrimui naudojamas DI įrankis. Antrasis — nuosavas domenas vietoj adreso, pavyzdžiui, name.netlify.app; tai neprivaloma ir kainuoja nedaug per metus. Visą kelią „sukurti svetainę ir paskelbti ją internete“ galite įveikti mokėdami tik už „Claude“.
Ko dar žmonės klausia apie „Astro“ svetaines ir „Claude Code“?
Svarbiausios išvados
Trumpi atsakymai į dažniausiai užduodamus klausimus. Mokėti programuoti nereikia: „Claude“ parašo kodą, o jūs žodžiais pateikiate užduotis ir tikrinate rezultatą. Užbaigta svetainė lieka jūsų failuose ir gali būti patalpinta bet kurioje prieglobos paslaugoje; ji nėra susieta su kieno nors kito platforma. „Astro“ tinka turinio svetainei — vizitinei svetainei, nukreipimo puslapiui, tinklaraščiui ar pristatymui; sudėtingai asmeninės paskyros sričiai geriau rinktis kitą sprendimą. O užbaigtą svetainę galima nemokamai paskelbti per „GitHub“.
Dažnai užduodami klausimai
Ar reikia mokėti programuoti, kad galėtumėte sukurti svetainę su „Astro“ naudodami „Claude Code“?
Ne. Jau seniai neberašau kodo ranka; viską darau pasitelkdamas DI. Žodžiais pateikiate užduotį — „sukurk pagrindinį puslapį su tokia antrašte“ — o „Claude Code“ už jus parašo ir redaguoja failus. Sintaksės išmanyti nereikia. Reikia suprasti, kokios svetainės norite, ir naršyklėje patikrinti, ką gavote.
Ar reikia iš anksto sukurti projekto aplanką?
Ne. Komanda npm create astro@latest paleidžia vedlį, kuris pats sukurs aplanką, jei jo dar nėra. Komandą galite paleisti bet kurioje kompiuterio vietoje. Sukūrę aplanką, pereikite į jį komanda cd ir dirbkite ten.
Kaip peržiūrėti svetainę prieš jai pasirodant internete?
Projekto aplanke paleiskite komandą npm run dev. „Astro“ paleis vietinę peržiūrą, paprastai adresu localhost:4321, ir galėsite atidaryti svetainę savo kompiuterio naršyklėje. Šią peržiūrą matote tik jūs; pakeitimai pritaikomi iškart, todėl puslapio nereikia atnaujinti rankiniu būdu.
Ar galima „Astro“ svetainę paskelbti nemokamai?
Taip. Paprasčiausias būdas — įkelti projektą į „GitHub“ saugyklą ir prijungti nemokamą prieglobą: „GitHub Pages“, „Netlify“ arba „Vercel“. Prieglobos paslauga surinks svetainę ir paskelbs ją savo adresu. Už nedidelės svetainės prieglobą atskirai mokėti nereikia; išlaidų atsiras tik panorėjus turėti savo domeną.
Ar „Astro“ tinka visų rūšių svetainėms?
„Astro“ skirta turinio svetainėms: vizitinėms svetainėms, nukreipimo puslapiams, tinklaraščiams, darbų aplankams ir internetinių parduotuvių pristatymams. Čia ji ypač tinka. Jei projekto pagrindas yra sudėtinga žiniatinklio programa su asmeninės paskyros sritimi ir daugybe veiksmų prie kiekvieno mygtuko, ta dalis paprastai kuriama naudojant kitą įrankį. „Astro“ pranašumus ir trūkumus išsamiau aptariu straipsnyje apie tai, kas yra „Astro“.
Kuo „Astro“ geresnė už tokį svetainių kūrimo įrankį kaip „Tilda“, kai naudojamas vibe-coding?
Skirtumas — tai, kas jums lieka. „Astro“ svetainę sudaro jūsų failai, kurie saugomi pas jus ir gali būti paskelbti bet kurioje prieglobos paslaugoje; jokia trečiosios šalies paslauga jų nelaiko. Jei po šešių mėnesių norėsite persikelti ar ką nors pakeisti, viską galėsite atidaryti bet kuriuo įrankiu. Renkantis „Astro“ ar kitus įrankius svarbus bendras požiūris į vibe-coding: įrankį rinkitės pagal užduotį. Įrankių apžvalga pateikta vadove apie „Claude Code“ alternatyvas.
Šaltiniai
Visa vibe-coding sąranka:
Susipažinkite su „Ailoot“.
Išsamiau
Klausimai ir atsakymai
Ar vietinė Astro peržiūra paskelbia svetainę internete?
Ne. npm run dev paleidžia vietinę kūrimo peržiūrą ir išveda jos adresą, paprastai localhost:4321. Paskelbimas yra atskiras žingsnis per prieglobos paslaugą ar GitHub Pages diegimo darbo eigą.
Kokius surinkimo nustatymus patikrinti Astro priegloboje?
Čia aprašytam statinės svetainės keliui patikrinkite, ar priegloba naudoja astro build arba npm run build ir skelbia dist katalogą. Po diegimo atverkite viešą prieglobos URL ir patikrinkite puslapius ten; vien vietinė peržiūra nepatvirtina paskelbimo.