author Ahmad Muhardian

Cara Hosting Hugo di Cloudflare Pages


Hugo Cloudflare Pages

Hugo sebenarnya bisa kita hosting di mana aja.

Mau di shared hosting, VPS, Cloud hosting, semuanya bisa.

Intinya, kita hanya perlu upload folder public ke server. Namun, beda tempat hosting, beda juga caranya.

Kali ini kita akan coba hosting Hugo di Cloudflare Pages.

Apa itu Cloudfare Pages?

Gimana cara mendaftarnya?

..dan yang terpenting, gimana cara hosting di sana?

Yok kita bahas!

Apa itu Cloudflare Pages?

Cloudflare Pages merupakan layanan hosting dari Cloudflare untuk hosting web statis. Di Cloudflare Pages Kita bisa hosting web yang dibuat dengan React, Vue, Gatsby, Hugo, dan web statis lainnya.

Sebenarnya Cloudflare Pages ini seperti Netlify, Vercel, Firebase Hosting, Surge.sh, dan lain-lain.

Namun, yang beda di sini adalah harga paket yang ditawarkan.

Cloudflare Pages menawarkan paket hosting dengan bandwidth unlimited untuk paket free, pro, dan business.

cloudflare pages pricing

Ini tidak seperti layanan hosting lainnya yang cuma ngasi bandwidth 100GB/bulan. Tapi harga paket ini tentunya dapat berubah swaktu-waktu, tergantung dari ketentuan Cloudflare.

Namun, buat kamu yang punya website dengan trafik tinggi, ini bisa dicoba.

Cara Mendaftar Cloudflare Pages

Kita bisa mendaftar Cloudflare Pages melalui halaman ini: https://pages.cloudflare.com/.

Klik Sign Up untuk mendaftar.

daftar cloudflare pages

Jika kamu sudah punya akun Cloudflare, kamu bisa mendaftar atau masuk dengan akun tersebut. Klik saja Log in untuk masuk.

Kemudian isi alamat email dan password Cloudflare-mu.

Ini adalah tampilan Dashboard Cloudflare Pages, setelah kita berhasil login/membuat akun.

dashboard cloudflare pages

Pada dashboard ini, saya sudah pernah hosting web bernama ternaklinux. Jika kamu belum pernah hosting website apapun, maka tampilannya mungkin tidak akan seperti ini.

Oke.. sekarang kita akan pelajari gimana cara hosting Hugo di Cloudflare Pages.

Cara Hosting Hugo di Cloudflare Pages

Ada tiga cara yang bisa kita lakukan untuk hosting Hugo di Cloudflare Pages:

  1. Menggunakan Git (Github dan Gitlab);
  2. Upload Folder public secara manual;
  3. Menggunakan CLI wrangler.

Cara mana yang akan kita gunakan?

Kita akan gunakan cara pertama, yakni menggunakan Github. Pastikan website Hugo-mu sudah di taruh di Github ya.

Jadi nanti workflow-nya akan seperti ini:

workflow github cloudflare pages

Si Creator yang punya website akan melakukan push atau upload perubahan terbaru ke Github tempat ia menyimpan source websitenya.

Kemudian secara otomatis akan di deploy ke Cloudflare Pages dan Visitor pun bisa menikmati websitenya.

Tenang saja, Deploy otomatisnya akan dilakukan oleh Cloudflare Pages, jadi kita tidak perlu setup-setup Github Action untuk melakukannya.

Oke sekarang mari kita muali..

Step 1: Connect Github dengan Clouldfalre Pages

Buatlah project baru di Cloudflare Pages, klik Create a Project.

Kemudian pilih Connect to Git.

create project di cloudflare pages

Setelah itu, klik Connect to Github atau Connect to Gitlab jika kamu menggunakan Gitlab.

Setelah itu, tinggal pilih account yang ingin dihubungkan dengan Cloudflare Pages. Pada tutorial ini, saya akan menggunakan akun personal Github.

connect account

Bisa juga menggunakan akun organisasi, jika repo-nya berada di Organisasi.

Setelah itu, klik Install & Authorize untuk mengizinkan Cloudflare Pages membaca repository kita.

authorize cloudflare pages

Setelah itu masukan password dan jika berhasil, kita akan diarahkan ke halaman dashboard cloudflare.

Step 2: Membuat Poject

Ulangi buat project lagi dan klik Connect to Git, lalu pilih akun yang sudah terhubung. Lalu pilih repository-nya.

select repo

Pada tutorial ini, saya akan menggunakan repo blog milik saya.

Setelah itu, klik tombol Begin setup.

Step 3: Project Setting

Pada halaman yang muncul, kita akan diminta untuk menentukan nama project. Tulislah nama project sesui dengan nama yang kamu inginkan.

project name

Untuk branch, biarkan saja master atau main.

Oh iya, kita akan dapat custom sub domain sesuai dengan nama project yang kita berikan. Pada contoh ini, saya akan mendapatkan domain ardianta.pages.dev.

