Selalu ada yang pertama kali. bahasa pertamamu. Skrip pertama Anda. Situs web pertama Anda.

Tidak hanya pengembang saja yang bisa memiliki situs web.Dengan pengetahuan yang benar, siapa pun bisa melakukannya!

Jadi…bagaimana sebenarnya cara memulainya?

Dalam ekosistem alat dan layanan saat ini, membuat situs web unik milik Anda bukan lagi tugas yang tidak dapat diatasi seperti beberapa dekade yang lalu. Anda tidak perlu memiliki rak server (atau laptop) Anda sendiri yang berjalan terus-menerus di sudut ruangan Anda untuk menghosting situs web/portofolio online Anda sendiri.

Faktanya, membuka situs bisa jadi cukup mudah, dengan atau tanpa domain kustom Anda sendiri, yang didukung dengan HTTPS saat bepergian. Semua ini dapat dilakukan dalam waktu satu jam, seperti yang akan saya tunjukkan pada langkah-langkah berikut.

Ada banyak alat hosting gratis dan populer untuk situs web statis — Google Cloud, Heroku — hanyalah beberapa di antaranya. Dalam langkah-langkah berikut, saya akan mendemonstrasikannya dengan GitHub, menggunakan Halaman GitHub, untuk mengaktifkan situs pertama Anda.

Langkah 1: Pilih lingkungan Anda

Perkiraan Waktu: T/A, Kesulitan: Rendah, Biaya: $0

Meskipun dimungkinkan untuk menggunakan file HTML murni untuk situs Anda dan tidak menggunakannya, saya tidak akan merekomendasikannya karena proyek dapat menjadi sulit untuk ditangani seiring bertambahnya ukuran. Pertama, kode yang dapat digunakan kembali, seperti sebagian konten HTML, tidak mungkin dilakukan. Anda mungkin juga akan melakukan hardcoding pada beberapa file HTML, sehingga menyulitkan pemeliharaan situs Anda dalam jangka panjang.

Yang kami inginkan di sini adalah kerangka kerja frontend yang dipadukan dengan alat pembuatan situs statis. Untungnya, ada beberapa kerangka kerja berguna di luar sana yang sudah memenuhi tujuan ini.

Salah satu framework frontend dengan generator situs statis yang cukup sering saya gunakan untuk Halaman GitHub adalah Middleman. Kerangka kerja ini menyediakan banyak fitur berbeda yang mungkin familiar bagi pengembang Rails, seperti “tata letak” dan “sebagian”. Salah satu nilai jual lainnya adalah ia mendukung bootstrap untuk situs statis dengan fungsi blogging (di mana postingan disimpan dalam file penurunan harga individual), tanpa memerlukan seluruh UI editor dan database untuk blogging dengan biaya hosting tambahan. Masukkan middleman-gh-pages, dan mendapatkan aplikasi Middleman di Halaman GitHub sangatlah mudah.

Tentu saja, Perantara bukanlah satu-satunya pilihan. Jika Anda seorang pengembang frontend yang bercita-cita tinggi dan mungkin pernah mencoba JavaScript dan React sebelumnya, kerangka kerja frontend yang bekerja dengan komponen React mungkin merupakan sesuatu yang lebih sesuai untuk Anda! Di atas, saya telah membuat Templat dan alat Next.js untuk Halaman GitHub, yang dapat langsung digunakan untuk membuat situs Anda sendiri!

Setelah Anda memilih lingkungan yang diinginkan, kita dapat melanjutkan ke langkah berikutnya.

Langkah 2: Buat repositori Anda

Perkiraan Waktu: 2 menit, Kesulitan: Rendah, Biaya: $0

Lanjut ke langkah 2, kita hanya perlu membuat repositori di GitHub.

Langkah ini cukup sederhana, pastikan Anda membuka github.com/new, dan menetapkan nama repositori sebagai <username|organisation>.github.io .

Jika Anda telah memilih template Next.js dari langkah 1, Anda cukup mereferensikan repositori bercabang di sini sebagai template, yang akan sangat menyederhanakan langkah 3.

Langkah 3: Siapkan lingkungan Anda, masukkan kode default

Perkiraan Waktu: 5–10 menit, Kesulitan: Sedang, Biaya: $0

Setelah repositori dibuat, Anda akan melihat serangkaian instruksi untuk mendorong penerapan pertama Anda.

Daripada hanya memasukkan file readme, Anda dapat memilih untuk mengatur lingkungan Anda dan memasukkan kode sumber boilerplate. Jangan khawatir, kami dapat mengubah konten default nanti, namun kami ingin melakukan langkah ini dengan perubahan sesedikit mungkin, sehingga kami dapat memverifikasi bahwa konten yang dihosting dan alur kerja berfungsi, sebelum mengubah konten situs.

Langkah 4: Bangun dan publikasikan situs Anda!

Perkiraan Waktu: 5 menit, Kesulitan: Sedang, Biaya: $0

Setelah Anda menerapkan penerapan untuk lingkungan Anda, cukup jalankan perintah untuk membangun dan menerapkan situs Anda!

