in DevOps

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 🙂

Write a Comment

Comment

  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 ?