Cara Membuat Website Static di GitHub Pages Menggunakan CloudCannon atau Astro

Dalam era web modern, kecepatan dan keamanan adalah prioritas utama. Inilah alasan mengapa arsitektur Jamstack dan static site generator (SSG) menjadi sangat populer di kalangan web developer. GitHub Pages telah lama menjadi solusi favorit untuk hosting gratis yang handal, namun memilih alat yang tepat untuk membangun kontennya seringkali menjadi tantangan tersendiri.

Artikel ini akan membahas tutorial pembuatan static website di GitHub Pages menggunakan dua pendekatan berbeda: CloudCannon sebagai CMS visual yang intuitif, dan Astro sebagai framework modern yang mengutamakan performa.

 

Ikhtisar GitHub Pages: Solusi Hosting Gratis dan Andal

GitHub Pages adalah layanan hosting situs statis yang mengambil file HTML, CSS, dan JavaScript langsung dari repositori di GitHub. Sejak diluncurkan, layanan ini telah menjadi tulang punggung bagi jutaan dokumentasi proyek, portofolio, dan blog pribadi.

Beberapa keunggulan utama GitHub Pages meliputi:

1. Gratis Sepenuhnya: Tidak ada biaya bulanan untuk repositori publik.
2. Keamanan Tinggi: Karena situsnya statis, tidak ada database yang bisa diretas.
3. Integrasi Git: Alur kerja deployment otomatis setiap kali ada perubahan kode (push).
4. Custom Domain: Mendukung penggunaan domain kustom dengan SSL gratis dari Let's Encrypt.

Namun, GitHub Pages hanyalah "wadah". Untuk mengisi wadah tersebut dengan konten yang dinamis dan mudah dikelola, pengembang memerlukan alat seperti CloudCannon atau Astro.

"Kesederhanaan adalah kunci dari skalabilitas. Website statis bukan berarti website yang membosankan, melainkan website yang efisien dan tahan lama." — Prinsip Modern Web Development.

 

CloudCannon vs. Astro: Mana yang Tepat untuk Anda?

Sebelum melangkah ke teknis, sangat penting untuk memahami perbedaan mendasar antara kedua alat ini. CloudCannon lebih berfokus pada pengalaman manajemen konten (CMS), sementara Astro adalah framework pengembangan yang sangat fleksibel.

Tabel Perbandingan: CloudCannon vs. Astro

Fitur	CloudCannon	Astro
Jenis Alat	Visual Content Management System (CMS)	Static Site Generator (Framework)
Target Pengguna	Content Editor & Developer	Web Developer (Intermediate - Pro)
Kemudahan Penggunaan	Sangat Tinggi (Visual Editor)	Sedang (Perlu pemahaman kode)
Performa Utama	Manajemen konten yang sinkron dengan Git	Kecepatan loading (Islands Architecture)
Bahasa Pemrograman	Mendukung Jekyll, Hugo, Eleventy, dsb.	HTML, CSS, JS, dan komponen (React/Vue/Svelte)
Kustomisasi	Terbatas pada template/CMS	Sangat Luas

 

Pengaturan CloudCannon: CMS Visual untuk Situs Statis

CloudCannon adalah pilihan tepat jika Anda ingin memiliki website statis namun tetap ingin mengedit konten secara visual layaknya menggunakan WordPress.

Langkah-langkah Konfigurasi:

1. Siapkan Repositori GitHub: Buat repositori baru di GitHub (misalnya: my-static-site). Isi dengan file dasar atau gunakan template Jekyll/Hugo.
2. Hubungkan ke CloudCannon:
• Daftar akun di CloudCannon.
• Pilih "Add New Site" dan hubungkan dengan akun GitHub Anda.
• Pilih repositori yang telah dibuat.
3. Konfigurasi Build: CloudCannon akan mendeteksi jenis generator yang Anda gunakan secara otomatis. Jika menggunakan HTML murni, Anda bisa langsung memulai.
4. Editing Visual: Gunakan fitur "Visual Editor" milik CloudCannon. Anda bisa mengubah teks dan gambar secara langsung di layar, dan CloudCannon akan melakukan commit perubahan tersebut kembali ke GitHub secara otomatis.
5. Sinkronisasi GitHub Pages: Setelah CloudCannon melakukan build, file statis akan dikirim kembali ke cabang gh-pages atau main di GitHub, yang kemudian akan ditayangkan oleh GitHub Pages.

 

