# Deploy Hugo dari GitLab Repository di Cloudflare Pages

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Static%20Site.png" alt=""><figcaption></figcaption></figure>

## Introduction

Pada artikel kali ini kita akan men-deploy static site [**Hugo**](https://gohugo.io) di [**Cloudflare Pages**](https://pages.cloudflare.com), yang mana sebelumnya untuk Hugo sendiri sudah di-deploy di lokal atau server lain, disini sebelumnya untuk sampel Hugo di-deploy di [**WHM**](https://cpanel.net) yang kemudian di push ke public repository [**GitLab**](https://gitlab.com).

Cloudflare Pages sendiri merupakan JAMstack platform yang disediakan oleh [**Cloudflare**](https://www.cloudflare.com) khusus bagi Front-End Developer untuk melakukan kolaborasi dalam proses deploy website sebelum dipublikasi atau onboarding ke publik.

## Installation

Pada simulasi kali kita akan menggunakan public repository Hugo yang sudah ada dan berikut langkah-langkahnya:

### Login ke Cloudflare

Login ke [**https://dash.cloudflare.com/login**](https://dash.cloudflare.com/login) dengan menggunakan data credential akun Cloudflare yang telah dimiliki sebelumnya, jika belum memiliki akun Cloudflare silakan melakukan registrasi akun melalui [**https://dash.cloudflare.com/sign-up**](https://dash.cloudflare.com/sign-up).

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Login.png" alt=""><figcaption><p>Login to Dashboard</p></figcaption></figure>

### Mengkoneksikan Public Repository Git

Setelah masuk ke dashboard utama dari Cloudflare, ke menu **Workers & Pages > Overview > Pages**, klik **Connect to Git**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Pages.png" alt=""><figcaption><p>Connect to Git</p></figcaption></figure>

### Memilih Akun GitLab

Selanjutnya pilih tab menu **GitLab**, pilih **GitLab account** yang digunakan (Misal: **madfxr**), jika belum ada tambahkan akun GitLab yang digunakan dengan klik **Add account** dan login dengan menggunakan data credential yang digunakan, setelah itu **Select a repository** (Misal: **site**), klik **Begin setup**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Repository.png" alt=""><figcaption><p>Select a Repository</p></figcaption></figure>

### Membuat Project Baru

Kemudian tentukan **Project name** (Misal: **site**) dan pilih **Production branch** (Misal: **main**).

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Project.png" alt=""><figcaption><p>Project and Branch Setup</p></figcaption></figure>

### Melakukan Konfigurasi Framework

Pilih **Framework preset** menjadi **Hugo**, untuk **Build command** menggunakan **`hugo`**  dan **Build output directory** tentukan menjadi **`public`** .

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Setting.png" alt=""><figcaption><p>Build Settings</p></figcaption></figure>

### Menambahkan Environment Variable

Selanjutnya tambahkan variabel baru untuk environment Hugo yang akan di-deploy di Cloudflare Pages dengan klik **Add variable**, pada simulasi ini variabel yang ditambahkan yakni **`HUGO_VERSION`** dengan value yang diisikan yakni versi dari Hugo (Misal: **0.118.2**) dan juga tambahkan variabel **`CF_PAGES_URL`** dengan value **`hugo -b`** untuk menentukan **`baseURL`**  yang digunakan oleh Hugo pada Cloudflare Pages, kemudian klik **Save and Deploy**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Environment.png" alt=""><figcaption><p>Environment Variables</p></figcaption></figure>

### Proses Deploy Static Site

Tunggu hingga proses deploy Hugo selesai, apabila proses deploy Hugo sudah berhasil maka akan seperti pada gambar di bawah ini, kita akan mendapatkan nama website secara random (Misal: [**site-22m.pages.dev**](https://site-22m.pages.dev/)).

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Site.png" alt=""><figcaption><p>Deploy Site</p></figcaption></figure>

### Melakukan Review Project

Lakukan peninjauan terkahir sebelum ke project yang telah di-deploy, apabila semua sudah selesai klik **Continue to project**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Deployment.png" alt=""><figcaption><p>Continue to Project</p></figcaption></figure>

### Masuk ke Project

Setelah itu lihat project yang selesai di-deploy dengan masuk kembali ke menu **Workers & Pages > Overview > Pages**, kemudian klik pada nama project (Misal: **site**).

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Overview.png" alt=""><figcaption><p>Overview</p></figcaption></figure>

### Melihat Deployment dari Project

Dan berikut ini adalah **Deployments** dari project yang sebelumnya sudah ter-deploy.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Production.png" alt=""><figcaption><p>Deployments</p></figcaption></figure>

### Melakukan Konfigurasi Custom Domain

Selanjutnya lakukan konfigurasi custom domain untuk static site Hugo yang telah di-deploy di Cloudflare Pages tadi dengan masuk ke menu **Custom domains**, kemudian klik **Set up custom domain**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Custom%20Domain.png" alt=""><figcaption><p>Custom Domain</p></figcaption></figure>

### Menambahkan Domain Baru

Masukan domain yang digunakan (Misal: **site.medusa.my.id**), klik **Continue**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Sub-Domain.png" alt=""><figcaption><p>Add a Custom Domain</p></figcaption></figure>

### Aktivasi Custom Domain

Setelah itu klik **Activate domain**.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/DNS.png" alt=""><figcaption><p>Confirm New DNS Record</p></figcaption></figure>

### Menunggu Proses Propagasi Domain

Tunggu proses propagasi domain selesai, biasanya maksimal membutuhkan waktu kurang lebih 48 jam, karena pada saat kita menambahkan DNS record, maka domain akan membutuhkan waktu agar dapat dikenali ke setiap resolver ISP yang ada di internet.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Propagation.png" alt=""><figcaption><p>DNS Propagation</p></figcaption></figure>

Apabila status domain dari <mark style="color:orange;">**Verifying**</mark> sudah berubah menjadi <mark style="color:green;">**Active**</mark>, maka domain sudah dapat diakses dari publik.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/Resolved.png" alt=""><figcaption><p>Status of the Custom Domain</p></figcaption></figure>

## Testing

### Akses Static Site Hugo

Apabila Hugo sudah berhasil ter-deploy dan custom domain sudah resolved, maka akan seperti pada gambar di bawah ini.

<figure><img src="https://nos.wjv-1.neo.id/cdn.medusa.my.id/App.png" alt=""><figcaption><p>Static Site</p></figcaption></figure>

Demikian sedikit pengetahuan dan pengalaman yang dapat saya bagikan, semoga apa yang telah saya sampaikan dapat bermanfaat bagi kita semua.

<details>

<summary><strong>Referensi</strong></summary>

* [**Install Hugo on Linux**](https://gohugo.io/installation/linux)
* [**Tutorial: Build, test, and deploy your Hugo site with GitLab**](https://docs.gitlab.com/ee/tutorials/hugo)
* [**Deploy a Hugo site**](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site)

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.madfxr.my.id/documentation/categories/devops/deploy-hugo-dari-gitlab-repository-di-cloudflare-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.