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.

   

4. Masuk ke direktori website Hugo untuk memasang alamat repository GitLab yang baru saja dibuat.
   
   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

   1 2 3 4

   cd blog git config user.name "Musa Amin" git config user.email "[email protected]" 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.
   
   baseURL = "https://musaamin.gitlab.io/blog/"

   1	baseURL = "https://musaamin.gitlab.io/blog/"

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

   1	nano .gitlab-ci.yml

8. Isi filenya.
   
   image: monachus/hugo variables: GIT_SUBMODULE_STRATEGY: recursive test: script: - hugo except: - master pages: script: - hugo --environment production artifacts: paths: - public only: - master

   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.
   
   git add . git commit -m "Initial commit" git push -u origin master

   1 2 3

   git add . git commit -m "Initial commit" git push -u origin master

   

10. Kembali ke repository GitLab, buka menu CI/CD -> Pipelines. Status dari Pipeline yang ada harus 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.

    

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.

   

2. Masukkan nama domain lalu Create New Domain.

   

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

   

   

4. Ubah baseURL yang ada di konfigurasi config.toml
   
   baseURL = "https://blog.jsdev.web.id/"

   1	baseURL = "https://blog.jsdev.web.id/"

5. Push kembali ke GitLab.
   
   git add . git commit -m "Ganti baseURL ke blog.jsdev.web.id" git push -u origin master

   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.

   

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

   

Selamat mencoba 🙂