Tutorial Lengkap: Membuat Website Astro Gratis Berakhiran .vercel.app dari Nol (Khusus Pemula)

Membuat website modern dengan teknologi terbaru kini bisa dilakukan 100% gratis tanpa perlu mengeluarkan biaya sepeser pun. Tutorial ini dirancang khusus untuk Anda yang benar-benar awam, belum mengerti pemrograman, dan saat ini hanya modal akun Gmail saja.

Kita akan membangun website menggunakan Astro (kerangka kerja website yang sangat cepat), menyimpan kodenya di GitHub, dan menerbitkannya secara online lewat Vercel sehingga Anda memiliki domain web resmi berakhiran nama-website-anda.vercel.app.

---

Langkah 1: Membuat Akun GitHub (Tempat Menyimpan Website)

GitHub adalah layanan online untuk menyimpan seluruh file website Anda dengan aman dan gratis.

1. Buka browser Anda (Google Chrome, Edge, atau Safari) dan kunjungi situs GitHub.
2. Klik tombol Sign up di pojok kanan atas.
3. Masukkan alamat Gmail Anda, lalu buat password yang kuat dan aman.
4. Masukkan username unik pilihan Anda (misalnya: budi-astroweb). Catat username ini karena akan menjadi bagian dari identitas website Anda.
5. Selesaikan verifikasi keamanan (biasanya berupa teka-teki gambar) untuk membuktikan Anda bukan robot.
6. GitHub akan mengirimkan kode verifikasi 6 digit ke Gmail Anda. Buka kotak masuk Gmail, salin kode tersebut, dan masukkan ke kolom yang tersedia di GitHub.
7. Jika muncul survei singkat, Anda bisa melewatinya dengan klik Skip personalization di bagian paling bawah. Akun GitHub Anda kini sudah aktif!

Langkah 2: Membuat Proyek Website Astro Lewat Template Instan

Sebagai orang awam, Anda tidak perlu mengetik kode pemrograman dari nol. Kita akan menggunakan fitur "Template instan" (Repository Template) yang sudah disediakan oleh komunitas Astro.

1. Pastikan Anda masih dalam posisi sudah masuk (login) di akun GitHub Anda.
2. Buka tab baru di browser Anda dan kunjungi halaman contoh template dasar Astro resmi ini: Astro Minimal Starter.
3. Agar lebih mudah dan praktis tanpa instalasi aplikasi di komputer, kita akan menyalin template tersebut ke akun kita secara langsung dengan menekan tombol Use this template di pojok kanan atas halaman GitHub template tersebut, lalu pilih Create a new repository.
4. Di halaman baru yang muncul:
   • Repository name: Isi dengan nama website yang Anda inginkan (misalnya: websiteku-astro). Jangan gunakan spasi, gunakan tanda hubung - jika lebih dari satu kata.
   • Privacy: Pilih opsi Public.
5. Klik tombol hijau bertuliskan Create repository.
6. Tunggu beberapa detik. Sekarang, seluruh struktur file website Astro yang modern sudah tersalin penuh ke dalam akun GitHub Anda sendiri.

Langkah 3: Menghubungkan GitHub ke Vercel untuk Online-kan Website

Vercel adalah platform canggih yang berfungsi mengubah file-file di GitHub Anda menjadi website asli yang bisa diakses oleh semua orang di internet secara gratis.

1. Buka tab baru di browser Anda dan kunjungi situs Vercel.
2. Klik tombol Sign Up di pojok kanan atas.
3. Pada pilihan metode pendaftaran, pilih Continue with GitHub. Langkah ini sangat penting agar Vercel terhubung langsung dengan file website Anda.
4. Akan muncul jendela konfirmasi dari GitHub yang meminta izin akses. Klik tombol hijau bertuliskan Authorize Vercel.
5. Vercel akan meminta verifikasi nomor HP demi keamanan. Masukkan nomor HP aktif Anda, masukkan kode SMS yang dikirimkan, lalu klik Verify.
6. Jika ditanya tipe akun, pilih Personal/Hobby (karena opsi ini 100% gratis selamanya) dan isi nama Anda, lalu klik Continue.

Langkah 4: Proses Import dan Penerbitan (Deployment) Website

1. Setelah berhasil masuk ke Dashboard Vercel, klik tombol Add New... di pojok kanan atas, lalu pilih Project.
2. Anda akan melihat daftar folder dari GitHub Anda. Cari nama folder website yang Anda buat di Langkah 2 tadi (contohnya: websiteku-astro).
3. Klik tombol Import yang berada di sebelah kanan nama folder tersebut.
4. Di halaman berikutnya, Anda akan melihat pengaturan proyek. Jangan mengubah pengaturan apa pun! Vercel sudah sangat pintar dan otomatis mendeteksi bahwa website Anda menggunakan teknologi Astro.
5. Langsung saja klik tombol Deploy di bagian bawah.
6. Proses building akan berjalan sekitar 1-2 menit. Sistem sedang merakit website Anda di latar belakang.
7. Selamat! Jika muncul animasi konfeti dan tulisan "Congratulations!", website Anda sudah resmi online di internet.
8. Klik gambar pratinjau website tersebut atau klik tombol Visit untuk membuka website baru Anda yang berakhiran .vercel.app.

Langkah 5: Cara Mengubah Isi Konten Website (Tanpa Aplikasi)

Jika Anda ingin mengganti tulisan di website baru Anda, Anda tidak perlu mengunduh aplikasi coding. Anda bisa langsung mengeditnya lewat browser di GitHub:

1. Buka kembali akun GitHub Anda dan masuk ke folder proyek website Anda (websiteku-astro).
2. Masuk ke folder bernama src/, lalu masuk lagi ke folder pages/.
3. Di dalam folder pages, Anda akan menemukan file bernama index.astro. Ini adalah file halaman utama website Anda. Klik file tersebut.
4. Di pojok kanan atas tampilan file, klik ikon Pensil (Edit this file).
5. Anda akan melihat kode teks di sana. Cari teks bawaan (misalnya tulisan "Astro") lalu ubah menjadi kalimat Anda sendiri (misalnya: "Selamat Datang di Website Pertama Saya!").
6. Jika sudah selesai mengedit, gulir layar ke paling bawah. Klik tombol hijau bertuliskan Commit changes.
7. Selesai! Anda tidak perlu membuka Vercel lagi. Vercel akan membaca perubahan di GitHub secara otomatis dalam waktu 30 detik, dan website .vercel.app Anda langsung terupdate secara otomatis saat Anda me-refresh halaman website Anda.

---

Tips Tambahan untuk Pemula:

• Ubah Nama Domain: Jika Anda kurang suka dengan nama domain bawaan dari Vercel, Anda bisa masuk ke Dashboard Vercel -> Pilih Project Anda -> Klik Settings -> Klik Domains. Di sana Anda bisa mengedit teks domain .vercel.app sesuai keinginan Anda selama nama tersebut belum dipakai orang lain.
• Gratis Selamanya: Selama penggunaan website Anda masih dalam tahap wajar (bukan untuk aplikasi perusahaan skala raksasa), layanan gabungan GitHub dan Vercel ini tidak akan menagih biaya apa pun kepada Anda.