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.
    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.
    baseURL = "https://musaamin.gitlab.io/blog/"    
      
  7. Buat file baru dengan nama .gitlab-ci.yml.
    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    
      
  9. Lalu push semua file yang ada ke repository GitLab.
    git add .
    git commit -m "Initial commit"
    git push -u origin master   
      

    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
    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
      
  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 ?