Jika domain tersebut sudah ada yang pakai, maka kita akan mendapat nama domain acak yang mirip dengan nama project.

Lalu, Pada Build Settings, pilih framework: Hugo dan isi:

  • Build Command: hugo --minify
  • Build Output Directory: public.

Setelah itu klik Save and Deploy.

build settings

Tunggulah beberapa saat, website kita akan segera di deploy ke Cloudflare Pages.

Jika tempil seperti ini..

deploy success

..berarti deploy berhasil dilakukan.

Kita bisa klik Continue to Project untuk menuju ke halaman project.

Setup Custom Domain di Cloudflare Pages

Cloudflare Pages akan memberikan sub domain gratis .pages.dev, ini bisa kita ganti dengan custom domain yang sudah kita miliki, misalnya .com.

Caranya:

Step 1: Menambahkan Custom Domain

Masuk ke halaman project, kemudian klik menu Custom domains.

menu custom domain

Setelah itu, klik tombol Set up a custom domain.

setup custom domain

Tulis nama domainmu, kemudian klik Continue.

nama domain

Step 2: Konfigurasi DNS

Jika domain kita sudah didaftarkan di Cloudflare, maka Cloudflare Pages akan otomatis bisa mendeteksi konfigurasinya dan kita bisa langsung menaktifkannya dengan klik tombol Activate Domain

activate domain

Tapi jika domainmu belum pernah didaftarkan di Cloudflare, jangan panik.

Kamu bisa seting secara manual di DNS manajemen, tinggal tambahkan aja record baru dengan isi:

  • Type: CNAME
  • Name: www
  • Target: ardianta.pages.dev (sub domain yang diberikan cloudflare)

Contoh:

dns-record

Setelah itu simpan dan tunggu jika ada propagasi

Step 3: Tunggu Propagasi

Jika kita menggunakan tipe A record, biasanya kita harus menunggu 48 jam untuk propagasi domain ke IP server cloudlfare. Tapi karena kita menggunakan CNAME, biasanya akan langsung aktif.

Jika custom domain kita sudah active seperti ini:

custom domain

Maka artinya custom domain sudah berhasil ditambahkan.

Mantap! 🎉

Sekarang kita sudah bisa menggunakan Cloudflare Pages dengan custom domain.

Apa Selanjutnya?

Oke, sekian dulu tutorial hosting Hugo di Cloudlfare Pages, semoga bisa dipahami.

Jika ada yang belum dipahami, silahkan tanya di komentar ya.

Selama mencoba.

Baca Juga ini

Cara Menggunakan SSL Gratis dari Cloudflare untuk Github Pages (Kustom Domain)

Cara Menggunakan SSL Gratis dari Cloudflare untuk Github Pages (Kustom Domain)

Gihub pages merupakan layanan hosting web statis dari Github. Layanan ini sebenarnya sudah memberikan SSL Gratis untuk domain yang menggunakan .github.io. Lalu bagaimana dengan yang kustom domain atau domain sendiri? Untuk yang kustom domain, kita bisa menggunakan SSL gratis dari Cloudflare. Cloudflare merupakan layanan untuk CDN, DNS Management, Cache, SSL, dll. Saya kira, setiap website harus menggunakan Cloudflare, karena bnayak manfaat yang bisa didapat dari sana.

Proses Migrasi Template Petani Kode dari Bootstrap ke Tailwind

Proses Migrasi Template Petani Kode dari Bootstrap ke Tailwind

Proses pembuatan ulang template Petani Kode menggunakan TailwindCSS dan alasannya mengapa sih menggunakan Tailwind

Cara Menggunakan Tailwind CSS untuk Membuat Tema Hugo

Cara Menggunakan Tailwind CSS untuk Membuat Tema Hugo

Pelajari gimana cara menggunakan TailwindCSS untuk membuat tema Hugo

Menggunakan Markdown Render Hooks Sebagai Ganti Shortcode pada Hugo

Menggunakan Markdown Render Hooks Sebagai Ganti Shortcode pada Hugo

Markdown render hooks adalah fitur baru di Hugo 0.62.0 yang akan membantu kita membuat custom render untuk Link dan Image. Bagaimana cara pakainya? Silahkan simak selengkapnya di artikel ini...

Cara Deploy Hugo di Shared Hosting dengan Git

Cara Deploy Hugo di Shared Hosting dengan Git

Ini adalah panduan melakukan deploy Hugo di Shared Hosting menggunakan Git. Tinggal commit dan push! Website akan langsung ter-deploy di server.

Cara Hosting Hugo di Netlify, Cepat tidak Sampai 30 detik..

Cara Hosting Hugo di Netlify, Cepat tidak Sampai 30 detik..

Gimana sih cara hosting Hugo di Netlify? Katanya cepat, tidak sampai 30 detik. Benarkah? mari kita bahas...