Laman Astro melalui Claude Code: daripada Folder hingga Penerbitan

Seseorang yang tidak pernah menulis satu baris kod pun boleh membina laman dengan Astro melalui Claude Code. Saya sudah lama tidak menulis kod secara manual; saya melakukan semuanya dengan kata-kata melalui AI, dan membina laman dengan Astro berfungsi dengan cara yang sama: terangkan perkara yang anda perlukan, dan Claude akan menulis kod untuk anda.

Biasanya, masalahnya bukan pada proses membina itu sendiri, tetapi pada laluan yang terbahagi kepada beberapa bahagian. Satu artikel menerangkan pemasangan, satu lagi membincangkan arahan, dan satu lagi tentang penerbitan, lalu keseluruhan langkahnya tidak dapat difahami dengan jelas. Di sini, saya akan membawa anda daripada folder kosong kepada laman yang boleh dibuka di Internet melalui pautan: perkara yang perlu dipasang, arahan untuk memulakan projek, cara membina halaman melalui Claude Code dan cara menerbitkan hasilnya secara percuma. Saya merujuk dokumentasi rasmi Astro.

Tentang cara menggunakan perkhidmatan ini — dalam dokumentasi Ailoot.

Apakah yang diperlukan sebelum bermula?#

Anda tidak perlu memuat turun Astro terlebih dahulu — ia akan dimuat turun melalui arahan dalam langkah seterusnya. Namun, anda memerlukan persekitaran untuk menjalankan semuanya. Astro menerangkan bahawa anda memerlukan tiga perkara untuk bermula:

Mari kita lihat maksud setiap perkara ini dalam amalan:

1. Node.js — program yang diperlukan untuk menjalankan Astro dan kebanyakan alat vibe-coding. Muat turunnya daripada nodejs.org dan pasangkannya seperti aplikasi biasa. Nombor versi dalam dokumentasi berubah dari semasa ke semasa, jadi sebelum bermula, lawati halaman pemasangan Astro dan semak keperluannya. Anda memerlukan versi bernombor genap (22, 24); sebaik-baiknya elakkan versi bernombor ganjil (23, 25).
2. VS Code — editor percuma daripada Microsoft. Buka folder projek di dalamnya dan jalankan Claude Code di situ juga; Claude akan menulis kod.
3. Terminal — tetingkap untuk memasukkan arahan. Anda tidak perlu memasangnya secara berasingan: buka melalui menu dalam VS Code dan masukkan semua arahan di bawah di situ.

Jika anda sudah memasang Claude Code dan pernah membina apa-apa dengannya, semua ini sudah tersedia dan anda boleh melangkau langkah ini. Jika belum, saya ada panduan berasingan tentang cara memasang Claude Code.

Bagaimanakah cara mencipta projek Astro dengan satu arahan?#

Di sinilah projek bermula, dan anda hanya memerlukan satu arahan. Buka terminal dan masukkan:

npm create astro@latest

Wizard pemasangan akan bermula. Inilah yang dinyatakan dalam dokumentasi tentangnya:

Wizard akan membimbing anda melalui langkah-langkahnya dan bertanya beberapa soalan: nama folder projek, templat permulaan dan sama ada kebergantungan perlu dipasang serta-merta. Anda boleh memilih pilihan lalai bagi setiap soalan — templat kosong atau ringkas sesuai untuk laman pertama anda. Jika anda menjawab “tidak” kepada soalan tentang pemasangan kebergantungan, pasangkannya secara manual kemudian dengan menjalankan arahan npm install di dalam folder projek.

Apabila wizard selesai, ia akan memaklumkan bahawa projek telah dicipta dan mencadangkan langkah seterusnya — masuk ke folder projek:

cd your-project-name

Itu sahaja untuk mencipta projek. Di dalamnya sudah tersedia rangka asas laman yang berfungsi: beberapa fail dan folder untuk membina halaman. Anda tidak perlu mengeditnya secara manual, tetapi ada baiknya mengetahui kandungannya. Astro hanya mewajibkan satu folder:

Dengan kata lain, src/pages ialah folder yang mengandungi halaman laman: halaman utama, “tentang kami” dan halaman hubungan. Biasanya, src/components (bahagian yang boleh digunakan semula seperti pengepala dan butang), src/layouts (rangka halaman yang dikongsi) dan folder public untuk imej serta fail terletak berdekatan. Anda tidak perlu menghafal strukturnya — cukup ingat bahawa halaman berada dalam src/pages, dan sebutkannya apabila meminta Claude: “tambahkan halaman hubungan.”

Bagaimanakah cara membina laman itu sendiri melalui Claude Code?#

Rangka asas sudah sedia; sekarang laman anda dibina daripadanya dan Claude Code akan menguruskannya. Buka folder projek dalam VS Code, lancarkan Claude Code dan terangkan dengan kata-kata perkara yang anda perlukan. Claude sendiri akan mengedit fail dalam src/pages dan folder berdekatan — anda hanya perlu memberikan tugasan dan melihat hasilnya.

Berdasarkan pengalaman saya, cara terbaik ialah bekerja dalam langkah-langkah kecil. Satu permintaan besar seperti “buatkan laman web syarikat” biasanya menghasilkan sesuatu yang berserabut dan sukar dibaiki. Jadi, pecahkannya kepada tugasan pendek dan jelas, kemudian berikan satu demi satu:

1. “Buat halaman utama: tajuk besar, beberapa ayat tentang kerja saya dan butang yang memaut ke halaman hubungan.”
2. “Tambahkan halaman perkhidmatan dengan senarai tiga bahagian.”
3. “Tambahkan halaman hubungan dengan nombor telefon dan pautan ke Telegram.”
4. “Tukar gayanya: latar belakang cerah dan fon besar yang mudah dibaca.”

Semak setiap langkah sebelum meneruskan — lebih mudah untuk mengesan kesilapan dan kembali membetulkannya. Sebab tugasan kecil lebih boleh diharap dan cara memastikan AI kekal pada landasan yang betul merupakan sebahagian daripada kejuruteraan konteks: semakin jelas tugasan dan struktur projek, semakin mudah hasilnya dijangka.

Astro menyediakan struktur yang mudah untuk digunakan oleh AI: kandungan halaman diasingkan daripada penggayaan dan halaman dibina mengikut peraturan yang sama. Dengan struktur ini, Claude kurang keliru dan kurang berkemungkinan merosakkan bahagian berdekatan apabila mengedit satu tempat. Jika Claude tiba-tiba tidak dapat melihat fail anda atau memberikan jawapan yang tidak berkaitan, lihat panduan tentang sebab Claude Code tidak dapat melihat fail projek.

Astro hanyalah satu komponen dalam kerja menggunakan AI. Untuk membantu Claude membina perkara yang anda perlukan secara konsisten tanpa bergantung pada tekaan yang kelihatan munasabah, persediaan lengkap untuk projek anda merangkumi: Klon AI + Otak Kedua + Kejuruteraan Konteks.

Bagaimanakah cara melihat pratonton laman sebelum diterbitkan?#

Sebelum memperkenalkan laman kepada orang ramai, lihat pratontonnya pada komputer sendiri. Astro menyediakan pelayan pembangunan untuk tujuan ini — ia memaparkan laman secara langsung pada komputer anda. Mulakannya dengan arahan dalam terminal, di dalam folder projek:

npm run dev

Astro akan memulakan pratonton setempat dan memaparkan alamatnya dalam terminal. Secara lalai, alamatnya ialah localhost:4321. Salin alamat itu, buka dalam pelayar dan anda akan melihat laman anda. Buat masa ini, hanya anda boleh membuka alamat ini — orang lain tidak boleh mengaksesnya; inilah draf anda.