Jika Anda menggunakan Middleman, saya sangat menyarankan untuk menambahkan skrip berikut di direktori root kode sumber Anda (untuk lingkungan Unix), dan memanggil ./publish setiap kali Anda ingin memperbarui file statis situs web Anda. Skrip ini membersihkan file build Anda dari build sebelumnya selama setiap proses build baru, untuk menyelesaikan masalah Git ini.

Jika Anda menggunakan spa-github-page-template, cukup jalankan perintah berikut di terminal Anda:

npm run publish

Dan biola! Semua file dan aset untuk situs statis Anda harus dibuat pada saat ini, dan dikirim ke cabang gh-pages repositori Anda.

Langkah 5: Konfigurasikan Halaman GitHub

Perkiraan Waktu: 3 menit, Kesulitan: Rendah, Biaya: $0

Langkah mudah lainnya. Setelah situs statis Anda dipublikasikan ke cabang gh-pages, cukup atur pengaturan cabang Halaman GitHub di Settings > Options repositori Anda (gulir sepenuhnya ke bawah), dan klik simpan.

Pada titik ini, situs Anda seharusnya sudah aktif di <username|organisation>.github.io (beri waktu beberapa menit jika belum muncul). Jika situs secara konsisten mengembalikan 404, pastikan Anda memverifikasi pengaturan pada tangkapan layar di atas, serta memeriksa cabang gh-pages dan memastikan bahwa ada file index.html yang valid di direktori akar.

(Opsional) Langkah 6: Tambahkan domain khusus Anda

Perkiraan Waktu: ~10 menit, Kesulitan: Tinggi, Biaya: Bervariasi, bergantung pada biaya domain

Katakanlah Anda ingin melampaui domain default GitHub github.io, Anda dapat membeli domain Anda sendiri dan mendukungnya dari halaman GitHub.

Untuk melakukan itu, Anda harus membeli domain terlebih dahulu. Gunakan registrar DNS seperti Namecheap atau sejenisnya untuk membeli domain pilihan Anda. Setelah dibeli, tambahkan data CNAME berikut, dengan Host ditetapkan sebagai subdomain yang Anda inginkan (kecuali “@”, yang merupakan karakter khusus tanpa subdomain) di menu pengelolaan domain.

Pada gambar berikut, situs saya big-on.dev diarahkan ke big-on-dev.github.io . Jika saya memutuskan untuk menggunakan www.big-on.dev, saya perlu mengubah nilai Host menjadi www.

Selanjutnya, tambahkan file CNAME ke kode sumber Anda. Pastikan file ini disalin ke direktori build dan gh-pages sebagai bagian dari proses build Anda:

Setelah aset ini disiapkan, Anda dapat membuka Settings > Options di repositori Anda, dan domain khusus harus ditetapkan. Jika Anda melihat bilah pemuatan, tunggu sebentar hingga penyiapan selesai. Setelah selesai, Anda dapat memilih opsi Enforce HTTPS jika Anda mau.

Kunjungi situs Anda lagi di domain khusus Anda sendiri, dan Anda akan melihat konten yang dihosting di Halaman GitHub!

Situs web pertama Anda sudah aktif!

Hei, jadi situsmu sudah aktif! Secara keseluruhan, jika Anda menggunakan domain GitHub Pages sendiri, Anda tidak perlu membayar apa pun, bahkan untuk biaya hosting. Keren sekali!

Total waktu diperkirakan sekitar 30 menit jika memperhitungkan penyiapan domain khusus. Mari kalikan waktu dengan dua sebagai buffer tambahan, dan waktu tersebut masih harus memenuhi persyaratan waktu 1 jam!

Membuat situs web Anda sendiri untuk pertama kalinya bisa menjadi tugas yang sangat menakutkan. Namun, setelah Anda melewati pencapaian ini, akan lebih mudah untuk menjelajahi alat lain seperti Cloud Run dan App Engine di Google Cloud untuk membuat lebih dari sekadar situs statis. Jika Anda suka bertualang, jelajahi penambahan Google Analytics, dan Alat Search Console ke laman Anda. Langkah-langkah untuk menambahkan alat-alat ini cukup sederhana, namun mempelajari cara menggunakannya dapat menjadi nilai tambah yang besar untuk mengeksplorasi lebih jauh pengembangan web, seperti konsep SEO.

Yang terakhir namun tidak kalah pentingnya, situs Anda mungkin sudah aktif, namun mendapatkan beberapa desain situs yang keren juga bisa menjadi tugas yang sulit. Jika demikian, tidak perlu mencari lagi — ada banyak templat gratis, beberapa di antaranya hanya memerlukan atribusi untuk menggunakan karya mereka. Html5 UP adalah salah satu favorit saya — tidak diperlukan pendaftaran atau informasi tambahan untuk mendapatkan akses ke templat dasar. Anda dapat menggunakan templat ini sebagai titik awal, dan memodifikasi gaya seperlunya.

Bagaimanapun, saya harap Anda menikmati panduan singkat ini tentang cara mengaktifkan situs Anda sendiri!

Ciao~