# Situs Astro Melalui Claude Code: Dari Folder hingga Publikasi > Panduan langkah demi langkah: cara membuat situs dengan Astro melalui Claude Code tanpa tahu cara pemrograman. Apa yang perlu diinstal, perintah apa yang digunakan untuk membuat proyek, dan cara menerbitkannya secara gratis. Source: https://ailoot.ai/blog/id/astro-site-with-claude-code/ Canonical: https://ailoot.ai/blog/id/astro-site-with-claude-code/ Language: id Publisher: Ailoot (https://ailoot.ai/) Translation: guide-149 Revision: sha256-66eb8b791a29da980a81aaabdd0ea0c90183b721895b1c17c925a9c9977a49e2 Seseorang yang belum pernah menulis sebaris kode pun bisa membuat situs dengan Astro melalui Claude Code. Saya sudah lama berhenti menulis kode dengan tangan; saya melakukan semuanya dengan kata-kata melalui AI, dan membuat situs dengan Astro bekerja dengan cara yang sama: Anda menjelaskan apa yang dibutuhkan, lalu Claude menulis kodenya untuk Anda. Masalahnya biasanya bukan pada proses pembuatannya sendiri, melainkan jalurnya terpecah-pecah. Satu artikel menjelaskan instalasi, artikel lain membahas perintah, artikel ketiga membahas publikasi, dan seluruh langkahnya tidak pernah tersusun utuh di kepala Anda. Di sini, saya akan memandu Anda dari folder kosong hingga situs yang bisa dibuka di internet melalui sebuah tautan: apa yang perlu diinstal, perintah apa yang digunakan untuk memulai proyek, cara membuat halaman melalui Claude Code, dan cara memublikasikan hasilnya secara gratis. Saya merujuk pada dokumentasi resmi Astro. Tentang cara bekerja dengan layanan ini — di [dokumentasi Ailoot](https://ailoot.ai/docs/). ## Apa yang Anda perlukan sebelum memulai?
Poin utama Tiga hal di komputer Anda: Node.js versi terbaru, editor kode, dan terminal. Node.js adalah lingkungan tempat alat-alat ini berjalan; pada tanggal penulisan, dokumentasi Astro mensyaratkan versi 22.12.0 atau lebih baru dan memperingatkan bahwa versi bernomor ganjil seperti 23 tidak didukung. Editor biasanya VS Code, tempat Claude Code juga digunakan. Terminal adalah jendela hitam untuk menjalankan perintah; terminal sudah tersedia di VS Code. Anda tidak perlu menginstal semua ini secara terpisah untuk Astro: jika Anda pernah membuat sesuatu dengan Claude Code, lingkungan Anda sudah siap.
Astro sendiri tidak meminta Anda mengunduh apa pun sebelumnya — semuanya akan diunduh oleh perintah pada langkah berikutnya. Namun, Anda memerlukan lingkungan tempat semuanya berjalan. Astro menjelaskan persiapan awal seperti ini — Anda membutuhkan tiga hal:

Node.js — versi v22.12.0 atau lebih baru. Versi bernomor ganjil seperti v23 tidak didukung. Editor teks — kami merekomendasikan VS Code dengan ekstensi resmi Astro kami. Terminal — Astro dikelola melalui baris perintah.

