Bagaimana Cara Membuat Website Gratis Dengan Custom Nama Domain, Hosting, dan Enkripsi SSL?

Membuat situs web adalah investasi serius; Anda harus membayar untuk setiap langkah membangun situs web.

Apakah Anda ingin membuat situs web gratis untuk pertumbuhan pribadi atau profesional? Berikut adalah cara untuk merancang situs web Anda berikutnya dengan nama domain khusus, hosting gratis seumur hidup, dan enkripsi SSL benar-benar gratis. Wah! Apa lagi yang bisa Anda minta?

Tidak perlu dipikirkan lagi bahwa memiliki situs web secara signifikan meningkatkan angka pertumbuhan Anda, dan hari ini lebih merupakan investasi daripada kemewahan. Ini tidak hanya berlaku untuk bisnis, tetapi individu juga dapat memperoleh manfaat yang tinggi melalui situs web pribadi.

Baik mendaftarkan nama domain, menghosting konten situs web Anda, membangun situs web, atau mengaktifkan enkripsi SSL, Anda harus siap mengosongkan kantong Anda. Menambah rasa sakit, beberapa dari pengeluaran ini berulang dan berlanjut selamanya.

Bagaimana jika saya memberi tahu Anda bahwa Anda dapat membuat situs web gratis sambil melakukan semua langkah penting yang disebutkan di atas dalam membangun situs web itu juga secara gratis? Kedengarannya tidak duniawi, Anda dapat melakukan semua ini secara gratis jika Anda seorang pelajar.

Jika Anda mengetahui GitHub, Anda mungkin tahu tentang Halaman GitHub. Gratis untuk menggunakan layanan yang disertakan dengan setiap akun GitHub. GitHub Pages memungkinkan setiap pengguna membuat situs web gratis dan menghostingnya, tetapi ada peringatan besar. Nama domain situs web gratis ini pada dasarnya diakhiri dengan github.io, yang merusak profesionalisme situs web Anda.

Apa itu Paket Pengembang Siswa GitHub?

Lebih sedikit pengguna yang akan menganggap serius situs web Anda, dan memiliki nama domain yang terlalu panjang bukanlah ide yang baik. Tapi hey! Kami di sini bukan untuk membicarakan keuntungan atau peringatan dari Halaman GitHub. Saya menjanjikan cara untuk memungkinkan Anda membuat situs web gratis dengan nama domain khusus, dan inilah cara Anda dapat melakukannya.

GitHub menawarkan kesempatan untuk memanfaatkan kit fantastis yang diisi dengan alat online praktis untuk setiap siswa yang terdaftar di program gelar atau diploma, yang dikenal sebagai Paket Pengembang Siswa GitHub. Paket ini mencakup langganan pro dan diskon besar-besaran untuk alat-alat populer seperti Canva, Namecheap, Microsoft Azure, Discord, Name.com, dan StreamYard, di antara trilyun lainnya.

Pada artikel ini, kami akan menggunakan Namecheap untuk mendaftarkan domain kustom gratis dan menggunakan halaman GitHub untuk meng-host situs web kami. Kami kemudian akan melihat cara untuk mendesain dan mengunggah file HTML, CSS, dan JavaScript Anda ke halaman GitHub. Pada akhirnya, kami juga akan mengaktifkan enkripsi SSL untuk situs web, tetapi pertama-tama, kami harus mendaftar untuk Paket Pengembang Siswa.

Bagaimana Cara Mendaftar untuk Paket Pengembang Siswa GitHub?

Proses pendaftaran Paket Pengembang Mahasiswa harus memiliki alamat email mahasiswa yang diberikan universitas. Alamat email mahasiswa biasanya diakhiri dengan nama domain universitas Anda, misalnya, [email protected] Ada cara lain untuk mendaftar paket, tetapi memerlukan waktu peninjauan yang jauh lebih lama daripada menggunakan email mahasiswa. Jika Anda sudah menyiapkan alamat email siswa Anda, berikut ini cara Anda dapat mendaftar untuk paket tersebut:

