Ready, Set, Launch: Membuat Situs Statis Dengan Halaman GitHub

Dengan semua alat dan kerangka kerja pengembangan web yang populer saat ini, membuat situs web menjadi semakin rumit. Namun terkadang, Anda tidak memerlukan banyak interaktivitas di situs Anda. Jika Anda berfokus untuk menyampaikan info kepada pemirsa dan tidak memerlukan fungsionalitas yang rumit, situs statis mungkin merupakan pilihan yang tepat.

Dalam tutorial ini, Anda akan mempelajari apa itu situs statis, termasuk fasilitasnya, batasannya, dan cara membuat dan menerapkan situs web pribadi sederhana yang dibuat dengan HTML dan Bootstrap secara gratis menggunakan GitHub Pages.

Apa itu Halaman GitHub?

GitHub adalah platform berbasis web untuk menghosting repositori Git dan berkolaborasi dalam proyek perangkat lunak. Ini menawarkan alat untuk berbagi dan melacak perubahan kode, mengelola dan meninjau kode, dan kemampuan untuk membuka dan meninjau permintaan penarikan.

Jangan bingung Git dan GitHub! GitHub adalah layanan hosting yang memungkinkan kolaborasi antar pengembang, sedangkan Git adalah perangkat lunak kontrol versi lokal yang Anda gunakan untuk menyimpan snapshot dari status proyek perangkat lunak Anda.

Halaman GitHub adalah salah satu fitur terbaik dari GitHub. Ini adalah layanan yang memungkinkan Anda menghosting situs web statis langsung dari repositori GitHub. Ini berarti Anda dapat menggunakan repositori Anda untuk menyimpan kode dan file situs web Anda, dan GitHub akan menerbitkannya secara otomatis sebagai situs web yang dapat Anda akses secara online.

Singkatnya, GitHub Pages adalah cara cepat dan mudah untuk mengaktifkan dan menjalankan situs web Anda, dan ini sangat berguna untuk menampilkan portofolio, proyek sumber terbuka, atau konten statis lainnya.

Situs Web Statis vs Dinamis

Seperti yang telah kita lihat, Halaman GitHub menyediakan cara untuk menerapkan situs web statis. Namun apa perbedaan antara website statis dan website dinamis?

Mari kita mulai dengan membahas konten di situs tersebut.

Konten statis mengacu pada elemen situs web yang tetap sama untuk semua pengguna, terlepas dari siapa mereka atau tindakan apa yang mereka lakukan di situs tersebut. Ini dapat mencakup hal-hal seperti teks, gambar, dan tata letak situs web, serta kode dan file dasar yang membentuk situs tersebut. Situs statis dikirim ke pengguna persis seperti yang disimpan.

Sebaliknya, konten dinamis adalah konten yang berubah berdasarkan tindakan pengguna — seperti masuk, berinteraksi dengan paywall, atau mengomentari kiriman — atau faktor lain, seperti waktu atau lokasi saat ini.

Misalnya, website yang menampilkan gambar diam suatu produk akan selalu menampilkan gambar yang sama kepada setiap pengguna (statis). Sebaliknya, website yang menampilkan waktu saat ini akan menampilkan waktu yang berbeda kepada setiap pengguna berdasarkan lokasinya (dinamis).

Secara umum, sebuah website dapat dikatakan statis jika hanya berisi HTML, CSS, dan JavaScript di frontend, tanpa teknologi server seperti PHP atau Python yang berinteraksi dengan database.

Meskipun tidak mungkin membangun situs web dinamis menggunakan GitHub Pages, Anda dapat dengan mudah membangun situs web sendiri menggunakan CMS seperti WordPress, atau generator situs statis seperti Gatsby atau Hugo.

Fitur Utama Halaman GitHub

Mari kita lihat kekuatan Halaman GitHub sebagai layanan hosting:

1. Penyiapan dan penerbitan yang mudah: GitHub Pages memudahkan untuk memulai hanya dengan beberapa langkah sederhana. Anda dapat mengaktifkan Halaman GitHub untuk repositori Anda dan menentukan sumber untuk file situs web Anda, dan GitHub akan secara otomatis menerbitkan situs web Anda dan membuatnya tersedia di URL berdasarkan nama pengguna dan nama repositori Anda.
2. Domain khusus: Dengan Halaman GitHub, Anda dapat menggunakan nama domain khusus untuk situs web Anda alih-alih URL default yang disediakan oleh GitHub. Ini memungkinkan Anda untuk menggunakan merek Anda sendiri dan memudahkan pengguna untuk menemukan dan mengakses situs web Anda.
3. Dukungan HTTPS: Halaman GitHub menawarkan dukungan untuk HTTPS, yang memungkinkan koneksi aman ke situs web Anda. Ini penting untuk membangun kepercayaan situs Anda.
4. Dukungan Jekyll: Halaman GitHub mendukung Jekyll, generator situs statis yang memungkinkan Anda membuat situs web canggih menggunakan templat dan fitur lainnya. Ini memudahkan pembuatan situs web yang terlihat profesional tanpa harus menulis semua kode dari awal.

