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.

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.

[INPUT]

1 2 3 4 5 cd ~/project-web git init   git config user.name “Nama Akun GitLab” git config user.email “email@akungitlab.com” git remote add origin git@gitlab.com:username/projectname.git

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

[INPUT]

1 2 3 4 5 6 7 8 9 10 11 pages:   stage: deploy   script:   – mkdir .public   – cp -r * .public   – mv .public public   artifacts:     paths:     – public   only:   – master

Lalu push ke repository GitLab.

[INPUT]

1 2 3 git add . git commit -m “Initial commit” git push -u origin master

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

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.

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.

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.

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.

Domain terverifikasi

Website HTML di GitLab Pages dengan custom domain

Selain menggunakan domain, kita juga bisa menggunakan subdomain.

URL GitLab Pages memakai subdomain

Selamat mencoba 🙂

Leave a Reply

Your email address will not be published.