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.

Membuat repository di GitLab

4. Masuk ke direktori website Hugo untuk memasang alamat repository GitLab yang baru saja dibuat.

[INPUT]

1 2 3 4 cd blog git config user.name “Musa Amin” git config user.email “hai@musaamin.web.id” git remote add origin git@gitlab.com:musaamin/blog.git    

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.

[INPUT]

1 baseURL = “https://musaamin.gitlab.io/blog/”    

7. Buat file baru dengan nama .gitlab-ci.yml.

[INPUT]

1 nano .gitlab-ci.yml

8. Isi filenya.

[INPUT]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 image: monachus/hugo   variables:   GIT_SUBMODULE_STRATEGY: recursive   test:   script:   – hugo   except:   – master     pages:   script:   – hugo –environment production   artifacts:     paths:     – public   only:   – master    

9. Lalu push semua file yang ada ke repository GitLab.

[INPUT]

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

Git push ke repository GitLab

10. Kembali ke repository GitLab, buka menu CI/CD -> Pipelines. Status dari Pipeline yang ada harus passed.

Status pipeline sedang running

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.

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.

GitLab Pages New Domain

2. Masukkan nama domain lalu Create New Domain.

Menambah domain baru di GitLab Pages

3. Verifikasi domain yang dimasukkan dengan menambah DNS record sesuai petunjuk dari GitLab.

Domain belum terverifikasi

Domain sudah terverifikasi

4. Ubah baseURL yang ada di konfigurasi config.toml

[INPUT]

1 baseURL = “https://blog.jsdev.web.id/”

5. Push kembali ke GitLab.

[INPUT]

1 2 3 git add . git commit -m “Ganti baseURL ke blog.jsdev.web.id” git push -u origin master

6. Pantau kembali status pipeline, harus bisa passed.

Status pipeline ganti baseURL

7. Terakhir akses domainnya. Percobaan yang saya lakukan membutuhkan waktu 3 menit sampai bisa tampil di domain.

Hugo di GitLab Pages memakai custom domain

Selamat mencoba 🙂

Leave a Reply

Your email address will not be published.