Keterbatasan

Seperti yang dinyatakan sebelumnya, Anda hanya dapat membuat situs statis dengan Halaman GitHub. Jika Anda ingin membangun proyek yang kompleks dengan banyak fungsi, Anda memerlukan layanan hosting lainnya. Anda juga harus ingat, bahwa Anda tidak dapat menggunakan Halaman GitHub untuk tujuan komersial, seperti menjalankan bisnis online, atau e-niaga.

Halaman GitHub tidak mengizinkan situs Anda berukuran lebih besar dari 1 GB, artinya file di repositori Anda tidak dapat melampaui jumlah memori tersebut. Sering kali, 1 GB sudah lebih dari cukup untuk situs statis; pastikan untuk mengompres gambar Anda.

Ini juga memiliki batas bandwidth lunak 100 GB per bulan. Jumlah bandwidth ini akan cukup untuk mendistribusikan situs web Anda ke beberapa ribu orang per bulan, jadi kecuali Anda memiliki audiens yang besar, Anda akan baik-baik saja.

Membuat dan Menyebarkan Dengan Halaman GitHub: Panduan Langkah-demi-Langkah

Membuat Halaman GitHub adalah proses sederhana dan mudah untuk menghosting situs statis. Perlu diingat bahwa jika Anda memerlukan semacam koneksi basis data, Anda harus memiliki penyedia basis data eksternal.

Dalam panduan berikut, Anda akan belajar cara membuat Halaman GitHub dari awal. Itu termasuk membuat repositori jarak jauh, membangun situs web pribadi yang responsif dengan HTML, dan men-deploy ke web dengan GitHub.

Mari kita masuk ke dalamnya!

1. Mendaftar di GitHub

Untuk memulai, Anda harus memiliki akun GitHub yang aktif. Jika Anda tidak memilikinya, buka halaman pendaftaran mereka. Tidak perlu lebih dari beberapa menit untuk mengisi formulir.

Setelah masuk, Anda seharusnya dapat membuat repositori jarak jauh.

2. Buat Repositori Jarak Jauh

Repositori adalah direktori tempat Anda menyimpan semua kode yang terkait dengan proyek tertentu.

Dari beranda GitHub, klik tombol "Baru" atau "Buat repositori" yang terletak di panel kiri situs. Ini akan mengarahkan Anda ke formulir tempat Anda akan mengisi informasi repo Anda.

Langkah-langkah berikut ini sangat penting:

1. Setel nama repositori Anda ke "yourusername".github.io .
2. Periksa tombol publik. Anda harus menyetel repositori ke Publik untuk menerbitkan situs Anda.
3. Tambahkan README.

Anda hanya dapat memiliki repositori untuk akun pribadi atau organisasi tertentu. Itu sebabnya nama repositori adalah nama pengguna Anda dan domain github.io . Nanti, kita akan melihat cara menyiapkan situs dari repositori.

Kecuali Anda memiliki GitHub Pro, Anda hanya dapat menerbitkan halaman GitHub jika repositori bersifat publik. Ingatlah hal ini jika Anda tidak ingin membagikan kode sumber situs Anda secara publik.

Setelah ini, Anda harus memiliki sesuatu seperti berikut:

Jika Anda sudah memiliki kode sumber yang berfungsi untuk situs Anda, Anda dapat melewati alur kerja umum Git dan memasukkan file langsung ke dalam repo.

Untuk melakukannya, klik menu Add file di repositori Anda, dan pilih opsi Unggah file . Kemudian pilih file situs web Anda, dengan file HTML utama bernama index.html . Ingatlah untuk meletakkan semua file CSS dan JavaScript Anda di repositori juga.

Terakhir, tekan tombol Perubahan Komit .

Di bagian berikut, kita akan membuat situs web pribadi sederhana dengan HTML dan Bootstrap. Kemudian kami akan mengunggahnya ke GitHub dan menyiapkannya sebagai halaman publik GitHub dengan domain khusus.

3. Bangun Situs Pribadi

Kami akan memulai dengan mengkloning repo GitHub yang baru saja kami buat. Untuk melakukan ini, pastikan Anda sudah menginstal klien Git di komputer Anda. (Jika tidak, lihat tutorial kami tentang Git dan GitHub.)

Buka tab code repositori Anda dan salin URL SSH di opsi SHH .

Kemudian, jalankan terminal atau baris perintah. Di sebagian besar distribusi Linux dan macOS, Anda dapat menggunakan pintasan Ctrl + Alt + T , atau melihat melalui menu aplikasi sistem Anda untuk Terminal . Di Windows, Anda dapat menggunakan Git BASH yang diinstal secara default dengan Git, CMD, PowerShell, atau klien GUI.

