Domain Sendiri di GitHub Pages, Vercel, Netlify Tanpa Salah

GitHub mencatat lebih dari 100 juta developer di platformnya pada laporan Octoverse 2023. Bayangkan seorang recruiter yang membuka belasan portofolio dalam sehari, dan sebagian besar beralamat username.github.io, proyek.vercel.app, atau situs-acak.netlify.app. Alamat bawaan itu tidak salah, tetapi tidak membantu Anda tampil beda.

Masalahnya, banyak pemula sudah membeli atau mengklaim domain, lalu berhenti di tengah jalan: situs menampilkan error 404, sertifikat HTTPS tak kunjung muncul, atau email mendadak mati. Hampir semuanya berakar dari kesalahan kecil di pengaturan DNS. Artikel ini membahas langkah pasangnya sekaligus jebakan yang paling sering menjebak.

Daftar Isi

• Mengapa domain sendiri penting untuk portofolio
• Persiapan: nama domain dan konsep DNS
• Menghubungkan domain ke GitHub Pages
• Menghubungkan domain ke Vercel
• Menghubungkan domain ke Netlify
• Perbandingan ketiga platform
• Delapan kesalahan umum dan cara menghindarinya
• Setelah online: HTTPS, redirect, dan Search Console
• Langkah berikutnya

Mengapa domain sendiri penting untuk portofolio

Alamat seperti namaanda.my.id langsung terbaca sebagai identitas, bukan sekadar folder di layanan orang lain. Alamat itu mudah diingat, muat rapi di CV, dan bisa Anda bawa pindah platform tanpa mengubah tautan yang sudah tersebar.

Ada alasan praktis lain. Jika hari ini portofolio Anda di GitHub Pages dan tahun depan Anda ingin pindah ke Vercel karena butuh server-side rendering, cukup ubah DNS. Tautan di LinkedIn, GitHub, dan tanda tangan email tetap hidup.

Poin Penting: Domain adalah alamat, hosting adalah rumahnya. Anda boleh pindah rumah kapan saja selama alamatnya tetap milik Anda.

Persiapan: nama domain dan konsep DNS

Pilih nama yang tahan lama

Gunakan nama asli Anda, misalnya rizkyfauzan.my.id, bukan nama proyek yang bisa usang. Hindari angka acak dan tanda hubung berlebihan. Cek juga ejaan: apakah orang bisa menuliskannya setelah mendengar sekali?

Bagi pelajar atau yang baru mulai, Anda bisa memakai domain gratis selamanya berbentuk subdomain .skom.id untuk latihan, lalu pindah ke domain resmi seperti .my.id, .com, atau .id saat portofolio sudah matang. Klaim domain gratis dilakukan lewat my.domaingratis.co.id, sedangkan info biaya domain resmi ada di domaingratis.co.id/harga.

Tiga jenis record yang perlu Anda kenal

Anggap DNS sebagai buku telepon internet. Browser bertanya, "nama ini nomornya berapa?", dan record DNS menjawabnya.

• Record A: mengarahkan nama ke alamat IP. Dipakai untuk domain utama (apex), misalnya namaanda.my.id.
• Record CNAME: mengarahkan nama ke nama lain. Dipakai untuk subdomain seperti www.
• Record TXT: menyimpan teks untuk verifikasi kepemilikan, misalnya verifikasi domain di GitHub atau Google Search Console.

Record MX khusus untuk email. Anda tidak perlu mengubahnya saat memasang website, tetapi Anda harus tahu cara tidak menimpanya, seperti dibahas di bagian kesalahan umum.

Menghubungkan domain ke GitHub Pages

GitHub Pages cocok untuk portofolio statis: HTML biasa, Jekyll, Hugo, Astro, atau hasil build Vite. Prosesnya terdiri dari dua sisi: DNS di penyedia domain dan pengaturan di repositori.

Langkah demi langkah