— Dokumentasi Astro, bagian instalasi, https://docs.astro.build/en/install-and-setup/
Mari kita bahas arti masing-masing dalam praktik: 1. **Node.js** — program yang diperlukan agar Astro dan sebagian besar alat vibe-coding dapat berjalan. Unduh dari nodejs.org dan instal seperti aplikasi biasa. Nomor versi dalam dokumentasi bertambah seiring waktu, jadi sebelum memulai, kunjungi halaman instalasi Astro dan periksa persyaratannya. Versi bernomor genap (22, 24) adalah yang Anda perlukan; sebaiknya hindari versi bernomor ganjil (23, 25). 2. **VS Code** — editor gratis dari Microsoft. Anda membuka folder proyek di dalamnya, dan Claude Code juga bekerja di sana; Claude akan menulis kodenya. 3. **Terminal** — jendela untuk memasukkan perintah. Anda tidak perlu menginstalnya secara terpisah: terminal dapat dibuka dari menu di VS Code, dan semua perintah di bawah ini dimasukkan di sana. Jika Anda sudah menginstal Claude Code dan pernah membuat apa pun, berarti semua ini sudah tersedia dan Anda bisa melewati langkah ini. Jika belum, saya punya panduan terpisah tentang [cara menginstal Claude Code](https://ailoot.ai/blog/id/install-claude-code/). ## Bagaimana cara membuat proyek Astro dengan satu perintah?
Poin utama Proyek baru dibuat dengan perintah `npm create astro@latest` di terminal. Wizard akan dimulai dan mengajukan beberapa pertanyaan (di mana proyek akan diinstal, templat mana yang akan digunakan, apakah dependensi perlu diinstal), lalu membuat kerangka proyek untuk Anda. Jika folder proyek belum ada, wizard akan membuatnya. Setelah itu, Anda masuk ke folder proyek dengan perintah `cd` dan bisa mulai bekerja. Anda tidak perlu membuat folder kosong terlebih dahulu.
Di sinilah proyek itu sendiri dimulai, dan hanya perlu satu perintah. Buka terminal lalu masukkan: ```bash npm create astro@latest ``` Wizard instalasi akan dimulai. Berikut penjelasan dokumentasinya:

Anda dapat menjalankan perintah create astro di mana saja di komputer, jadi Anda tidak perlu membuat folder proyek kosong terlebih dahulu. Jika folder tersebut belum ada, wizard akan membantu membuatnya secara otomatis.

— Dokumentasi Astro, bagian instalasi, https://docs.astro.build/en/install-and-setup/
Wizard akan memandu Anda melalui langkah-langkah dan mengajukan beberapa pertanyaan: apa nama folder proyek, templat mana yang akan digunakan sebagai dasar, dan apakah dependensi perlu langsung diinstal. Anda dapat memilih opsi default untuk setiap pertanyaan — templat kosong atau minimal akan cocok untuk situs pertama Anda. Jika Anda menjawab “tidak” pada pertanyaan tentang instalasi dependensi, instal dependensi secara manual nanti dengan menjalankan perintah `npm install` di dalam folder proyek. Setelah wizard selesai, wizard akan memberi tahu bahwa proyek telah dibuat dan menyarankan langkah berikutnya — masuk ke folder proyek: ```bash cd your-project-name ``` Itulah yang diperlukan untuk membuat proyek. Di dalamnya sudah ada kerangka situs yang berfungsi: beberapa file dan folder yang digunakan untuk membuat halaman. Anda tidak perlu mengeditnya dengan tangan, tetapi ada baiknya mengetahui isi dan lokasinya. Astro hanya mewajibkan satu folder:

src/pages — subfolder wajib di dalam proyek. Tanpanya, situs tidak akan memiliki halaman maupun rute.

— Dokumentasi Astro, bagian struktur proyek, https://docs.astro.build/en/basics/project-structure/
Dengan kata lain, `src/pages` adalah folder yang berisi halaman situs: halaman beranda, halaman “tentang kami”, dan halaman kontak. `src/components` (bagian yang dapat digunakan ulang seperti header dan tombol), `src/layouts` (kerangka halaman bersama), dan folder `public` untuk gambar dan berkas biasanya berada di dekatnya. Anda tidak perlu menghafal strukturnya — cukup ingat bahwa halaman berada di `src/pages`, lalu sebutkan folder itu saat meminta Claude: “tambahkan halaman kontak.” ## Bagaimana cara membuat situs dengan Claude Code?
Poin utama Buka folder proyek di VS Code, jalankan Claude Code, lalu jelaskan dengan kata-kata apa yang Anda perlukan di situs. Claude mengedit sendiri file di `src/pages` dan folder di sekitarnya. Hasil terbaik diperoleh dengan tugas-tugas kecil dan jelas: “buat halaman beranda dengan judul, deskripsi singkat, dan tombol,” lalu “tambahkan halaman layanan,” kemudian “ubah warnanya menjadi gelap.” Setelah setiap permintaan, lihat hasilnya di browser dan berikan penjelasan tambahan jika diperlukan. Anda tidak perlu membuat kode di sini. Tugas Anda adalah memberikan instruksi yang jelas dan memeriksa hasilnya.
Kerangkanya sudah siap; sekarang situs Anda dibuat dari kerangka tersebut, dan Claude Code yang mengerjakannya. Buka folder proyek di VS Code, jalankan Claude Code, dan jelaskan dengan kata-kata apa yang Anda perlukan. Claude mengedit sendiri file di `src/pages` dan folder di sekitarnya — Anda cukup memberikan tugas dan melihat hasilnya. Menurut pengalaman saya, bekerja dalam langkah-langkah kecil memberikan hasil terbaik. Satu permintaan besar seperti “buatkan situs perusahaan” biasanya berakhir dengan campur aduk yang sulit diperbaiki. Jadi, pecah menjadi tugas-tugas singkat dan jelas, lalu berikan satu per satu: 1. “Buat halaman beranda: judul besar, beberapa kalimat tentang pekerjaan saya, dan tombol yang tertaut ke halaman kontak.” 2. “Tambahkan halaman layanan dengan daftar tiga bagian.” 3. “Tambahkan halaman kontak dengan nomor telepon dan tautan ke Telegram.” 4. “Ubah tampilannya: latar belakang terang dan font besar yang mudah dibaca.” Periksa setiap langkah sebelum melanjutkan — dengan begitu, Anda lebih mudah mengetahui jika ada yang salah dan kembali ke langkah sebelumnya. Mengapa tugas kecil lebih andal dan bagaimana menjaga AI tetap berada di jalurnya merupakan bagian dari rekayasa konteks: semakin jelas tugas dan struktur proyek, semakin mudah diprediksi hasilnya. Astro memberi AI struktur yang praktis untuk ini: konten halaman terpisah dari gayanya, dan halaman dibuat menurut aturan bersama. Dengan struktur ini, Claude lebih jarang bingung dan kecil kemungkinannya merusak bagian di sekitarnya saat mengedit satu tempat. Jika Claude tiba-tiba tidak lagi melihat file Anda atau memberikan jawaban yang tidak relevan, baca panduan tentang [mengapa Claude Code tidak dapat melihat file proyek](https://ailoot.ai/blog/id/claude-code-cant-see-project-files/). Astro hanyalah salah satu komponen dalam bekerja dengan AI. Agar Claude dapat terus membuat apa yang Anda perlukan tanpa mengandalkan tebakan yang terdengar masuk akal, konfigurasi lengkap untuk proyek Anda mencakup: **Klon AI + Second Brain + Rekayasa Konteks**. ## Bagaimana cara melihat pratinjau situs sebelum dipublikasikan?
Poin utama Untuk melihat situs sebelum daring, Astro menyediakan server pengembangan. Masukkan perintah `npm run dev` di terminal dalam folder proyek, dan Astro akan memulai pratinjau lokal — biasanya di localhost pada port 4321. Buka alamat ini di browser untuk melihat situs secara langsung. Perubahan yang dibuat Claude pada file akan langsung diterapkan: ubah teks, lalu halaman akan diperbarui sendiri. Server ini hanya terlihat oleh Anda di komputer; situs belum dipublikasikan ke internet.
Sebelum menunjukkan situs kepada dunia, Anda melihat pratinjaunya di komputer sendiri. Untuk itu, Astro menyediakan server pengembangan — server ini menampilkan situs secara langsung di komputer Anda. Jalankan dengan perintah di terminal, di dalam folder proyek: ```bash npm run dev ``` Astro akan memulai pratinjau lokal dan mencetak alamatnya di terminal. Secara default, alamatnya adalah `localhost:4321`. Salin alamat itu, buka di browser, dan situs Anda akan terlihat. Untuk saat ini, hanya Anda yang bisa membuka alamat tersebut — orang lain tidak dapat mengaksesnya; ini masih draf Anda. Kelebihannya, pratinjau ini langsung diperbarui: Claude mengedit file, lalu halaman di browser akan diperbarui sendiri; Anda tidak perlu memuat ulang secara manual. Prosesnya cepat — minta Claude, lihat di browser, lakukan koreksi, lalu lihat lagi; di tahap inilah Anda menyempurnakan situs. Setelah puas dengan hasilnya, publikasikan secara daring. ## Bagaimana cara memublikasikan situs Astro secara gratis di internet?
Poin utama Cara gratis yang paling sederhana adalah melalui GitHub. Pertama, unggah proyek ke repositori di GitHub (tempat penyimpanan kode daring). Kemudian hubungkan layanan hosting yang dapat membuat situs Astro: Netlify, Vercel, atau GitHub Pages. Layanan hosting mengenali Astro, membuat situs dengan perintah build, lalu menerbitkannya di alamatnya sendiri. Setiap kali Anda mengirim perubahan baru ke repositori, situs dibuat ulang dan diperbarui secara otomatis. Claude Code juga dapat membantu menyiapkan semua ini dengan instruksi berupa kata-kata.
Anda perlu menempatkan situs yang sudah selesai di suatu tempat agar orang lain dapat membukanya melalui tautan. Cara gratis termudah adalah melalui GitHub: pertama, unggah kode proyek ke repositori, lalu hubungkan layanan hosting yang membuat dan menerbitkan situs. Berikut urutannya: 1. **Buat repositori di GitHub.** Repositori adalah tempat penyimpanan kode daring untuk menyimpan file proyek. Claude Code dapat membantu melakukannya melalui instruksi bahasa alami: minta “unggah proyek ke repositori GitHub baru,” lalu Claude akan menyarankan perintah. Jika Anda belum pernah menggunakan GitHub, siapkan panduan untuk mendaftar dan masuk. 2. **Hubungkan hosting.** Buka salah satu layanan (Netlify, Vercel), masuk melalui akun GitHub, lalu pilih repositori Anda. Dokumentasi Astro menjelaskan metode ini seperti berikut: layanan hosting memantau repositori Anda, membuat situs, lalu menerbitkannya. 3. **Periksa pengaturan build.** Biasanya layanan hosting mengenali Astro dan mengisi pengaturan yang diperlukan. Jika Anda diminta memasukkannya secara manual, perintah build dalam dokumentasi adalah `astro build` (atau `npm run build`), dan situs yang sudah selesai ditempatkan di folder `dist`. 4. **Klik “Publikasikan.”** Layanan tersebut akan membuat situs dan memberikan tautan seperti `site-name.netlify.app`. Siapa pun dapat membuka situs di alamat itu. Berikut kata-kata persis dokumentasi tentang menghubungkan repositori ke layanan hosting:

Banyak layanan hosting populer akan mengenali proyek Anda sebagai situs Astro dan otomatis memilih pengaturan build dan deployment yang sesuai. Layanan hosting akan memantau cabang utama repositori Anda, membuat ulang situs, dan melakukan deployment ulang setiap kali ada perubahan baru.

— Dokumentasi Astro, bagian deployment, https://docs.astro.build/en/guides/deploy/
Setelah itu, publikasi berjalan otomatis: kirim perubahan baru ke repositori, lalu situs dibuat ulang dan diperbarui sendiri; Anda tidak perlu mengeklik apa pun lagi. Ada juga pilihan gratis kedua — **GitHub Pages**, tempat situs diterbitkan langsung dari repositori menggunakan alat milik GitHub. Astro menyediakan starter resmi untuknya:

Astro mendukung GitHub Action resmi untuk melakukan deployment proyek ke GitHub Pages dengan konfigurasi yang hampir tidak diperlukan, dan inilah cara yang direkomendasikan untuk melakukan deployment ke GitHub Pages.

— Dokumentasi Astro, bagian deployment di GitHub Pages, https://docs.astro.build/en/guides/deploy/github/
Dengan pilihan ini, situs terbuka di alamat seperti `your-name.github.io/repository-name`, dan nanti Anda dapat menghubungkan domain sendiri. Anda juga dapat menyiapkan semuanya melalui Claude Code: jelaskan tugasnya dengan kata-kata, dan Claude akan menyiapkan file yang diperlukan. ## Berapa biaya membuat situs Astro?
Poin utama Astro sendiri gratis dan bersifat open source — tidak ada biaya untuk menggunakannya. Hosting dasar juga bisa gratis: GitHub Pages, serta paket pemula dari Netlify dan Vercel, yang cukup untuk situs Astro ringan. Biaya yang sebenarnya adalah untuk alat AI yang Anda gunakan untuk membuat situs (Claude) dan, jika diinginkan, domain sendiri sebagai pengganti alamat gratis dari layanan hosting. Jadi, cara minimum untuk “membuat dan menerbitkan situs” dapat dilakukan tanpa membayar hosting: Anda hanya membayar AI.
Sekarang mari kita bahas biayanya. Astro sendiri adalah alat gratis dan open source; tidak ada harga terpisah untuknya. Layanan hosting dasar juga menawarkan pilihan gratis: GitHub Pages, serta paket pemula dari Netlify dan Vercel, yang biasanya cukup untuk situs Astro ringan (paket gratis memiliki batas lalu lintas, tetapi biasanya cukup untuk situs kartu nama bisnis atau halaman landing ringan). Dalam praktiknya, ada dua hal yang mungkin perlu Anda bayar, dan itu pun tidak selalu. Pertama adalah alat AI yang Anda gunakan untuk membuat situs. Kedua adalah domain sendiri sebagai pengganti alamat seperti `name.netlify.app`; ini opsional dan biayanya rendah per tahun. Anda dapat menyelesaikan langkah “membuat situs dan menerbitkannya secara daring” hanya dengan membayar Claude. ## Apa lagi yang sering ditanyakan tentang situs Astro dan Claude Code?
Poin utama Jawaban singkat untuk pertanyaan umum. Anda tidak perlu tahu cara pemrograman: Claude menulis kode, sedangkan Anda memberikan tugas dengan kata-kata dan memeriksa hasilnya. Situs yang sudah selesai tetap menjadi file milik Anda dan dapat ditempatkan di layanan hosting mana pun; situs itu tidak terkunci di platform milik pihak lain. Astro cocok untuk situs konten — situs kartu nama, halaman landing, blog, atau showcase; untuk area akun pribadi yang kompleks, sebaiknya gunakan alat lain. Dan Anda dapat menerbitkan situs yang sudah selesai secara gratis melalui GitHub.
### Pertanyaan yang sering diajukan Apakah Anda perlu tahu cara pemrograman untuk membuat situs dengan Astro melalui Claude Code? Tidak. Saya sudah lama berhenti menulis kode dengan tangan; saya melakukan semuanya melalui AI. Anda memberikan tugas dengan kata-kata — “buat halaman beranda dengan judul seperti ini” — lalu Claude Code menulis dan mengedit file untuk Anda. Anda tidak perlu tahu sintaks. Anda perlu memahami jenis situs yang Anda inginkan dan memeriksa hasilnya di browser. Apakah folder proyek harus dibuat terlebih dahulu? Tidak. Perintah `npm create astro@latest` akan memulai wizard yang membuat folder itu sendiri jika foldernya belum ada. Anda dapat menjalankan perintah tersebut di mana saja di komputer. Setelah folder dibuat, masuk ke folder proyek dengan perintah `cd` dan bekerja di dalamnya. Bagaimana cara melihat pratinjau situs sebelum daring? Jalankan perintah `npm run dev` di dalam folder proyek. Astro akan memulai pratinjau lokal, biasanya di localhost:4321, dan Anda dapat membuka situs di browser komputer sendiri. Hanya Anda yang bisa melihat pratinjau ini; perubahan langsung diterapkan, dan Anda tidak perlu memuat ulang halaman secara manual. Bisakah situs Astro diterbitkan secara gratis? Ya. Cara paling sederhana adalah mengunggah proyek ke repositori GitHub dan menghubungkannya ke hosting gratis: GitHub Pages, Netlify, atau Vercel. Layanan hosting akan membuat situs dan menerbitkannya di alamatnya sendiri. Anda tidak perlu membayar secara terpisah untuk menghosting situs ringan; biaya hanya muncul jika Anda menginginkan domain sendiri. Apakah Astro cocok untuk semua jenis situs? Astro dirancang untuk situs konten: situs kartu nama, halaman landing, blog, portofolio, dan showcase toko daring. Di situlah Astro unggul. Jika inti proyeknya adalah aplikasi web kompleks dengan area akun pribadi dan banyak tindakan pada setiap tombol, bagian itu biasanya dibuat dengan alat lain. Saya membahas kelebihan dan kekurangan Astro lebih detail dalam artikel tentang apa itu Astro. Apa keunggulan Astro dibandingkan pembuat situs seperti Tilda untuk vibe-coding? Perbedaannya terletak pada apa yang tersisa untuk Anda. Situs Astro terdiri atas file-file milik Anda, yang disimpan bersama Anda dan dapat diterbitkan di layanan hosting mana pun; tidak ada layanan pihak ketiga yang menyimpannya. Jika ingin pindah atau membuat perubahan enam bulan kemudian, Anda dapat membuka semuanya dengan alat apa pun. Memilih antara Astro dan alat lain bergantung pada pendekatan umum dalam vibe-coding: pilih alat sesuai tugasnya. Peta alatnya ada di panduan alternatif Claude Code.
### Sumber - [Dokumentasi Astro, instalasi dan persyaratan](https://docs.astro.build/en/install-and-setup/) - [Dokumentasi Astro, antarmuka baris perintah](https://docs.astro.build/en/reference/cli-reference/) - [Dokumentasi Astro, struktur proyek](https://docs.astro.build/en/basics/project-structure/) - [Dokumentasi Astro, deployment situs](https://docs.astro.build/en/guides/deploy/) - [Dokumentasi Astro, deployment di GitHub Pages](https://docs.astro.build/en/guides/deploy/github/) - [Dokumentasi Astro, “Why Astro?”](https://docs.astro.build/en/concepts/why-astro/)
Konfigurasi lengkap vibe-coding: **Klon AI + Second Brain + Rekayasa Konteks**. Kenali [Ailoot](https://ailoot.ai/). ## Pertanyaan tentang Situs Astro Melalui Claude Code: Dari Folder hingga Publikasi ### Apakah pratinjau Astro lokal memublikasikan situs secara daring? Tidak. Menjalankan npm run dev memulai pratinjau pengembangan lokal dan mencetak alamatnya, biasanya localhost:4321. Publikasi adalah langkah terpisah melalui layanan hosting atau workflow deployment GitHub Pages. ### Pengaturan build apa yang diperiksa pada host Astro? Untuk jalur situs statis yang dijelaskan di sini, pastikan host memakai astro build atau npm run build dan memublikasikan direktori dist. Setelah deployment, buka URL publik host dan verifikasi halaman di sana; pratinjau lokal saja tidak memverifikasi publikasi. ## Ailoot · Perusahaan dan portofolio proyeknya Ailoot bertumpu pada pengalaman operasional yang teruji, basis pelanggan yang besar, layanan yang stabil, dan pemantauan KPI berkelanjutan. Perusahaan dan portofolio proyeknya: jutaan pelanggan; penjualan miliaran setiap bulan. Ailoot memanfaatkan pengalaman operasional ini untuk akses API ke fitur AI dalam produk pelanggan, agen, aplikasi, dan otomatisasi.