Di terminal Anda, ketik git clone dan URL yang Anda salin. Ini akan mengunduh dan membuat salinan repositori jarak jauh di mesin lokal Anda sehingga Anda dapat membangun situs web Anda.

Kemudian masuk ke folder baru bernama yourusername.github.io dengan cd dan ls . Anda akan melihat folder .git , yang berisi konfigurasi dan metadata proyek Anda, serta file README.md jika Anda membuatnya.

Buka editor teks favorit Anda (seperti Sublime Text), dan mari mulai membuat situs web Anda.

Di root repositori, buat file bernama index.html (nama ini diperlukan oleh GitHub Pages) dan ketikkan struktur kode HTML biasa:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Seperti yang kami katakan sebelumnya, kami akan menggunakan Bootstrap 5.0, kerangka kerja CSS sumber terbuka yang membantu kami membangun situs web responsif dengan lebih mudah. Seperti yang akan Anda lihat, kita tidak perlu menggunakan CSS khusus untuk situs khusus ini.

Untuk memasukkan Bootstrap ke halaman kita, kita harus menyertakan CSS dan JavaScript yang dikompilasi melalui CDN. Rekatkan kode berikut di dalam HTML <head> untuk dapat menggunakan Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Dengan cara yang sama, kami juga akan menyertakan CDN Devicon agar dapat menggunakan ikon SVG dari bahasa dan teknologi pemrograman populer tanpa banyak kesulitan:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Sekarang, untuk memasukkan JavaScript, sisipkan kode berikut tepat di atas akhir tag </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Kami akan memulai dengan membuat tajuk untuk situs web kami. Ini akan menjadi tajuk gelap, dengan tautan ke halaman indeks kami dan dua halaman lainnya — “Projects” dan “Reading log” — yang dapat Anda buat nanti:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Kami menggunakan navbar pembungkus Bootstrap dan navbar-expand-lg untuk membuat penampung responsif yang menciut saat lebar tampilan lebih kecil dari 992px. Ini terjadi karena opsi grid lg . Jika Anda ingin tahu lebih banyak tentang opsi kisi, lihat halaman tata letak Bootstrap.

Sekarang, mari buat dua kolom responsif di dalam wadah: satu untuk gambar gratis dari Unsplash dan satu lagi untuk deskripsi tentang diri kita sendiri:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Seperti yang Anda lihat, kami mengambil gambar dari file lokal, jadi itu harus ada di repositori saat kami mendorong perubahan kami ke repo GitHub.

Terakhir, di dalam wadah Bootstrap kami, kami akan menggunakan ikon SVG dari Devicon, bersama dengan sedikit CSS internal untuk menonjolkan keahlian kami:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Karena kita menggunakan tag HTML <i> , kita bisa memperlakukannya sebagai font. Jadi kami mengatur ukuran logo kami menjadi 4 em dengan menyatakannya di tag style .

Berikut adalah hasil akhir dari website pribadi sederhana ini:

Tahukah Anda bahwa lebih dari 50% lalu lintas situs web berasal dari perangkat seluler? Karena kami menggunakan Bootstrap, kami menyimpan banyak pengkodean CSS, dan juga mendapatkan situs web yang responsif, seperti yang dapat Anda hargai di bawah.

Anda dapat menyesuaikan situs ini sebanyak yang Anda inginkan. Inilah sumber lengkap di GitHub, siap membantu Anda.

Anda bahkan dapat memasang CMS tanpa kepala seperti Ghost menggunakan salah satu solusi Hosting Aplikasi berfitur lengkap kami. Anda dapat terhubung langsung ke repositori GitHub Anda melalui dasbor MyKinsta dan menjalankan situs baru Anda hanya dalam beberapa menit.

Saatnya untuk mendorong file Anda. Untuk melakukan ini, jalankan perintah berikut di terminal Anda, di tingkat atas proyek Anda.

 git add . git commit -m "Added website source code and image" git push

Sekarang, kita dapat menggunakan situs web ini untuk mengatur halaman GitHub kita.

4. Menerbitkan Halaman GitHub Pengguna

Segera setelah Anda mendorong index.html ke repositori jarak jauh yang dinamai sesuai nama pengguna Anda, GitHub akan secara otomatis memulai proses alur kerja untuk menyiapkan situs Anda secara online. Ini mungkin memakan waktu beberapa menit, tetapi situs statis Anda akan aktif dan berjalan secara otomatis.

URL situs Anda akan seperti berikut: https://kinstauser.github.io/

Jika setelah 10 menit situs Anda tidak online, Anda dapat mencoba membuat perubahan dummy pada kode Anda (mis., menambahkan spasi) dan mendorong lagi untuk mengaktifkan kembali proses pembuatan Halaman GitHub.