1. Pastikan situs Anda sudah tayang di alamat username.github.io. Jika belum, aktifkan lewat Settings, Pages, lalu pilih sumber deploy.
2. Masuk ke panel DNS domain Anda. Tambahkan empat record A untuk domain utama dengan nilai 185.199.108.153, 185.199.109.153, 185.199.110.153, dan 185.199.111.153.
3. Tambahkan satu record CNAME untuk www dengan tujuan username.github.io (tanpa nama repositori).
4. Kembali ke repositori, buka Settings, Pages, lalu isi kolom Custom domain dengan domain Anda dan simpan.
5. Tunggu pemeriksaan DNS selesai, lalu centang Enforce HTTPS saat opsi itu aktif.

Jika Anda men-deploy dari cabang tertentu, GitHub akan membuat file bernama CNAME di akar repositori. Jangan hapus file itu. Jika proses build Anda membersihkan folder keluaran setiap kali, masukkan file CNAME ke folder public agar ikut tersalin.

Verifikasi domain agar tidak dibajak

GitHub menyediakan fitur verifikasi domain lewat record TXT di akun atau organisasi Anda. Langkah ini mencegah pihak lain mengklaim subdomain Anda yang tidak lagi terpakai. Bagi portofolio profesional, luangkan lima menit untuk mengaktifkannya.

Menghubungkan domain ke Vercel

Vercel unggul untuk Next.js, Nuxt, SvelteKit, dan proyek yang memerlukan fungsi serverless. Domain dipasang per proyek, bukan per akun.

Langkah demi langkah

1. Buka proyek Anda di dasbor Vercel, lalu masuk ke Settings dan Domains.
2. Ketik domain utama, misalnya namaanda.my.id, lalu tambahkan. Vercel biasanya menawarkan juga versi www dengan pengalihan otomatis. Terima saran itu.
3. Vercel menampilkan nilai DNS yang diminta. Untuk domain utama, umumnya record A dengan nilai 76.76.21.21. Untuk www, record CNAME dengan tujuan cname.vercel-dns.com.
4. Masukkan record tersebut di panel DNS penyedia domain Anda, simpan, lalu kembali ke Vercel dan tunggu status berubah menjadi Valid Configuration.

Penting: Vercel kini dapat menampilkan nilai khusus untuk proyek Anda. Selalu utamakan nilai yang tampil di dasbor, karena itu rujukan paling mutakhir. Angka di artikel ini adalah contoh umum.

Pola alternatif: nameserver Vercel

Anda juga bisa mengarahkan nameserver domain ke Vercel, sehingga seluruh DNS dikelola di sana. Cara ini praktis untuk satu domain dengan banyak proyek, tetapi Anda harus memindahkan sendiri record lain seperti MX email. Jika lupa, email Anda berhenti berfungsi.

Menghubungkan domain ke Netlify

Netlify populer untuk situs statis, formulir kontak sederhana, dan deploy preview tiap pull request. Alur pemasangannya mirip Vercel.

Langkah demi langkah

1. Buka situs Anda di Netlify, lalu pilih Domain management dan Add a domain.
2. Masukkan domain Anda dan konfirmasi kepemilikan.
3. Pilih jalur DNS. Jika memakai DNS penyedia domain, tambahkan record A untuk domain utama ke 75.2.60.5 dan record CNAME untuk www ke nama-situs.netlify.app.
4. Jika memilih Netlify DNS, ganti nameserver domain sesuai yang ditampilkan Netlify.
5. Di bagian HTTPS, jalankan Verify DNS configuration lalu Provision certificate.

Tentukan juga domain primer. Netlify akan mengalihkan versi lain (misalnya www ke non-www) secara otomatis, sehingga mesin pencari tidak melihat dua situs kembar.

Perbandingan ketiga platform

Untuk portofolio statis sederhana, ketiganya memadai. Pilih berdasarkan alur kerja yang sudah Anda pakai, bukan berdasarkan siapa yang paling ramai dibicarakan.

Delapan kesalahan umum dan cara menghindarinya

Sebagian besar keluhan "domain tidak jalan" sebenarnya satu dari daftar berikut. Cek satu per satu sebelum menyalahkan platformnya.

1. Record lama masih tersisa

Domain Anda mungkin masih punya record A yang mengarah ke hosting lama. Hasilnya, sebagian pengunjung melihat situs baru, sebagian situs lama. Hapus record A atau CNAME lama untuk nama yang sama sebelum menambah yang baru.

