Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, selamat datang di episode terakhir sesi Membangun Web. Website Kopi Senja sudah lengkap, tetapi masih tersimpan di laptop Raka, belum bisa dibuka pelanggan. Di episode ini kita memeriksa kesiapan website, menerbitkannya secara gratis, mengujinya di HP sungguhan, dan belajar cara memperbaruinya dengan aman.
Langkah 1: Apa artinya menerbitkan website
Saat ini website Kopi Senja hanya ada di laptop Raka. Menerbitkan artinya menyalin file website ke server, yaitu komputer yang selalu menyala dan terhubung ke internet. Tempat menitipkan website itu disebut hosting. Website Kopi Senja hanya berisi file halaman, gaya, script, dan gambar. Website seperti ini disebut website statis, dan bisa diterbitkan gratis di layanan hosting statis seperti GitHub Pages atau Netlify. Ada dua pilihan alamat. Alamat bawaan layanan berupa nama kita ditambah nama layanan hosting di belakangnya. Domain sendiri berupa nama yang lebih pendek dan khas, misalnya kopi senja titik id. Alamat bawaan gratis. Domain sendiri berbayar per tahun, dan harganya berbeda-beda, jadi cek langsung di penyedia domain. Saran untuk Laras: mulai sekarang dengan alamat bawaan yang gratis. Domain sendiri bisa ditambahkan nanti tanpa membangun ulang website.
Langkah 2: Cek kesiapan sebelum tayang
Sebelum tayang, Raka meminta pemeriksaan menyeluruh: tautan, salah ketik, harga, judul dan deskripsi halaman, data pribadi, serta file yang tidak boleh ikut tayang. Seperti biasa, laporkan dulu. Claude membaca ketiga file website dari awal sampai akhir. Lalu Claude mencari pola nomor HP, email, dan kata sandi di semua file. Hasilnya bersih. Nomor pelanggan yang dulu ada di testimoni sudah kita hapus di sesi sebelumnya. Laporannya: tautan, ejaan, harga, dan data pribadi aman. Dua hal belum siap: deskripsi halaman untuk Google belum ada, dan file internal seperti CLAUDE.md, folder bahan, serta catatan nama foto lama sebaiknya tidak ikut tayang. Raka meminta dua perbaikan: tambahkan judul dan deskripsi halaman, lalu siapkan folder bernama terbit yang hanya berisi file website. Lihat kotak perubahannya. Judul lama yang masih bawaan, yaitu Document, diganti judul yang jelas. Judul ini tampil di tab browser dan di hasil pencarian Google. Di bawahnya ada deskripsi singkat berisi produk dan jam buka. Raka membaca deskripsinya, memastikan isinya sesuai fakta, lalu memilih Yes. Claude menyalin file halaman, gaya, script, dan folder gambar ke folder terbit, setelah Raka menyetujui kotak izinnya. CLAUDE.md, folder bahan, dan catatan internal tetap di laptop. Folder terbit inilah yang akan diunggah. Supaya mudah diingat, bagi file menjadi tiga kelompok. Yang ikut tayang hanya file yang dibutuhkan pengunjung: halaman, gaya, script, dan gambar. Yang tetap di laptop adalah file kerja: CLAUDE.md, folder bahan berisi foto asli, dan catatan internal. Pengunjung tidak membutuhkannya. Dan ada yang tidak pernah boleh berada di folder proyek: kata sandi, data rekening, dan data pelanggan. Bila tidak pernah ada di folder, tidak mungkin ikut terunggah.
Langkah 3: Menerbitkan di hosting statis gratis
Ada beberapa layanan hosting statis gratis, misalnya GitHub Pages dan Netlify. Cara memilihnya: pertama, baca ketentuan paket gratisnya di halaman resmi, karena batas pemakaian bisa berubah. Kedua, pilih cara unggah yang paling nyaman. Ada yang cukup lewat halaman web, ada yang lewat git. Claude Code bisa membantu bagian git di terminal. Ketiga, pastikan panduan resminya mudah diikuti, karena Anda akan sering membukanya saat memperbarui website. Inilah garis besar menerbitkan di layanan hosting statis. Pertama, buat akun di layanan pilihan Anda. Lakukan sendiri di browser, dan jangan pernah memberikan kata sandi akun kepada Claude. Kedua, buat proyek baru. Di sebagian layanan namanya repositori, yaitu tempat menyimpan file proyek beserta riwayat versinya. Ketiga, unggah folder terbit. Ada layanan yang menerima folder lewat halaman web, ada juga yang mengambil file lewat git. Keempat, tunggu sampai alamat website aktif. Langkah persisnya berbeda antar layanan dan sering berubah, jadi selalu buka panduan resmi layanan yang Anda pilih. Raka memilih GitHub Pages. Ia sudah membuat akun dan repositori bernama kopi senja sendiri di browser. Lalu ia meminta Claude menjelaskan langkah berikutnya, dan meminta Claude jujur bila ada bagian yang bisa berubah. Claude membagi tugas dengan jelas. Bagian terminal, yaitu mengirim isi folder terbit dengan git, bisa ia bantu. Bagian pengaturan di situs GitHub dilakukan Raka sendiri, mengikuti panduan resmi karena menunya bisa berubah. Claude menyiapkan perintah git untuk mengirim isi folder terbit ke repositori. Perhatikan kotak izinnya: file akan dikirim ke repositori online yang bisa dilihat publik. Inilah kotak izin yang paling penting dibaca di seluruh proyek. Karena folder terbit sudah bersih dari file internal, Raka memilih Yes. File terkirim. Claude memberi langkah terakhir yang dilakukan di situs GitHub: buka pengaturan Pages, pilih sumbernya, lalu simpan. Bila menu di layar Anda berbeda, ikuti panduan resminya.
Langkah 4: Tayang dan uji di HP sungguhan
Beberapa menit kemudian, alamat website aktif. Raka membukanya di HP sungguhan, sengaja memakai data seluler, bukan Wi-Fi. Halaman terbuka cepat, berkat foto yang sudah diperkecil. Foto, menu, dan penanda buka tampil benar. Ada juga gembok kecil di samping alamat, tanda koneksi aman yang biasanya disediakan layanan hosting. Raka mencoba formulir dengan pesanan kecil. Total dan ongkir benar, dan WhatsApp terbuka dengan pesan terisi. Ia membatalkan pengiriman karena hanya menguji. Terakhir, menu garis tiga dibuka dan ditutup. Semua lolos. Website Kopi Senja resmi tayang. Raka mengirim alamat website ke Laras dan memintanya mencoba dari HP, termasuk formulir pesanan. Laras senang. Ia mencoba memesan, dan pesanannya langsung masuk ke WhatsApp toko. Alamat website itu segera ia pasang di bio Instagram dan profil WhatsApp Business, tempat pelanggan paling sering datang.
Langkah 5: Memperbarui website dengan aman
Website yang sudah tayang akan terus berubah: harga naik, menu baru, atau promo musiman. Siklusnya selalu sama. Pertama, ubah di laptop bersama Claude Code, dan perbarui CLAUDE.md bila datanya berubah. Kedua, cek dulu di browser dan mode HP dengan daftar periksa yang sudah kita punya. Ketiga, simpan versi dengan catatan yang jelas, supaya mudah kembali bila ada yang keliru. Keempat, terbitkan ulang dengan cara yang sama, lalu uji sekali lagi di HP. Jangan pernah melewati langkah cek, karena kesalahan di website tayang langsung dilihat pelanggan. Contohnya, Laras ingin pita promo hampers akhir pekan dengan gratis ongkir dalam kota. Raka menulis satu perintah yang mengikuti siklus tadi: tambahkan, cek di mode HP, simpan versi, lalu terbitkan ulang. Claude mengerjakan dan melaporkan tiga poin: pita promo ditambahkan, sudah dicek di laptop dan di lebar HP, dan versi disimpan dengan catatan yang jelas. Raka tetap membuka halaman di laptop untuk melihatnya sendiri. Kotak izin untuk mengirim ke repositori online muncul lagi. Raka membacanya dengan teliti seperti pertama kali, lalu memilih Yes. Beberapa menit kemudian pita promo tampil di website. Raka membukanya di HP sebagai pemeriksaan terakhir. Memperbarui website kini semudah memberi satu perintah yang jelas. Mari lihat hasil sesi ini. Kita punya satu website usaha yang tayang online dan bisa dibuka siapa saja. Website itu punya empat fitur: penanda buka atau tutup, tombol WhatsApp melayang, formulir pesanan, dan menu garis tiga di HP. Biaya hostingnya nol rupiah dengan layanan gratis. Ketentuan paket gratis bisa berubah, jadi cek halaman resmi layanan Anda. Dan semua itu dibangun tanpa mengetik kode sendiri. Tampilan di video ini simulasi; terapkan langkah yang sama untuk usaha Anda.
Selesai!
Sesi Membangun Web selesai. Kita memeriksa kesiapan website, memisahkan file internal, menerbitkannya di hosting statis gratis, menguji di HP sungguhan, dan memahami siklus memperbarui. Di episode berikutnya kita masuk sesi Otomasi dengan Claude Code, dimulai dengan merapikan ratusan file sekaligus untuk pekerjaan berulang. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Minta Claude memeriksa kesiapan website Anda sebelum tayang
Pilih satu layanan hosting statis gratis dan ikuti panduan resminya sampai tayang
Buka website Anda di HP sungguhan dan jalankan daftar periksa
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.282 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
