SUPONO.
Panduan Lengkap: Membangun Website Portofolio dari Nol hingga Live di Vercel | Supono
SUPONO.
Tutorial & Panduan

Panduan Lengkap: Membangun Website Portofolio dari Nol hingga Live di Vercel

Oleh Supono•19 September 2026

Membangun identitas digital yang profesional tidak harus mahal atau rumit. Sebagai Network Engineer, saya menginginkan infrastruktur website yang cepat, aman, dan tanpa biaya pemeliharaan server bulanan. Pilihan terbaik saat ini adalah menggunakan arsitektur Jamstack: Astro sebagai kerangka kerja, Tailwind CSS untuk desain, dan Vercel untuk hosting gratis berkinerja tinggi.

Artikel ini adalah panduan langkah demi langkah yang sangat terperinci, mulai dari pembuatan akun hingga website Anda berhasil mengudara (live).

Langkah 1: Persiapan Akun Cloud & Repositori

Sebelum menyentuh kode, kita membutuhkan dua platform utama: GitHub (untuk menyimpan kode) dan Vercel (untuk hosting otomatis).

  1. Buat Akun GitHub: Kunjungi github.com dan daftarkan diri Anda. GitHub akan menjadi brankas digital tempat seluruh kode website Anda disimpan.
  2. Buat Repositori Baru: Setelah login, klik tombol “New” di GitHub. Beri nama repositori Anda (misalnya: web-portofolio), biarkan berstatus Public, dan jangan centang “Add a README”. Klik Create repository.
  3. Buat Akun Vercel: Kunjungi vercel.com dan pilih Sign Up. Sangat disarankan untuk memilih opsi “Continue with GitHub” agar Vercel otomatis terhubung dengan akun GitHub yang baru Anda buat.

Langkah 2: Persiapan Perangkat Lokal (Komputer Anda)

Pastikan komputer Anda sudah terinstal tiga perangkat lunak wajib ini:

  • Node.js: Mesin utama untuk menjalankan JavaScript di komputer Anda (unduh dari nodejs.org).
  • Git: Alat untuk mengirim kode dari komputer ke GitHub (unduh dari git-scm.com).
  • Visual Studio Code (VS Code): Teks editor tempat kita akan merakit website.

Langkah 3: Inisialisasi Proyek Astro & Tailwind

Buka terminal di komputer Anda (atau terminal bawaan di VS Code), buat folder baru, dan jalankan urutan perintah ini:

# 1. Menjalankan instalasi Astro (pilih 'Empty', 'Yes' untuk dependencies, 'No' untuk TypeScript)
npm create astro@latest .

# 2. Menginstal Tailwind CSS versi 3 (versi paling stabil untuk setup saat ini)
npm install @astrojs/tailwind tailwindcss@3 --legacy-peer-deps

# 3. Mengintegrasikan Tailwind ke dalam Astro
npx astro add tailwind

Setelah instalasi selesai, Anda akan memiliki struktur dasar proyek Astro. Di tahap ini, Anda bisa mulai mendesain layout dan membuat artikel menggunakan format Markdown (.md) di dalam folder src/pages/.

Langkah 4: Mengunggah Kode ke GitHub

Setelah website Anda selesai didesain di komputer lokal, saatnya mengunggahnya ke repositori GitHub yang sudah kita buat di Langkah 1.

Jalankan perintah ini secara berurutan di terminal Anda:

# Menginisialisasi pelacakan Git
git init

# Menambahkan semua file proyek
git add .

# Memberikan pesan atau catatan pada pembaruan ini
git commit -m "Rilis pertama website portofolio"

# Menghubungkan folder lokal ke GitHub Anda (Ganti URL di bawah dengan URL repositori Anda)
git branch -M main
git remote add origin [https://github.com/USERNAME_ANDA/web-portofolio.git](https://github.com/USERNAME_ANDA/web-portofolio.git)

# Mengirim kode ke GitHub
git push -u origin main

Langkah 5: Deployment Otomatis di Vercel

Kode Anda sekarang sudah aman di GitHub. Langkah terakhir adalah menyalakannya agar bisa diakses oleh seluruh dunia.

  1. Buka dashboard Vercel Anda di browser.
  2. Klik tombol hitam bertuliskan “Add New…” lalu pilih “Project”.
  3. Di layar berikutnya, Vercel akan menampilkan daftar repositori GitHub Anda. Cari repositori web-portofolio dan klik tombol “Import”.
  4. Biarkan semua pengaturan dalam keadaan default (Vercel sangat pintar, ia otomatis tahu bahwa Anda menggunakan kerangka kerja Astro).
  5. Klik tombol “Deploy”.

Vercel akan mulai membangun website Anda. Proses ini (Building, Assigning Domains) biasanya memakan waktu kurang dari 60 detik.

Langkah 6: Cek Website Anda!

Jika berhasil, layar Vercel akan memunculkan animasi konfeti! Anda akan melihat tombol “Continue to Dashboard” dan sebuah preview website Anda.

Vercel secara otomatis memberikan URL publik gratis (contoh: https://web-portofolio-abcd.vercel.app). Klik tautan tersebut, dan selamat! Website Anda kini sudah live dan bisa diakses oleh siapa saja.

Otomatisasi Penuh: Keajaiban dari sistem CI/CD ini adalah: ke depannya, setiap kali Anda membuat artikel blog baru atau mengubah warna website, Anda hanya perlu melakukan git push di terminal. Vercel akan otomatis menarik kode terbaru dan memperbarui website Anda dalam hitungan detik tanpa perlu Anda menyentuh server sama sekali.