Website Professional Gratis? Ini Cara Membuatnya!!

on

Cara Membuat Website Blog Profesional Tanpa Coding (Hanya dengan 4 Website)

Di era AI sekarang, membuat website blog yang modern, responsive, dan dilengkapi dark mode tidak lagi harus belajar coding dari nol. Cukup gunakan bantuan AI dan platform modern untuk membuatnya langsung online dalam hitungan menit.

Persiapan Sebelum Memulai

Pastikan kamu sudah memiliki akun di platform berikut:

  1. Google (untuk Gemini & Google AI Studio)

  2. GitHub

  3. Vercel

🛠 TUTORIAL UTAMA

Langkah Awal: Buat Kriteria Website

Sebelum mulai, buat catatan/kriteria lengkap mengenai tipe website yang ingin kamu buat. Tentukan fiturnya (misal: responsive, dark mode, animasi), halamannya (Home, About, Blog, Contact), serta contoh konten/isi di dalamnya.

Contoh:

1. Masuk ke Gemini (Menyusun Prompt)

  • Buka Gemini.

  • Gunakan Gemini untuk membantu menyusun prompt (perintah) yang detail dan profesional berdasarkan kriteria website yang sudah kamu catat agar hasil codingan AI nantinya lebih maksimal. Contoh:


2. Google AI Studio (Generate & Connect ke GitHub)

  • Buka Google AI Studio dan login dengan akun Google.

  • Pilih model Gemini terbaru, lalu Paste Prompt yang sudah dibuat tadi dan klik Generate. AI akan membuatkan seluruh struktur folder, komponen React, Tailwind CSS, hingga dekorasi desainnya.

  • Setelah project selesai, masuk ke Pengaturan > GitHub, lalu hubungkan akun GitHub kamu.

  • Klik Create Repository, isi nama repository (contoh: EDUKASI-IT), pilih visibilitas Public, lalu klik Create. Project akan otomatis masuk ke GitHub.

3. Vercel (Deploy ke Internet)

  • Buka Vercel.

  • Klik Add New Project, lalu pilih Sign in with GitHub (lakukan instalasi/pemberian izin jika diminta)

  • Cari repository website yang sudah kamu buat tadi, lalu klik Import.

  • Klik tombol Deploy dan tunggu prosesnya beberapa menit hingga selesai.

4. Website Online!

  • Vercel akan memberikan link domain gratis (contoh: https://nama-blogmu.vercel.app).

  • Sekarang website blog profesionalmu sudah live dan bisa diakses oleh siapa saja melalui web browser.

🔄 Cara Mengedit / Revisi Tampilan Blog

Jika di kemudian hari kamu ingin mengubah desain, mengganti warna, atau menambah artikel, kamu tidak perlu repot upload ulang secara manual. Cukup lakukan langkah ini:

  1. Masuk kembali ke Google AI Studio.

  2. Edit project atau tambahkan perintah revisi baru pada AI.

  3. Setelah selesai edit, masuk ke Pengaturan > GitHub > Stage and Commit.

  4. Selesai! GitHub akan otomatis ter-update dan Vercel akan langsung melakukan redeploy otomatis. Tampilan website-mu di browser akan langsung berubah seketika.

Comments

Post a Comment