🧑‍💻 Bagaimana Saya Membuat Situs Web dengan Codex

Saya terus berbagi kabar tentang bagaimana pembelajaran AI saya berlangsung.

Minggu lalu saya serius mendalami vibecoding. Untuk praktik, saya memilih tugas nyata — membuat landing page untuk layanan konsultasi saya.

Sebelumnya saya punya halaman di Taplink, tetapi saya tidak puas dengan desain, fungsionalitas, dan biaya bulanan. Jadi saya memutuskan untuk membuat situs web sendiri menggunakan Codex dari OpenAI.

Mengapa Codex? Menurut saya, untuk tugas seperti ini ia hampir tidak kalah dengan Claude, tetapi lebih murah dari $20 per bulan.

🙈 Proses Langkah demi Langkah untuk Pemula

1️⃣ Saya menemukan situs web yang saya sukai dari segi struktur dan desain.

2️⃣ Saya menyiapkan teks, foto, dan tautan. Saya memberikan semuanya kepada Codex beserta referensi.

3️⃣ Sekitar 15 menit kemudian, saya mendapatkan versi pertama situs yang sudah bisa dipublikasikan.

4️⃣ Kemudian saya menyempurnakannya melalui obrolan: mengubah teks dan judul, menghapus blok yang tidak perlu, menyesuaikan desain.

5️⃣ Saya meminta untuk mengadaptasi tata letak untuk komputer, tablet, dan ponsel pintar.

6️⃣ Saya membuat repositori di GitHub dan mengunggah proyek ke sana. Setelah otorisasi, Codex dapat melakukannya sendiri.

7️⃣ Saya mendaftar di Vercel, menghubungkan GitHub, dan mengimpor proyek. Sekarang setiap kali kode diubah, situs web diperbarui secara otomatis.

8️⃣ Saya membeli domain di Beget. Dalam kasus saya, harganya lebih murah daripada di Reg.ru.

9️⃣ Saya menghubungkan domain ke Vercel dan mengonfigurasi catatan DNS yang menghubungkan domain dengan hosting.
Setelah beberapa saat, situs web menjadi dapat diakses di internet.
Sebelum dipublikasikan, ada baiknya juga memeriksa:
— versi seluler;
— tombol dan tautan;
— formulir kontak;
— keakuratan teks;
— kerja HTTPS.

🚀 Tingkat Lanjutan

🔟 Saya memeriksa situs melalui Page Speed Insight dan menerima laporan tentang kecepatan muat.

1️⃣1️⃣ Saya memberikan rekomendasi kepada Codex. Ia mengoptimalkan kode, gambar, dan pemuatan halaman. Setelah itu, situs menjadi jauh lebih cepat dibuka di ponsel lama.

1️⃣2️⃣ Saya meminta untuk melakukan optimasi SEO dasar:
— mengatur judul dan deskripsi halaman;
— meningkatkan struktur teks;
— menambahkan deskripsi gambar;
— membuat robots.txt;
— membuat peta situs.

Selain itu, ada baiknya menghubungkan analitik, Google Search Console, dan mengirim peta situs untuk diindeks.

Pertama kali, seluruh proses memakan waktu sekitar 8 jam.
Perubahan apa pun di situs yang sudah jadi memakan waktu 1–5 menit. Bahkan jika saya memutuskan untuk mengubah desain sepenuhnya, cukup menjelaskan tugas di obrolan. Codex akan memperbarui kode, dan Vercel akan secara otomatis memublikasikan versi baru.

Hasilnya bisa dilihat pada gambar di atas ☝️ Font dan ikon dipilih sendiri oleh Codex.

Ingin mengikuti jalur ini — saya merekomendasikan kursus vibecoding. Di sana semuanya sama, tetapi dengan instruksi video yang detail:
👉 [tautan ke kursus]

🎁 Diskon 10% dengan kode promo: IRESHEV