Hosting JAMstack Website Gratis Menggunakan Cloudflare Pages

Cloudflare Pages! Tempat kamu frontend developers buat deploy hasil karya kamu.

Cloudflare Pages
Cloudflare Pages

Buat kamu yang belum tau apa itu cloudflare pages, Cloudflare Pages adalah aplikasi Jamstack frontend dan hosting deploy, Karena Cloudflare Page adalah Jamstack ekosistem pastikan kamu sudah menggunakan ekosistem jamstack juga.

Kamu bisa menggunakan Static Site Generator (SSG) / CSS framework seperti Tailwind dan lainnya. Pastikan juga kamu sudah memiliki akun cloudflare dan juga github repository yang nanti nya di sambungkan ke cloudflare pages, jika kamu belum mempunyai akun cloudflare kamu bisa mendaftar nya di website cloudflare.

Karena Cloudflare Page hanya bisa mendeploy Static Assets dan menyebarkan luas nya menggunakan Content Delivery Network (CDN), di sini saya membutuhkan SSG untuk menghasilkan markup dan static assets, oke disini saya akan menggunakan Zola Sebagai SSG yang akan Saya Deploy di Cloudflare pages.

Apa itu Zola SSG? Zola adalah Static Site Generator ditulis menggunakan bahasa rust dan menggunakan Tera sebagai templating. Kamu bisa melihat dokumentasi Zola dan Tera di website nya masing masing. Selain Zola Sebagai SSG yang saya gunakan masih banyak lagi SSG yang bisa kamu pilih Seperti Next.js / Hugo / Astro / Jekyll Sesuai yang kamu mau.


Table of Contents


Template & Styling

Saya akan membuat basic landing page yang hanya berisi title menggunakan Zola dan Tailwind, Pertaman saya memulai init blog/website yang ingin saya buat menggunakan perintah :

zola init my-blog
Welcome to Zola! Please answer a few questions to get started quickly.
Any choices made can be changed by modifying the `config.toml` file later.
> What is the URL of your site? (https://example.com): http://127.0.0.1:111
> Do you want to enable Sass compilation? [Y/n]: n
> Do you want to enable syntax highlighting? [y/N]: n
> Do you want to build a search index of the content? [y/N]: N
Done! Your site was created in /home/zola/my-blog
Get started by moving into the directory and using the built-in server: `zola serve`
Visit https://www.getzola.org for the full documentation.

Berikut ini adalah hasil Output Struktur root directory dari blog yang baru saya init.

root directory
root directory

Setelah init blog saya akan membuat base dan index template jangan lupa Styling menggunakan Tailwind CSS.

--base.html--
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    <title>{{ config.title }}</title>
    <!-- Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="{{ config.description }}" />
    <link href="{{ config.base_url | safe }}/main.css" rel="stylesheet" type="text/css" />
    {% block head %}
    {% endblock head %}
</head>
<body>
{% block body %}
{% endblock body %}
</body>
</html>
--- end base.html ---
--- index.html ---
{% extends 'base.html' %}
{% block body %}
<div
    class="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center"
  >
    <div class="mx-auto max-w-3xl text-center">
      <h1
        class="font-sans bg-gradient-to-r from-pink-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl"
      >
        Thoughts, stories
        <span class="sm:block"> and JAMstack. </span>
      </h1>
     </div>
</div>
{# todo #}
{% endblock body %}
--- end index.html ---

Setelah selesai membuat Templates dan sudah juga di Styling saya akan memberikan perintah zola build dan output yang di keluarkan adalah public directory yang berada di struktur root blog saya.

root dir
root dir

Github & Cloudflare Pages

Setelah selesai memmbuat blog menggunakan Zola dan Tailwind CSS saat nya Push project Blog ke github repos dengan mengunakan perintah git init / git commit /git push.

Blog Github repo
Blog Github repo

gambar di atas adalah repo dari project blog yang baru saja saya buat jika kalian mau melihat kalian bisa mengunjungi repo nya di Github saya. selanjut nya saya akan login ke dashboard cloudflare saya dan membuka dashboard cloudflare pages. Saya sudah berada di dashboard pages dan akan membuat project baru dengan menggunakan git dan mengarahkan ke repo project blog saya. pilih connect to git.

Pages dashboard
Pages dashboard

setelah itu saya akan memilih repo blog project lalu save.

pilih repo
pilih repo

lanjut klik begin setup dan akan memasuki setup build & deployments

setup build & deployments
setup build & deployments

kamu bisa mengatur Project name dan Branch github project kamu, untuk Build settings saya menggunakan pengaturan seperti di bawah ini:

setting
setting
Framework preset = Zola
Build command = zola build
Build output directory = public << tergantung SSG yang kamu gunakan

Lalu klik Save dan deploy

deploy berhasil
deploy berhasil

blog saya sudah berhasil di deploy dengan menggunakan Cloudflare pages