Langkah 1: Buka pendidikan GitHub dan klik opsi Masuk.

Anda dapat masuk menggunakan kredensial Anda jika Anda sudah memiliki paket. Lain, Anda dapat mengikuti langkah-langkah di bawah ini.

Klik opsi Buat Akun di jendela Masuk.

Langkah 2: Selanjutnya, daftar menggunakan email siswa Anda dan buat akun.

Langkah 3: Ketika diminta dengan "Mana yang paling menggambarkan status akademik Anda?", Pastikan untuk memilih Siswa.

Langkah 4: Sekarang isi kotak yang diperlukan dengan detail mengenai Nama Sekolah Anda dan tujuan Anda menggunakan GitHub.

Langkah 5 : Terakhir, kirimkan aplikasi Anda menggunakan opsi "Kirim informasi Anda".

Anda akan menerima email konfirmasi mengenai paket pengembang jika aplikasi Anda disetujui oleh GitHub. Prosesnya biasanya memakan waktu beberapa hari, tetapi waktunya dapat sangat bervariasi selama jam sibuk.

Bagaimana Mendaftar untuk Paket Pengembang Siswa GitHub tanpa email siswa?

GitHub juga memberi Anda opsi untuk mengajukan paket menggunakan kartu ID pelajar yang valid atau bukti status akademik Anda lainnya. Satu-satunya peringatan adalah waktu tunggu yang lama dan rasio penolakan yang lebih tinggi. Bagaimanapun, inilah cara Anda dapat mendaftar untuk paket siswa melalui metode ini:

Langkah 1: Ikuti langkah-langkah yang disebutkan di atas untuk membuat akun melalui email pribadi Anda.

Langkah 2: Sekarang unggah bukti status akademik Anda menggunakan opsi kamera atau unggah foto langsung ke GitHub menggunakan tombol Unggah.

Langkah 3: Selanjutnya, isi semua detail yang diperlukan seperti Nama Sekolah dan tujuan menggunakan GitHub.

Langkah 4: Kirim aplikasi Anda.

Bagaimana cara mendaftarkan domain kustom Anda menggunakan Namecheap?

Saya berasumsi Anda telah mengaktifkan dan menjalankan akun GitHub Education Anda. Langkah-langkah berikut melibatkan penggunaan Namecheap untuk mendaftarkan domain kustom gratis Anda dan menghostingnya melalui Halaman GitHub. Ikuti langkah-langkah ini untuk mendaftarkan nama domain pilihan Anda:

Langkah 1: Masuk ke akun GitHub Education Anda dan buka bagian Manfaat.

Anda akan melihat Web Dev Kit dan Virtual Event Kit.

Langkah 2: Buka Virtual Event Kit dan gulir ke bawah untuk menemukan Namecheap.

GitHub menawarkan pendaftaran nama domain 1 tahun di .me TLD, yang dapat Anda akses dengan mengeklik opsi Dapatkan Akses.

Langkah 3: Jendela berikut akan meminta Anda untuk mengotorisasi permintaan koneksi dari Namecheap ke akun GitHub Anda. Otorisasi Namecheap dan lanjutkan ke langkah berikutnya.

Anda akan melihat prompt yang mengatakan, “Kami telah berhasil memverifikasi paket siswa Anda dengan GitHub” setelah otorisasi berhasil.

Langkah 4: Temukan domain pilihan Anda melalui bilah pencarian dan klik Temukan.

Anda akan melihat ketersediaan nama domain di layar berikutnya. Jika nama domain Anda tersedia, Anda dapat melanjutkan untuk membelinya secara gratis.

Langkah 5: Checkout menggunakan alamat email GitHub Education dan pilih GitHub Pages sebagai metode hosting Anda saat melanjutkan.