Pratonton ini dikemas kini secara langsung: Claude mengedit fail dan halaman dalam pelayar dikemas kini sendiri; anda tidak perlu memuat semula secara manual. Prosesnya pantas — minta Claude melakukan sesuatu, lihat hasilnya dalam pelayar, buat pembetulan dan lihat semula. Pada peringkat inilah anda memperkemas laman. Apabila anda berpuas hati dengan hasilnya, terbitkannya dalam talian.

Bagaimanakah cara menerbitkan laman Astro dalam talian secara percuma?#

Anda perlu meletakkan laman yang siap di suatu tempat supaya orang lain boleh membukanya melalui pautan. Cara percuma yang paling mudah ialah melalui GitHub: mula-mula muat naik kod projek ke repositori, kemudian sambungkan perkhidmatan pengehosan yang membina dan menerbitkan laman. Inilah urutannya:

1. Cipta repositori di GitHub. Repositori ialah tempat simpanan kod dalam talian untuk menghantar fail projek. Claude Code boleh membantu melalui arahan bahasa semula jadi: minta “muat naik projek ke repositori GitHub baharu,” dan ia akan mencadangkan arahan. Jika anda belum pernah menggunakan GitHub, sediakan panduan untuk mendaftar dan log masuk.
2. Sambungkan pengehosan. Pergi ke salah satu perkhidmatan (Netlify, Vercel), log masuk melalui akaun GitHub dan pilih repositori anda. Dokumentasi Astro menerangkan kaedah ini begini: perkhidmatan pengehosan memantau repositori anda, membina laman dan menerbitkannya.
3. Semak tetapan binaan. Biasanya, perkhidmatan pengehosan akan mengenali Astro dan mengisi perkara yang diperlukan. Jika anda diminta memasukkannya secara manual, arahan binaan dalam dokumentasi ialah astro build (atau npm run build), dan laman yang siap diletakkan dalam folder dist.
4. Klik “Terbitkan.” Perkhidmatan itu akan membina laman dan memberikan pautan seperti site-name.netlify.app. Sesiapa sahaja boleh membuka laman pada alamat tersebut.

Inilah kata-kata tepat dokumentasi tentang menyambungkan repositori kepada perkhidmatan pengehosan:

Selepas itu, penerbitan berlaku secara automatik: hantar perubahan baharu ke repositori dan laman akan dibina semula serta dikemas kini sendiri; anda tidak perlu mengklik apa-apa lagi.

Ada juga pilihan percuma kedua — GitHub Pages, tempat laman diterbitkan terus daripada repositori menggunakan alat GitHub sendiri. Astro menyediakan templat permulaan rasmi untuknya:

Dengan pilihan ini, laman boleh dibuka pada alamat seperti your-name.github.io/repository-name, dan anda boleh menyambungkan domain sendiri kemudian. Anda juga boleh mengurus penyediaannya melalui Claude Code: terangkan tugas itu dengan kata-kata, dan ia akan menyediakan fail yang diperlukan.

Berapakah kos untuk membina laman Astro?#

Sekarang, mari kita bincangkan kos. Astro sendiri ialah alat percuma dan sumber terbuka; tiada harga berasingan untuknya. Perkhidmatan pengehosan asas juga menawarkan pilihan percuma: GitHub Pages serta pelan permulaan daripada Netlify dan Vercel, yang biasanya mencukupi untuk laman Astro yang ringan (pelan percuma mempunyai had trafik, tetapi biasanya mencukupi untuk laman kad perniagaan yang ringkas atau halaman pendaratan).

Dalam amalan, ada dua perkara yang mungkin perlu dibayar, dan itu pun tidak semestinya. Yang pertama ialah alat AI yang anda gunakan untuk membina laman. Yang kedua ialah domain sendiri sebagai ganti alamat seperti name.netlify.app; pilihan ini tidak wajib dan kosnya rendah setahun. Anda boleh melengkapkan proses “bina laman dan terbitkan dalam talian” dengan hanya membayar Claude.

Apakah soalan lain tentang laman Astro dan Claude Code?#

Persediaan lengkap untuk vibe-coding: Klon AI + Otak Kedua + Kejuruteraan Konteks.

Kenali Ailoot.