5. Menerbitkan Halaman Repositori GitHub

Sampai saat ini, kami telah membuat situs pengguna, tetapi bagaimana jika kami ingin memiliki beberapa situs GitHub yang dipublikasikan? Maka kita harus pergi dengan situs proyek.

Sebagai contoh, kita akan menggunakan situs teknologi HTML yang kita buat di tutorial Git untuk pengembangan Web.

Cara termudah adalah pergi ke tab Pengaturan repositori kami, lalu ke opsi Halaman di dalam bagian "Kode dan otomatisasi".

Pilih sumber Deploy from a branch , dan klik cabang tempat Anda ingin menerapkan file. Sangat disarankan untuk memublikasikan dari cabang utama , tetapi buat fitur dan perbaiki bug menggunakan cabang tambahan, lalu gabungkan. Dengan cara ini Anda tidak akan memperkenalkan kesalahan ke situs yang dipublikasikan dengan mudah.

Setelah Anda memilih cabang, pilih folder tempat Anda ingin menyajikan file — biasanya root ( / ) — dan klik simpan.

Sekali lagi, tunggu beberapa menit. Situs Anda harus tersedia di "yourusername".github.io/ .

Untuk membatalkan publikasi situs repositori, Anda dapat pergi ke Settings , lalu Pages , dan klik opsi tiga titik. Anda akan melihat kotak dengan pesan Unpublish site .

Besar! Anda memiliki situs proyek sumber terbuka Anda dan berjalan, tetapi nama domain itu sendiri panjang dan tentu saja tidak mudah diingat. Mari kita lihat bagaimana kita dapat meningkatkan ini.

6. Menyiapkan Domain Khusus

Cara termudah untuk mengatur domain khusus untuk halaman GitHub dan memastikannya berfungsi adalah dengan pergi ke penyedia DNS Anda dan membuat empat catatan A untuk alamat IP Halaman GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Anda juga harus menyiapkan catatan CNAME dengan yourusername.github.io sebagai target. Biasanya perubahan DNS lambat, jadi bersabarlah, bisa memakan waktu hingga seharian.

Setelah melakukan ini, buka bagian Domain khusus di pengaturan repo Anda, ketikkan domain Anda, klik tombol Simpan , dan tunggu GitHub untuk memeriksa domain khusus Anda.

Selain itu, jika DNS Anda mendukungnya, centang kotak Terapkan HTTPS untuk hanya melayani situs Anda melalui HTTPS.

Selamat! Jika Anda telah mengikuti tutorial sampai titik ini, Anda memiliki situs web statis yang dihosting di Halaman GitHub secara gratis.

Praktik Terbaik untuk Halaman GitHub

Sebelum kita berpisah, berikut adalah beberapa praktik terbaik yang harus Anda pertimbangkan saat memublikasikan situs GitHub:

1. Jangan pernah membuat komitmen langsung ke cabang tempat Anda menerapkan. Buat perubahan di cabang lain, lalu buat permintaan tarik.
2. Pilih domain yang bagus untuk situs Anda jika Anda mampu membelinya. Ini adalah salah satu keputusan terpenting untuk merek pribadi atau proyek Anda.
3. Jangan gunakan Halaman GitHub untuk tujuan komersial, seperti membuka situs e-niaga.
4. Evaluasi kebutuhan Anda. Sangat bagus untuk dapat memublikasikan situs statis secara gratis, tetapi jika Anda mengharapkan banyak lalu lintas atau menginginkan fitur yang rumit, membayar untuk layanan hosting yang bagus adalah cara yang tepat.

Ringkasan

Pengembangan web semakin rumit setiap hari. Situs statis telah ada di sini sejak munculnya internet, dan ini adalah cara yang bagus untuk mulai membuat proyek.

Dalam tutorial ini, Anda mempelajari apa itu situs statis, dan cara menyiapkannya secara online menggunakan Halaman GitHub. Anda membuat situs pribadi sederhana menggunakan Bootstrap dan menerbitkannya sebagai situs pengguna GitHub Anda. Anda juga mempelajari cara mengaktifkan dan menjalankan situs proyek serta cara membatalkan publikasinya jika perlu.

Secara keseluruhan, Halaman GitHub adalah cara yang nyaman dan ampuh untuk menghosting situs web statis Anda secara gratis. Apakah Anda ingin memamerkan portofolio Anda, membagikan proyek sumber terbuka Anda, atau mulai membuat kehadiran online, Halaman GitHub adalah pilihan yang sangat baik. Dan setelah Anda mendapatkan lalu lintas yang cukup atau siap untuk membuat situs full-stack, Anda dapat dengan mulus beralih ke layanan hosting aplikasi lain seperti Kinsta tanpa ragu.