2. CNAME di domain utama

Standar DNS tidak mengizinkan CNAME berdampingan dengan record lain di nama yang sama. Di domain utama biasanya ada MX dan TXT, sehingga CNAME di sana merusak email. Gunakan record A (atau ALIAS/ANAME bila penyedia mendukung) untuk domain utama, dan CNAME hanya untuk subdomain.

3. Menulis nilai tujuan dengan keliru

Contoh klasik: CNAME ke username.github.io/portofolio. Tujuan CNAME hanya nama host, tanpa jalur dan tanpa https://. Selipan titik di akhir nama, atau spasi tak sengaja, juga sering menyebabkan masalah.

4. Tidak sabar menunggu propagasi

Perubahan DNS bisa cepat, bisa sampai beberapa jam. Alih-alih mengubah-ubah record setiap lima menit, ubah sekali, lalu periksa dengan alat pengecek DNS atau perintah nslookup di terminal. Terlalu banyak perubahan justru menyulitkan Anda melacak sumber masalah.

5. File CNAME hilang saat deploy

Di GitHub Pages, build yang menimpa cabang deploy dapat menghapus file CNAME. Domain kustom lalu terlepas diam-diam. Simpan file itu di folder statis proyek.

6. Proxy CDN menghalangi sertifikat

Jika Anda memakai layanan CDN yang mem-proxy lalu lintas, penerbitan sertifikat HTTPS di platform bisa gagal. Matikan proxy sementara sampai sertifikat terbit, baru nyalakan lagi dengan mode enkripsi yang benar.

7. Path dasar proyek salah

Situs tampil tetapi CSS dan gambar hilang? Biasanya konfigurasi base path di Vite, Next.js, atau Astro masih memakai /nama-repo/. Saat memakai domain sendiri, ubah ke /.

8. Menimpa record email

Saat memindahkan nameserver, record MX dan TXT lama ikut hilang bila tidak disalin. Catat semua record sebelum mengubah apa pun. Satu tangkapan layar panel DNS sudah cukup sebagai cadangan.

Poin Penting: Sebelum mengubah DNS, foto dulu kondisi awalnya. Pemulihan dari catatan jauh lebih cepat daripada menebak ulang konfigurasi.

Setelah online: HTTPS, redirect, dan Search Console

Domain yang menyala belum berarti selesai. Ada tiga hal yang membedakan portofolio yang rapi dari yang asal tayang.

Pastikan HTTPS dan satu versi kanonis

Pilih satu bentuk, namaanda.my.id atau www.namaanda.my.id, lalu arahkan yang lain ke sana. Uji keempat kombinasi (http dan https, dengan dan tanpa www) di jendela penyamaran. Semuanya harus berakhir di alamat yang sama.

Daftarkan ke Google Search Console

Tambahkan properti domain, lalu verifikasi dengan record TXT di DNS. Setelah itu kirim sitemap agar halaman proyek Anda lebih cepat terindeks. Pastikan judul halaman memuat nama Anda dan peran, misalnya "Rizky Fauzan - Frontend Developer", karena itu yang kelak dicari recruiter.

Buat email dengan domain sendiri

Alamat seperti [email protected] terlihat lebih meyakinkan di lamaran kerja daripada alamat gratisan. Tambahkan record MX dari penyedia email pilihan Anda dan TXT untuk SPF. Karena Anda sudah paham aturan CNAME di domain utama, email dan website bisa hidup berdampingan tanpa saling mengganggu.

Langkah berikutnya

Urutan kerja yang aman sebenarnya singkat: tayangkan situs di alamat bawaan, siapkan domain, isi record sesuai platform, aktifkan HTTPS, lalu uji semua varian alamat. Jika Anda masih ragu dengan nama domain, mulai dari subdomain gratis lewat my.domaingratis.co.id, dan upgrade ke domain resmi ketika portofolio sudah siap dipamerkan. Untuk perbandingan opsi domain resmi, kunjungi domaingratis.co.id/harga.

Satu pertanyaan terakhir untuk Anda: kalau recruiter hanya punya sepuluh detik, alamat mana yang ingin ia ketik atau klik? Jawabannya ada di domain Anda sendiri.