Cara Deploy Website Hugo ke GitLab Pages

Sebelumnya saya telah membahas tentang cara membuat website dengan Hugo static site generator, sekarang masuk ke pembahasan bagaimana cara deploy website Hugo ke GitLab Pages. Deploy Hugo ke GitLab Pages secara umum sama saja dengan deploy website HTML, yang berbeda adalah script untuk deploy khusus untuk Hugo.

Deploy Hugo ke GitLab Pages

  1. Buat akun di GitLab jika belum punya akun.
  2. Buat SSH key untuk login GitLab.
  3. Membuat project atau repository baru di GitLab, di sini saya memakai nama blog.
    Cara Deploy Website Hugo ke GitLab Pages
    Membuat repository di GitLab
  4. Masuk ke direktori website Hugo untuk memasang alamat repository GitLab yang baru saja dibuat.
  5. Default URL website yang dideploy di GitLab Pages adalah https://username.gitlab.io/project, berarti untuk URL dari GitLab Pages yang saya buat adalah https://musaamin.gitlab.io/blog.
  6. Ubah baseURL yang berada di file config.toml, sesuaikan dengan URL GitLab Pages.
  7. Buat file baru dengan nama .gitlab-ci.yml.
  8. Isi filenya.
  9. Lalu push semua file yang ada ke repository GitLab.

    Cara Deploy Website Hugo ke GitLab Pages
    Git push ke repository GitLab
  10. Kembali ke repository GitLab, buka menu CI/CD -> Pipelines. Status dari Pipeline yang ada harus passed.
    Cara Deploy Website Hugo ke GitLab Pages
    Status pipeline sedang running
    Cara Deploy Website Hugo ke GitLab Pages
    Status pipeline sudah passed
  11. Setelah status Pipeline menjadi passed berarti Hugo sukses dideploy, tetapi hasilnya tidak langsung tampil ketika browsing URL, harus menunggu sekitar beberapa menit, yang saya coba sekitar 5 menit.
    Cara Deploy Website Hugo ke GitLab Pages
    Website Hugo sudah online

Mengganti URL GitLab Pages

Default URL dari GitLab Pages bisa diganti dengan domain/subdomain milik kita sendiri. Misalnya di sini saya menggunakan subdomain blog.jsdev.web.id.

  1. Buka project, lalu menu Settings -> Pages. Klik New Domain untuk menambahkan domain baru.
    Cara Deploy Website Hugo ke GitLab Pages
    GitLab Pages New Domain
  2. Masukkan nama domain lalu Create New Domain.
    Cara Deploy Website Hugo ke GitLab Pages
    Menambah domain baru di GitLab Pages
  3. Verifikasi domain yang dimasukkan dengan menambah DNS record sesuai petunjuk dari GitLab.
    Cara Deploy Website Hugo ke GitLab Pages
    Domain belum terverifikasi
    Cara Deploy Website Hugo ke GitLab Pages
    Domain sudah terverifikasi
  4. Ubah baseURL yang ada di konfigurasi config.toml
  5. Push kembali ke GitLab.
  6. Pantau kembali status pipeline, harus bisa passed.
    Cara Deploy Website Hugo ke GitLab Pages
    Status pipeline ganti baseURL
  7. Terakhir akses domainnya. Percobaan yang saya lakukan membutuhkan waktu 3 menit sampai bisa tampil di domain.
    Cara Deploy Website Hugo ke GitLab Pages
    Hugo di GitLab Pages memakai custom domain

Selamat mencoba 🙂

Default image
Musa Amin
I am a Linux System Administrator and also write many tutorials about Linux, Cloud, and Open Source. Hire me via email hai[at]musaamin.web.id.

2 Comments

  1. mas, saya ikutin tutorialnya tapi ada eror saat ci/cd pipelines Failed
    Updating/initializing submodules recursively…
    fatal: No url found for submodule path ‘themes/Mainroad’ in .gitmodules
    gimana ya ngatasinnya ?

Leave a Reply