Pengalaman Membuat Website dengan Codex dan Hosting Gratis di Cloudflare
Sudah lama juga nih tidak update artikel soal website. Kali ini saya mau cerita sedikit mengenai pengalaman saya membuat website menggunakan Codex dari ChatGPT.
Website yang saya buat adalah website katalog untuk Biji Kopi Boanerges, salah satu supplier green bean Indonesia yang berada di Surabaya. Saya sempat membuat website untuk ini sebelumnya menggunakan ChatGPT saja, hanya tampilannya ingin diperbarui agar lebih modern dan informasi produknya lebih lengkap.
Hasil website yang sudah dibuat bisa langsung dilihat di:
https://bijikopiboanerges.com/
Menariknya, sebagian besar proses pembuatan website ini saya lakukan dengan cara ngobrol dan memberikan instruksi kepada Codex. Mulai dari melihat website lama, membaca data produk, memilih foto, membuat desain, sampai akhirnya website bisa online menggunakan hosting gratis dari Cloudflare.
Kalau biasanya membuat website perlu banyak mengurus coding sendiri, kali ini saya lebih banyak menjelaskan hasil seperti apa yang saya inginkan. Codex yang membantu menyesuaikan bagian teknisnya.
Nah, buat yang penasaran bagaimana cara membuat website menggunakan Codex, berikut saya coba bagikan pengalaman saya.
Apa itu Codex?
Codex merupakan agen pemrograman dari OpenAI yang tersedia melalui ChatGPT. Codex dapat membaca dan mengubah file proyek yang ada di komputer kita.
Jadi berbeda dengan menggunakan ChatGPT yang hanya memberikan contoh potongan kode untuk kita copy, Codex bisa langsung membantu mengerjakan website di dalam folder proyeknya.
Misalnya kita sudah mempunyai website lama, Codex dapat melihat isi website tersebut terlebih dahulu. Setelah itu kita bisa meminta Codex untuk memperbaiki desain, menambahkan halaman baru, mengganti gambar, ataupun membuat ulang website dengan konsep yang berbeda.
Dalam website Biji Kopi Boanerges ini, Codex membantu saya membuat beberapa hal seperti:
- Membuat ulang tampilan website lama.
- Menyesuaikan warna website dengan logo perusahaan.
- Memilih foto yang cocok untuk setiap bagian.
- Membuat katalog green bean dalam Bahasa Indonesia dan Inggris.
- Menambahkan tombol Instagram, TikTok dan WhatsApp.
- Membuat tampilan website agar nyaman dibuka melalui handphone.
- Menambahkan informasi pengiriman lokal, domestik dan internasional.
- Membantu memasukkan website ke GitHub dan Cloudflare.
Sebetulnya Codex juga melakukan banyak pengaturan teknis di belakangnya. Tapi berhubung kita mau fokus membuat website secara praktis, bagian teknis tersebut bisa disesuaikan sendiri oleh Codex berdasarkan proyek yang sedang digunakan.
Apakah Membuat Website dengan Codex Harus Bisa Coding?
Pertanyaan ini mungkin akan banyak ditanyakan oleh orang yang ingin mencoba Codex.
Menurut saya, memiliki pengetahuan coding tentunya akan membantu. Terutama kalau ada bagian yang ingin kita ubah lebih detail atau ketika ingin memahami apa saja yang sedang dikerjakan oleh Codex.
Tapi apakah harus jago coding terlebih dahulu? Menurut saya tidak juga.
Hal yang paling penting justru kita harus bisa menjelaskan website seperti apa yang ingin dibuat. Kita perlu tahu tujuan websitenya, siapa yang akan membukanya, informasi apa yang mau ditampilkan dan tindakan apa yang kita harapkan dari pengunjung.
Contohnya untuk website Biji Kopi Boanerges, tujuan utamanya bukan untuk melakukan transaksi langsung seperti di marketplace. Website ini lebih ditujukan sebagai katalog produk.
Calon pembeli bisa melihat jenis green bean yang tersedia, membaca informasi singkat mengenai produknya, lalu menghubungi pihak Biji Kopi Boanerges melalui WhatsApp.
Dengan menjelaskan tujuan seperti ini, Codex bisa menyesuaikan bentuk website yang dibuat. Tentunya akan berbeda kalau kita hanya mengatakan, “Tolong buat website kopi yang bagus.”
Siapkan Foto dan Informasi Bisnis
Sebelum mulai membuat website, saya mengumpulkan seluruh aset yang sudah dimiliki terlebih dahulu. Ada logo, foto kopi, foto kebun, foto petani, company profile dan juga spreadsheet yang berisi daftar produk.
Semua file tersebut saya masukkan ke dalam satu folder agar lebih mudah dibaca oleh Codex.
Hal ini cukup penting karena Codex tidak mengetahui kondisi bisnis kita secara otomatis. Kalau informasi yang kita berikan kurang lengkap, bisa saja Codex mencoba membuat tulisan tambahan yang ternyata tidak sesuai dengan kondisi sebenarnya.
Misalnya mengenai sertifikasi, kemampuan ekspor, harga ataupun ketersediaan stok. Jangan sampai website menampilkan informasi yang terlihat bagus tapi ternyata belum benar.
Untuk itu saya memberikan instruksi kurang lebih seperti ini:
Gunakan company profile dan spreadsheet produk sebagai sumber informasi.
Jangan menambahkan sertifikasi atau klaim yang tidak ada di dalam dokumen.
Kalau ada informasi yang belum jelas, tanyakan terlebih dahulu.Setelah itu, saya juga menjelaskan fungsi dari beberapa foto yang tersedia. Logo digunakan sebagai referensi warna, foto landscape digunakan untuk bagian awal website, sedangkan foto-foto produk digunakan untuk katalog.
Codex memang dapat membantu memilih dan menempatkan gambarnya. Namun kita tetap perlu memastikan foto tersebut memang boleh digunakan di dalam website ya.
Jelaskan Desain Website yang Diinginkan
Setelah asetnya siap, selanjutnya saya mulai menjelaskan tampilan website yang saya inginkan.
Biji Kopi Boanerges memiliki logo dengan warna hitam, putih dan cream. Oleh karena itu, saya meminta agar warna website mengikuti identitas dari logo tersebut.
Saya juga tidak ingin websitenya terlihat seperti template toko online yang biasa kita temukan. Tampilannya ingin dibuat lebih modern, sedikit editorial, tapi tetap sederhana dan mudah dibaca.
Kurang lebih instruksi awalnya seperti ini:
Saya ingin membuat website katalog untuk supplier green bean kopi.
Gunakan warna hitam, putih dan cream dari logo.
Tampilannya modern dan tidak seperti template online shop.
Website harus nyaman dibuka di handphone.
Gunakan foto yang sudah tersedia dan tambahkan animasi ringan agar website tidak terlihat terlalu diam.
Website dibuat dalam Bahasa Indonesia dan Inggris.
Arahkan calon pembeli untuk menghubungi WhatsApp.Dari instruksi tersebut, Codex mulai membuat struktur dan tampilan awal websitenya.
Tentunya hasil pertama belum langsung sesuai sepenuhnya. Ada beberapa bagian yang sudah terlihat bagus, tapi ada juga bagian yang masih perlu diganti.
Nah, proses selanjutnya memang lebih banyak melihat hasil dan memberikan koreksi satu per satu.
Melihat Hasil Website dari Komputer
Salah satu hal yang cukup membantu adalah Codex bisa menjalankan website tersebut di komputer kita sendiri.
Saya tinggal meminta:
Jalankan websitenya agar saya bisa melihat hasilnya di browser.Setelah itu Codex akan memberikan alamat localhost yang bisa dibuka melalui browser. Dari sana saya bisa melihat tampilan website sebelum website tersebut benar-benar dipublikasikan ke Internet.
Cara ini membuat proses revisinya cukup enak. Saya tinggal membuka website, melihat bagian yang kurang sesuai, lalu menjelaskan bagian mana yang ingin diubah.
Misalnya pada bagian awal website, sempat muncul gambar terlebih dahulu lalu gambarnya menghilang setelah halaman selesai dibuka. Saya tinggal menjelaskan bahwa background gambarnya sebenarnya sudah bagus, tapi jangan sampai menghilang dan harus dibuat penuh selebar layar.
Ada juga bagian tulisan yang terlalu kecil, posisi foto yang terpotong, jarak tulisan yang kurang sesuai dan tampilan halaman yang terasa terlalu mirip dengan homepage.
Feedback seperti itu bisa langsung diberikan menggunakan bahasa sehari-hari. Tidak harus menjelaskan nama kode atau file yang perlu diubah karena Codex dapat mencari sendiri bagian tersebut.
Yang penting, feedback-nya cukup jelas.
Daripada hanya mengatakan:
Saya kurang suka. Tolong dibuat lebih bagus.Lebih baik kita menjelaskan bagian yang kurang disukai dan hasil yang diinginkan. Misalnya:
Halaman ini terlalu mirip dengan homepage.
Saya ingin halaman ini lebih fokus menjelaskan pengiriman lokal Surabaya, pengiriman antarkota dan pengiriman internasional.
Tambahkan ilustrasi rute yang sederhana dan jangan sampai membuat tampilan handphone terlalu ramai.Dengan feedback seperti ini, Codex menjadi lebih mudah untuk memahami perubahan yang kita inginkan.
Membuat Website dalam Bahasa Indonesia dan Inggris
Biji Kopi Boanerges ingin menjangkau pembeli Indonesia dan juga calon pembeli dari luar negeri. Untuk itu, website dibuat dalam dua bahasa.
Bahasa Indonesia digunakan sebagai bahasa utama. Sedangkan pengunjung internasional dapat membuka versi Bahasa Inggris melalui halaman /en.
Saya sempat meminta Codex untuk menerjemahkan isi website ke Bahasa Inggris. Namun hasil terjemahannya tetap perlu dibaca kembali.
Terutama untuk nama produk, istilah kopi, wilayah asal dan informasi bisnis lainnya. Jangan sampai hasil terjemahannya memang benar secara bahasa tapi malah berbeda arti dengan informasi produk yang sebenarnya.
Selain itu, tombol WhatsApp untuk pengunjung Indonesia dan internasional juga dibuat berbeda. Dengan demikian, pesan yang dibawa saat calon pembeli membuka WhatsApp dapat disesuaikan dengan bahasa halaman yang sedang mereka gunakan.
Menggunakan GitHub dan Hosting Gratis Cloudflare
Setelah tampilan websitenya sudah sesuai, selanjutnya website perlu dipublikasikan agar bisa dibuka oleh orang lain.
Untuk menyimpan kode website, saya menggunakan GitHub. Sedangkan hosting-nya menggunakan Cloudflare.
GitHub sendiri dapat digunakan secara gratis. Cloudflare juga menyediakan layanan hosting yang bisa digunakan secara gratis untuk website seperti ini.
Saya cukup membuat repository di GitHub, lalu meminta Codex untuk mengirimkan proyek website tersebut ke repository yang sudah dibuat.
Kurang lebih instruksinya sederhana saja:
Masukkan website ini ke repository GitHub yang sudah saya siapkan.
Pastikan hanya file website yang diperlukan saja yang dimasukkan.Setelah website masuk ke GitHub, repository tersebut dapat dihubungkan ke Cloudflare melalui menu Workers & Pages.
Kita tinggal memilih repository dan branch yang akan digunakan. Untuk pengaturan lainnya seperti perintah build dan folder hasil website, kita bisa meminta Codex melihat proyeknya dan memberitahukan pengaturan yang perlu dimasukkan.
Setelah prosesnya selesai, Cloudflare akan memberikan alamat website dengan akhiran pages.dev.
Yup! Sampai tahap ini sebetulnya website kita sudah online dan bisa dibuka oleh orang lain.
Kalau sudah mempunyai domain sendiri, domain tersebut bisa dihubungkan melalui pengaturan custom domain di Cloudflare.
Apakah Hosting-nya Benar-benar Gratis?
Untuk website Biji Kopi Boanerges ini, hosting-nya dapat menggunakan paket gratis Cloudflare. GitHub yang digunakan untuk menyimpan kode website juga dapat menggunakan paket gratis.
Namun perlu diperhatikan kalau nama domain biasanya tetap berbayar. Domain seperti bijikopiboanerges.com perlu dibeli dan diperpanjang setiap tahun.
Jadi apabila belum mempunyai domain, kita bisa menggunakan alamat gratis dari Cloudflare terlebih dahulu. Nantinya kalau sudah siap menggunakan alamat yang lebih profesional, barulah membeli dan memasang domain sendiri.
Batasan dan ketentuan paket gratis Cloudflare tentunya bisa berubah sewaktu-waktu. Jadi tetap lihat informasi terbaru dari Cloudflare sebelum menggunakannya.
Apakah Codex Gratis?
Pada saat membuat website ini, saya kebetulan mendapatkan promo atau trial ChatGPT selama satu bulan. Dari promo tersebut saya bisa menggunakan Codex untuk membantu mengembangkan website.
Apakah semua orang akan mendapatkan promo yang sama? Belum tentu juga.
Promo yang tersedia bisa berbeda untuk setiap akun dan dapat berubah sewaktu-waktu. Codex sendiri tersedia pada beberapa paket ChatGPT yang memenuhi syarat.
Saat artikel ini ditulis, ChatGPT Plus memiliki harga sekitar US$20 per bulan atau kurang lebih Rp300.000–Rp350.000, tergantung kurs dan pajak yang berlaku.
Untuk informasi harga terbaru, kamu bisa langsung melihat:
https://openai.com/chatgpt/pricing
Kalau ingin mencoba, tidak ada salahnya memeriksa terlebih dahulu apakah akun ChatGPT yang digunakan sudah mendapatkan akses Codex atau mungkin sedang mendapatkan penawaran trial.
Hal yang Tetap Perlu Kita Periksa
Walaupun Codex bisa membantu membuat hampir seluruh bagian website, bukan berarti kita tinggal menerima semua hasilnya begitu saja.
Kita tetap perlu membaca isi websitenya, memeriksa informasi produk, mencoba seluruh tombol dan melihat tampilannya melalui handphone.
Beberapa hal yang menurut saya penting untuk diperiksa adalah:
- Nama dan informasi produk.
- Nomor WhatsApp dan akun sosial media.
- Foto yang digunakan.
- Alamat dan informasi perusahaan.
- Tampilan website melalui handphone.
- Isi halaman Bahasa Inggris.
Codex dapat membantu proses pembuatannya menjadi jauh lebih cepat. Tapi keputusan mengenai informasi apa yang boleh ditampilkan tetap berada di tangan kita sebagai pemilik website.
Membuat Website Menjadi Lebih Mudah dengan Codex
Dulu membuat website cukup identik dengan harus belajar coding terlebih dahulu. Sekarang prosesnya mulai berubah karena kita dapat menjelaskan kebutuhan menggunakan bahasa sehari-hari, lalu Codex yang membantu mengerjakan bagian teknisnya.
Tentunya bukan berarti websitenya langsung sempurna hanya dengan satu perintah.
Saya sendiri memberikan banyak feedback selama proses pembuatannya. Mulai dari mengganti ukuran tulisan, mengubah gambar, memperbaiki jarak, memindahkan susunan konten, sampai menyesuaikan tampilan untuk handphone.
Tapi menurut saya disitulah bagian menariknya. Kita tidak harus selalu tahu file dan kode mana yang perlu diubah. Kita cukup melihat hasilnya, menjelaskan masalah yang ditemukan, lalu meminta Codex untuk menyesuaikannya.
Hasil akhir website yang saya buat bisa kamu lihat di:
website supplier green bean Biji Kopi Boanerges
Bagi kamu yang memiliki bisnis dan ingin membuat website sendiri, mungkin Codex bisa menjadi salah satu cara yang menarik untuk dicoba. Siapkan logo, foto dan informasi bisnismu, lalu mulai jelaskan website seperti apa yang kamu inginkan.
Kalau hasil pertamanya masih belum sesuai, jangan langsung menyerah. Berikan feedback sedikit demi sedikit sampai hasilnya mendekati website yang kamu bayangkan.
Semoga pengalaman saya membuat website dengan Codex ini bisa membantu teman-teman yang juga ingin membuat website bisnis sendiri ya.. :)
Catatan: Harga, promo dan fitur ChatGPT maupun Cloudflare dapat berubah sewaktu-waktu. Silahkan lihat website resminya untuk mendapatkan informasi terbaru.