Setelah berhasil mendaftarkan nama domain kustom Anda dan memilih Halaman GitHub sebagai hosting Anda, Namecheap akan secara otomatis membuat repositori di akun GitHub Anda. Repositori ini benar-benar kosong dan hanya berisi file README.md.

Anda dapat mengakses repositori ini dengan masuk ke akun GitHub Anda dan mengklik bagian “Repositori Anda”. Halaman GitHub tidak menawarkan alat visual dan tema bawaan untuk situs web Anda; Anda perlu mengkodekan seluruh situs web secara manual dan mengunggah file terkait ke repositori GitHub yang baru Anda buat.

Bagaimana cara membuat situs web gratis dan menghostingnya di Halaman GitHub?

Seperti disebutkan di atas, Anda harus membuat semua file HTML, CSS, dan JavaScript yang terkait dengan situs web Anda. Jika Anda menyukai Web Dev dan tahu cara membuat kode, Anda sebaiknya mengunggah file Anda di repositori GitHub Anda dan menjalankan situs web Anda. Anda dapat menggulir ke bagian artikel ini yang berhubungan dengan mengunggah kode situs web ke Halaman GitHub.

Tetapi jika Anda adalah seseorang yang memiliki sedikit atau tidak ada informasi sama sekali tentang Web Dev, kami telah membantu Anda. Anda dapat menggunakan langkah-langkah yang diberikan di bawah ini dan mendesain situs web Anda sendiri menggunakan beberapa HTML dasar:

Langkah 1: Buka HTML5 UP dan gulir ke desain situs web yang Anda suka. Anda dapat memilih tema bawaan lainnya dari platform apa pun. Di sini saya telah memilih "Massively" dari HTML5 UP, tetapi Anda bebas mengunduh dan menyesuaikan desain situs web apa pun pilihan Anda.

Langkah 2: Ekstrak file zip yang diunduh dari desain situs web favorit Anda.

Anda akan melihat file bernama index.html dan generic.html dan folder seperti aset dan gambar di folder yang diekstrak.

Langkah 3: Sekarang buka file hasil ekstrak menggunakan Visual Studio Code dan pilih file index.html.

Langkah 4: Unduh dan instal ekstensi "Live Server" di Visual Studio Code jika Anda belum memilikinya.

Langkah 5: Pilih file index.html, klik tombol kanan mouse, dan pilih opsi "Open in Live Server". Opsi ini memungkinkan Anda memvisualisasikan perubahan dalam file HTML di browser Anda secara real-time.

Bagaimana cara menyesuaikan desain situs web Anda?

Saya tidak akan menyebut proses di luar titik ini sebagai "Langkah" untuk menyesuaikan situs web Anda. Menyesuaikan file HTML sepenuhnya terserah preferensi Anda, tetapi inilah cara saya menyesuaikan desain "Massively" dari HTML5 UP dan mengubahnya menjadi portofolio. Anda dapat memilih untuk mengambil inspirasi dari ini atau menyesuaikan situs web Anda sepenuhnya sendiri. Pilihan ada padamu!

Memodifikasi tag Judul dan Paragraf

Memulai proses kustomisasi saya, saya mengubah tag judul “Massively.” Tag judul file HTML Anda akan menentukan namanya saat dibuka di tab browser. Judul default untuk Massively seharusnya “Massively by HTML5 UP,” dan saya sarankan untuk mengubahnya menjadi sesuatu yang mirip dengan situs web Anda.

Saya mengubah tag judul menjadi “Samyak Goswami | Tech Content Writer” karena cocok dengan Portofolio saya. Selanjutnya, saya mengubah bagian Intro situs web, yang mengatakan: “Ini secara besar-besaran” (terkandung dalam tag H1) dan menjadikannya “Portofolio Samyak” untuk alasan yang jelas. Selanjutnya, saya mengubah teks di bawah ini dalam tag paragraf menjadi “Sebuah karya proyek dan kemampuan saya.”

