in DevOps

Cara Hosting Gratis Website HTML di GitLab Pages

GitLab Pages adalah salah satu produk dari git repository GitLab di mana kita bisa menghosting website statis HTML atau CMS static website generator seperti Jekyll, Middleman, Hexo, Hugo, dan Pelican.

Secara default URL yang digunakan untuk mengakses website yang dihosting di GitLab yaitu http(s)://username.gitlab.io/projectname. URL ini bisa digantikan dengan domain/subdomain kita sendiri dan mendukung HTTPS dengan menggunakan sertifikat SSL/TLS dari Let’s Encrypt.

0. Membuat Repository GitLab

Langkah pertama adalah membuat repository atau project baru di GitLab. Repository yang dibuat untuk GitLab bisa diset private, tidak harus diset public.

Cara Hosting Gratis Website HTML di GitLab Pages

Membuat repository GitLab

1. Push HTML ke Repository

Langkah selanjutnya push website HTML ke repository GitLab. Di sini saya menggunakan template HTML gratis dari Colorlib, Safario.

Konfigurasi akun GitLab di repository lokal.

Buat file .gitlab-ci.yml di dalam direktori website HTML.

Lalu push ke repository GitLab.

Pantau status deploy di Project Name -> CI/CD -> Pipelines. Hasil akhirnya harus passed.

Cara Hosting Gratis Website HTML di GitLab Pages

GitLab CI/CD Pipelines

Setelah status pipelines berubah menjadi passed, berarti website HTML berhasil dideploy ke GitLab Pages. Tapi website tersebut tidak langsung tampil saat itu juga, kalau kita akses URL GitLab Pages project yang tampil adalah pesan error 404. Percobaan yang saya lakukan butuh waktu 30 menit. .

URL aksesnya http://username.gitlab.io/projectname, bisa dicek di Project Name -> Settings -> Pages.

Cara Hosting Gratis Website HTML di GitLab Pages

Website HTML di GitLab Pages

2. Mengganti URL dengan Domain + SSL

Masuk ke halaman Project Name -> Settings -> Pages, klik New Domain. Masukkan nama domain dan aktifkan SSL Let’s Encrypt, lalu Create New Domain.

Cara Hosting Gratis Website HTML di GitLab Pages

Menambah domain untuk URL GitLab Pages

Lalu buat DNS record, CNAME record ke hostname username.gitlab.io atau bisa juga A record ke IP 35.185.44.232, dan TXT record untuk verifikasi domain.

Cara Hosting Gratis Website HTML di GitLab Pages

DNS record untuk GitLab Pages

Setelah DNS record ditambahkan, klik tombol untuk verifikasi. Kalau berhasil statusnya menjadi Verified.

Pemasangan domain ini juga tidak langsung aktif, butuh waktu beberapa jam.

Cara Hosting Gratis Website HTML di GitLab Pages

Domain terverifikasi

Cara Hosting Gratis Website HTML di GitLab Pages

Website HTML di GitLab Pages dengan custom domain

Selain menggunakan domain, kita juga bisa menggunakan subdomain.

Cara Hosting Gratis Website HTML di GitLab Pages

URL GitLab Pages memakai subdomain

Selamat mencoba 🙂

Write a Comment

Comment