Panduan Lengkap: Cara Membuat Website Sekolah Gratis Tanpa Hosting Menggunakan GitHub dan Vercel

Di era digital saat ini, memiliki website resmi bagi sebuah institusi pendidikan bukanlah lagi sebuah kemewahan, melainkan kebutuhan dasar. Website menjadi wajah utama sekolah di internet, pusat informasi bagi orang tua murid, hingga sarana promosi untuk Penerimaan Peserta Didik Baru (PPDB). Sayangnya, banyak pihak yang masih ragu untuk membangun website karena terhalang masalah teknis dan biaya sewa hosting tahunan yang lumayan menguras anggaran.

Namun, bagaimana jika Anda bisa membangun website sekolah secara gratis, aman, dan tanpa perlu memikirkan biaya server sama sekali?

Jawabannya adalah dengan memanfaatkan kombinasi GitHub dan Vercel. Melalui artikel ini, kita akan membahas langkah demi langkah cara men-deploy website sekolah Anda ke internet dalam hitungan menit, terinspirasi dari tutorial menarik di channel YouTube Suka Coding.

Persiapan Awal yang Dibutuhkan

Sebelum kita masuk ke langkah teknis, ada beberapa hal sederhana yang perlu Anda siapkan:

1. Akun GitHub: Platform ini akan kita gunakan untuk menyimpan kode sumber (source code) website secara aman.
2. Akun Vercel: Layanan cloud yang akan membaca kode dari GitHub dan membuatnya bisa diakses oleh publik (online).
3. Source Code Website: Jika Anda belum bisa membuat kode dari nol, Anda bisa menggunakan template HTML, CSS, dan JavaScript yang banyak tersedia secara gratis. Dalam tutorial aslinya, file ini disediakan dalam format ZIP yang dilindungi password (pastikan Anda menyimak videonya untuk mendapatkan kata sandinya).

Langkah 1: Ekstrak Source Code Website

Setelah Anda mengunduh file source code website sekolah, langkah pertama adalah mengekstrak file ZIP/RAR tersebut menggunakan password yang telah ditentukan. Di dalam folder hasil ekstraksi, Anda biasanya akan menemukan struktur file website standar, yang meliputi:

• index.html (Kerangka utama halaman website)
• style.css (File untuk mengatur desain dan tata letak)
• script.js (File untuk mengatur interaktivitas website)
• Folder image (Tempat menyimpan aset gambar dan logo)

Langkah 2: Simpan Kode di GitHub (Repository)

Agar website bisa dikelola dengan baik dan di-deploy ke server, kita harus mengunggah file-file tadi ke GitHub. Berikut caranya:

1. Buka situs github.com dan pastikan Anda sudah login.
2. Klik tombol New Repository untuk membuat ruang penyimpanan baru.
3. Beri nama repository Anda, misalnya website-sekolah. Anda bisa membiarkan pengaturan lainnya secara default.
4. Klik Create repository.
5. Di halaman repository yang masih kosong, klik menu Upload files.
6. Pilih atau drag-and-drop seluruh file dan folder website yang sudah Anda ekstrak tadi ke dalam GitHub.
7. Tunggu proses unggah selesai, gulir ke bagian bawah, dan klik Commit changes. Kini seluruh kode Anda sudah tersimpan dengan aman di cloud.

Langkah 3: Deploy Website Menggunakan Vercel

Sekarang adalah bagian yang paling menyenangkan: meng-online-kan website! Vercel adalah platform luar biasa yang sangat ramah bagi pemula.

1. Buka situs vercel.com dan login menggunakan akun GitHub Anda. Hal ini akan otomatis menghubungkan Vercel dengan repository yang baru saja kita buat.
2. Pada dashboard Vercel, klik tombol Add New Project.
3. Vercel akan menampilkan daftar repository GitHub Anda. Cari website-sekolah dan klik tombol Import.
4. Karena website ini berbasis HTML dasar, Anda tidak perlu repot mengubah pengaturan build. Langsung saja klik tombol Deploy.
5. Tunggu sekitar 30 detik hingga 1 menit. Jika berhasil, layar akan menampilkan animasi konfeti dan Vercel akan memberikan link atau URL publik untuk website sekolah Anda.

Selamat! Website sekolah Anda sekarang sudah online dan bisa diakses dari laptop, tablet, maupun smartphone.

Tips Ekstra: Kustomisasi Tampilan Agar Lebih Profesional

Template bawaan biasanya masih terlihat standar. Agar website sekolah Anda tampil lebih meyakinkan dan profesional, Anda bisa melakukan beberapa penyesuaian (editing) langsung pada file kodenya:

• Jadikan Landing Page Murni: Jika website ini hanya bertujuan sebagai profil dan pusat informasi publik, ada baiknya Anda menghapus tombol login admin atau dashboard yang tidak perlu. Pengunjung cukup disajikan halaman landing page yang informatif.
• Ganti Gambar Hero Section: Bagian paling atas website (hero section) adalah hal pertama yang dilihat pengunjung. Hindari menggunakan warna solid atau ornamen kosong. Ganti background di hero section dengan gambar asli anak-anak sekolah yang sedang belajar atau beraktivitas. Ini akan memberikan kesan yang hangat dan nyata.
• Standarisasi Tipografi: Font sangat memengaruhi tingkat keterbacaan dan estetika. Ubah font teks secara keseluruhan menggunakan jenis huruf yang bersih dan modern, seperti Plus Jakarta Sans, agar tampilannya konsisten dan terlihat jauh lebih premium.
• Rapatkan Area Footer: Sering kali template memiliki bagian footer yang terlalu lebar dan memakan banyak ruang kosong. Sesuaikan padding di CSS agar ukuran footer lebih dirapatkan lagi sehingga tata letaknya tidak terlalu besar dan terlihat lebih proporsional di layar.

Keunggulan menggunakan Vercel yang terhubung dengan GitHub adalah kemudahan update-nya. Kapan pun Anda melakukan perubahan pada kode (seperti mengganti font atau gambar tadi) dan menyimpannya di GitHub, Vercel akan secara otomatis memperbarui website Anda di internet tanpa perlu melakukan deploy ulang dari awal.

Membangun website sekolah kini sangatlah mudah, cepat, dan 100% gratis. Selamat mencoba dan berkreasi!

Berikut link untuk source code nya : https://shorturl.at/lLUpN