Pergi ke bagian Navigasi (Nav) di file indeks, saya menghilangkan dua dari tiga tombol navigasi yang terdapat dalam tag Daftar. Saya ingin membuat situs web satu halaman dengan semua detail pada satu halaman, tetapi Anda bebas untuk mengubah jumlah tombol navigasi sesuai pilihan Anda.

Saya kemudian mengubah teks "Ini Secara Besar-besaran" pada tombol navigasi menjadi "Artikel Saya."

Memodifikasi Tautan dan Ikon Media Sosial

Anda juga harus melihat berbagai ikon media sosial di server langsung seperti Twitter, Facebook, Instagram, dan GitHub. Saya memutuskan untuk menghilangkan Twitter dan Facebook dan menyimpan Instagram dan LinkedIn untuk kasus penggunaan saya.

Anda dapat mengubah ikon media sosial dan tautannya dengan membuka bagian Navigasi (Nav) dan menggulir ke Daftar tag dengan Twitter, Instagram, dan lainnya yang tertulis di dalamnya.

Perhatikan bagaimana tidak ada tautan yang dilampirkan ke ikon media sosial ini karena tag href dibiarkan kosong. Anda dapat menambahkan tautan ke tag href dengan mengganti “#” dengan tautan pilihan Anda.

Memodifikasi Konten Beranda

Pertama-tama, saya mengubah tag H2 dan menjadikannya “Nama saya Samyak Goswami” dan kemudian mengubah tag Paragraf menjadi “Saya penggemar teknologi….”. Saya sarankan Anda mengubah tag H2 dengan sesuatu yang cocok dengan konten beranda Anda dan tag paragraf yang menjelaskannya.

Kami sekarang datang dengan bagian paling penting dari penyesuaian ini; memodifikasi konten ubin artikel.

Untuk melakukan ini, buka bagian Postingan di file indeks, dan Anda akan melihat beberapa cuplikan kode yang terdapat dalam tag Artikel. Anda dapat menambahkan tautan ke cerita Anda dengan memodifikasi bagian href seperti yang kami lakukan saat menambahkan tautan ke ikon media sosial.

Nanti Anda dapat mengubah nama Artikel dengan memodifikasi konten di dalam tag H2. Anda juga dapat menambahkan deskripsi ke artikel Anda menggunakan tag paragraf.

Ulangi proses untuk setiap artikel dengan menambahkan tautan, mengubah nama, dan menambahkan deskripsi ke semua artikel Anda.

Menambahkan Gambar ke Situs Web Anda

Anda pasti telah memperhatikan bahwa pratinjau terlihat sangat berbeda dari gambar yang ada di situs web HTML5 UP. Ini karena foto pesawat dan hambar dalam file yang dapat disesuaikan. Mari kita membumbui situs web kita dengan menambahkan gambar khusus ke dalamnya.

Untuk melakukannya, navigasikan ke folder tempat Anda sebelumnya mengekstrak file zip "Massively". Buka folder hasil ekstrak dan masuk ke folder Gambar. Anda akan melihat gambar yang berbeda bernama bg, pic01, pic02, dan seterusnya. Ini adalah gambar yang ditautkan dengan artikel kami di tag Artikel.

Anda dapat menambahkan gambar khusus dan memodifikasi file indeks dengan nama gambar ini atau menambahkan gambar dan menamainya mirip dengan gambar default. Memberi gambar nama yang identik menyelamatkan kita dari memodifikasi kode dan banyak waktu selanjutnya.

Saya sarankan Anda mengoreksi dan memodifikasi bagian lain dari situs web Anda yang tidak penting. Berikut portofolio yang saya buat menggunakan langkah-langkah yang saya sebutkan di atas: samyakgoswami.me.

Bagaimana cara mengunggah kode situs web Anda ke Halaman GitHub?

Setelah akhirnya mengkodekan dan mendesain situs web Anda, sekarang saatnya untuk mengunggahnya ke Halaman GitHub dan menayangkannya di Internet.