Instalasi & Konfigurasi Astro: Performa Tanpa Kompromi

Astro adalah framework yang sedang naik daun karena pendekatannya yang unik: mengirimkan nol JavaScript ke browser secara default. Ini memastikan skor Google PageSpeed Insights yang sempurna.

Langkah-langkah Instalasi Astro:

Buka terminal Anda dan jalankan perintah berikut untuk membuat proyek baru:

# Membuat proyek Astro baru

npm create astro@latest

Ikuti instruksi di terminal (pilih folder, pilih template "Empty", dan instal dependensi).

Konfigurasi untuk GitHub Pages:

Agar Astro dapat berjalan dengan baik di GitHub Pages (terutama jika Anda menggunakan sub-direktori seperti username.github.io/project-name/), Anda perlu menyesuaikan file astro.config.mjs:

import { defineConfig } from 'astro/config';

 

export default defineConfig({

  site: 'https://username.github.io',

  base: '/nama-repositori', // Kosongkan jika menggunakan domain utama

});

 

Membuat Konten di Astro:

Anda bisa membuat file .astro di folder src/pages/. Contoh file index.astro:

---

const title = "Halo GitHub Pages!";

---

<html>

  <head>

    <title>{title}</title>

  </head>

  <body>

    <h1>Selamat Datang di Website Astro saya</h1>

    <p>Dibuat dengan kecepatan maksimal.</p>

  </body>

</html>

 

Deployment & Customization

Setelah website Anda siap, langkah terakhir adalah mempublikasikannya agar bisa diakses oleh publik.

Deployment Astro melalui GitHub Actions

Astro memerlukan proses build sebelum bisa ditayangkan. Cara termudah adalah menggunakan GitHub Actions.

1. Buat file di .github/workflows/deploy.yml.
2. Gunakan action resmi dari Astro untuk otomatisasi build.
3. Di pengaturan repositori GitHub, masuk ke menu Pages, lalu ubah "Build and deployment" menjadi "GitHub Actions".

Deployment CloudCannon

CloudCannon memiliki integrasi bawaan. Anda hanya perlu memastikan bahwa output folder dari CloudCannon diarahkan ke cabang yang tepat. CloudCannon biasanya menyediakan URL preview, namun untuk produksi, menghubungkannya ke GitHub Pages memberikan keuntungan kustom domain gratis.

Customization Tips:

• SEO: Pastikan menambahkan meta tags di bagian <head>. Gunakan plugin SEO jika menggunakan Astro.
• CSS Framework: Anda bisa dengan mudah mengintegrasikan Tailwind CSS baik di Astro maupun CloudCannon untuk mempercepat proses desain.
• Free Resources: Manfaatkan layanan seperti Unsplash untuk gambar gratis dan Google Fonts untuk tipografi yang menarik.

 

Kesimpulan

Membuat website statis di GitHub Pages adalah langkah cerdas bagi pengembang yang menginginkan efisiensi biaya dan performa tinggi.

• Pilih CloudCannon jika Anda memprioritaskan kemudahan dalam mengelola konten tanpa harus menyentuh kode setiap kali ingin mengganti teks. Ini sangat cocok untuk proyek klien atau tim pemasaran.
• Pilih Astro jika Anda ingin kontrol penuh atas kode, performa yang luar biasa cepat, dan ingin menggunakan teknologi web terbaru seperti komponen UI.

Apapun pilihannya, ekosistem static site saat ini telah memberikan kemudahan yang luar biasa dibandingkan beberapa tahun lalu. Selamat membangun website impian Anda!

Browse More Articles

Tweet

DI

Ditulis oleh Data Informasi

Tim DataInformasi.web.id - Informasi Teknologi dan Data Terkini