Inilah cara Anda dapat mengunggah situs web Anda ke Halaman GitHub:

Langkah 1: Masuk ke akun GitHub Anda dan buka bagian Repositori Saya.

Langkah 2: Anda akan melihat repositori bernama your_username.github.io. Masuk ke repositori ini.

Langkah 3: Anda akan melihat opsi untuk membuat file Anda sendiri atau mengunggah file ke repositori GitHub.

Langkah 4: Pilih kelima file dan folder; aset, gambar, elemen, generik, indeks, dan seret dan lepas ke repositori.

Setelah file diunggah, komit kodenya dan tunggu hingga GitHub memproses file Anda.

Langkah 5: Navigasikan ke Pengaturan> Halaman GitHub untuk melihat status situs web Anda. Anda akan melihat prompt "Situs web Anda diterbitkan di domain_kustom_Anda."

Anda sekarang dapat pergi ke alamat web Anda dan memeriksa situs web sendiri. Ingat, situs web dapat memakan waktu lama sebelum ditayangkan pada awalnya.

Bagaimana cara mengaktifkan enkripsi SSL di Halaman GitHub?

HTTP adalah cara yang tidak aman untuk mengelola permintaan pengguna di situs web Anda. Siapa pun dengan niat jahat dan pengetahuan teknis yang baik dapat mencegat interaksi antara pengguna dan situs web Anda. Di sisi lain, HTTPS memberi semua pengunjung Anda sesi penjelajahan yang jauh lebih aman. GitHub Pages menawarkan enkripsi HTTPS gratis, dan inilah cara Anda dapat memanfaatkannya:

Gulir ke bagian Halaman di repositori.

Anda akan melihat opsi "Terapkan HTTPS" di akhir jendela. Enkripsi SSL akan aktif segera setelah Anda mencentang kotak Terapkan HTTPS.

Jika Anda menemukan opsi Terapkan HTTPS tidak tersedia untuk domain Anda, Anda dapat mengaktifkan enkripsi SSL menggunakan langkah-langkah di bawah ini:

Langkah 1 : Masuk ke akun Namecheap Anda dan buka bagian "Daftar Domain".

Langkah 2: Sekarang navigasikan ke Kelola Domain dan kemudian ke bagian "DNS Lanjutan".

Anda akan melihat beberapa catatan CNAME dan A yang ada.

Tambahkan A Records berikut dengan host sebagai “@” dan Alamat IP sebagai “185.199.108.153”. Berikutnya dengan hostname “@” dan IP Address sebagai “185.199.109.153”.

Ikuti tren hingga Anda memiliki 4 A Record hingga IP Address “185.199.111.153”.

Hapus semua A Record sebelumnya.

Langkah 3: Selanjutnya, tambahkan CNAME Record dengan Host sebagai “www” dan Value sebagai nama pengguna GitHub Anda (dot) github (dot) io.

Hapus Catatan CNAME sebelumnya. Pada akhirnya, pengaturan DNS Anda harus memiliki 4 Catatan A dan 1 Catatan CNAME.

Langkah 4: Sekarang buka halaman GitHub di bagian Pengaturan. Opsi Terapkan HTTPS sekarang seharusnya tersedia untuk domain Anda.

Menyimpulkan

GitHub memberikan kesempatan luar biasa kepada setiap siswa untuk membuat situs web gratis dan mengelolanya. Meskipun Anda tidak dapat menggunakan Halaman GitHub untuk menampung beban lalu lintas yang besar, itu mencentang setiap kotak centang untuk situs web statis skala kecil. Nama domain kustom gratis, hosting, dan enkripsi SSL membuatnya semakin indah untuk dimiliki.

Sekarang Anda mungkin membaca “Cara Memilih Host Web untuk situs web baru Anda.”

Berikut adalah beberapa alat pemantau kecepatan halaman untuk memberi tahu Anda saat situs web Anda down.