LintasYogya | Cara Hosting Menggunakan Github
Cara Hosting Menggunakan Github

Cara Hosting Menggunakan Github

Hai, Salam buat Sobat Lintasyogya yang ingin belajar cara hosting menggunakan Github. Github merupakan platform hosting yang populer digunakan oleh developer untuk menyimpan dan berkolaborasi pada proyek open-source. Namun, Github juga bisa digunakan sebagai tempat untuk hosting website static. Yuk, simak cara-cara berikut ini!

1. Membuat Repository Baru

Langkah pertama adalah membuat repository baru di Github. Caranya, login ke akun Github Anda, lalu klik tombol “New” di pojok kanan atas halaman. Beri nama repository Anda, misalnya “website-saya”. Pastikan checkbox “Initialize this repository with a README” tidak dicentang. Setelah itu, klik tombol “Create repository”.

FAQ:

  1. Kenapa checkbox “Initialize this repository with a README” tidak dicentang?

    2. Karena kita akan membuat website dari awal, jadi tidak perlu file README.

  2. Apakah nama repository harus sama dengan nama domain kita?

    3. Tidak harus, tapi disarankan menggunakan nama yang mudah diingat dan relevan dengan isi website kita.

  3. Apakah kita bisa mengubah nama repository setelah dibuat?

    4. Ya, bisa. Namun, akan berdampak pada URL repository kita.

2. Membuat File Index.html

Setelah repository berhasil dibuat, langkah selanjutnya adalah membuat file index.html. File ini akan menjadi halaman utama website kita. Klik tombol “Add file” di bagian atas repository, lalu pilih “Create new file”. Beri nama file “index.html”, lalu isi dengan kode HTML seperti berikut:

Kode HTML Penjelasan
<!DOCTYPE html> Deklarasi tipe dokumen HTML.
<html> Elemen root HTML.
<head> Elemen untuk menyimpan informasi meta dan judul website.
<title>Judul Website</title> Judul website yang akan tampil di tab browser.
</head> Tutup elemen head.
<body> Elemen untuk menampilkan isi website.
<h1>Selamat Datang di Website Saya!</h1> Elemen heading untuk judul utama website.
<p>Ini adalah website statis yang di-hosting di Github.</p> Elemen paragraph untuk menampilkan teks.
</body> Tutup elemen body.
</html> Tutup elemen root HTML.

Setelah selesai, klik tombol “Commit new file” untuk menyimpan perubahan.

FAQ:

  1. Apakah kode HTML di atas sudah lengkap untuk membuat website?

    2. Belum, karena hanya menampilkan judul dan teks saja. Kita perlu menambahkan CSS dan gambar untuk membuat website lebih menarik.

  2. Apakah kita harus membuat file CSS dan gambar?

    3. Tidak harus, tapi disarankan untuk membuat website lebih menarik dan profesional.

  3. Apakah kita harus menguasai HTML dan CSS untuk membuat website?

    4. Tidak harus, tapi sangat direkomendasikan. Namun, banyak juga platform website builder yang memudahkan pembuatan website tanpa harus menguasai coding.

Baca Juga :  Cara Pindah Domain dari Hosting Lama ke Hosting Baru

3. Mengaktifkan Github Pages

Setelah membuat repository dan file index.html, langkah selanjutnya adalah mengaktifkan Github Pages. Github Pages adalah fitur yang memungkinkan kita untuk meng-hosting website secara gratis di Github. Caranya, klik tab “Settings” di repository kita, lalu scroll ke bawah hingga menemukan bagian “Github Pages”. Pilih branch “main” atau “master” sebagai source, lalu klik tombol “Save”. Setelah itu, akan muncul URL website kita di bagian “Github Pages”.

FAQ:

  1. Apakah Github Pages gratis?

    2. Ya, Github Pages gratis untuk hosting website statis. Namun, jika ingin menggunakan domain custom, perlu membayar biaya domain.

  2. Apakah kita bisa meng-hosting website dinamis di Github Pages?

    3. Tidak, Github Pages hanya mendukung hosting website statis seperti HTML, CSS, dan Javascript.

  3. Apakah kita bisa menyesuaikan tampilan URL Github Pages?

    4. Ya, bisa. Namun, perlu mengikuti aturan penamaan URL yang ditetapkan Github Pages.

4. Menggunakan Custom Domain

Jika ingin menggunakan domain custom, kita bisa menghubungkan domain tersebut dengan Github Pages. Caranya, beli domain di registrar seperti Namecheap atau GoDaddy, lalu atur DNS record domain tersebut dengan menambahkan CNAME atau A record yang mengarah ke Github Pages. Setelah itu, tambahkan domain tersebut di bagian “Custom domain” di pengaturan Github Pages. Setelah domain berhasil di-verify, website kita akan bisa diakses melalui domain custom tersebut.

FAQ:

  1. Apakah harus beli domain untuk menggunakan Github Pages?

    2. Tidak harus, karena kita bisa menggunakan subdomain Github Pages. Namun, jika ingin tampil lebih profesional, disarankan menggunakan domain custom.

  2. Apakah ada biaya tambahan untuk menggunakan domain custom di Github Pages?

    3. Tidak, Github Pages gratis untuk meng-hosting website dengan domain custom. Namun, perlu membayar biaya domain di registrar.

  3. Apakah harus mengerti tentang DNS untuk mengatur custom domain di Github Pages?

    4. Disarankan mengerti, tapi jika bingung, bisa minta bantuan pada registrar atau web hosting provider.

Baca Juga :  Jelaskan cara kerja dedicated hosting server

5. Menggunakan Jekyll

Jekyll adalah platform yang memungkinkan kita untuk membuat website statis dengan lebih mudah dan cepat. Jekyll menggunakan template dan markup language seperti Liquid dan Markdown untuk memudahkan pembuatan website. Caranya, buat file _config.yml di repository kita, lalu tambahkan kode berikut:

theme: jekyll-theme-minimal

Setelah itu, buat file index.md dengan kode berikut:

—layout: defaulttitle: Judul Website—# Selamat Datang di Website Saya!Ini adalah website statis yang di-hosting di Github.Setelah selesai, klik tombol “Commit new file” untuk menyimpan perubahan. Setelah itu, website kita akan menggunakan tema Jekyll dan markup language Markdown.

FAQ:

  1. Apakah Jekyll gratis?

    2. Ya, Jekyll gratis dan open-source.

  2. Apakah Jekyll sulit digunakan?

    3. Tidak, Jekyll mudah digunakan dan memiliki dokumentasi yang lengkap.

  3. Apakah kita harus mengerti tentang template dan markup language untuk menggunakan Jekyll?

    4. Disarankan mengerti, tapi jika belum, bisa belajar melalui dokumentasi Jekyll atau tutorial online.

6. Menggunakan Bootstrap

Bootstrap adalah framework CSS yang memudahkan pembuatan website dengan tampilan responsif dan menarik. Bootstrap sudah menyediakan template dan komponen yang siap pakai, sehingga kita tidak perlu membuat dari awal. Caranya, download file Bootstrap di situs resminya, lalu ekstrak dan salin file CSS dan JS ke repository kita. Setelah itu, tambahkan kode berikut di file index.html:

<link rel=”stylesheet” href=”bootstrap.min.css”>

<script src=”bootstrap.min.js”></script>

Setelah itu, kita bisa menggunakan class-class Bootstrap untuk membuat tampilan website lebih menarik dan responsif.

FAQ:

  1. Apakah Bootstrap gratis?

    2. Ya, Bootstrap gratis dan open-source.

  2. Apakah kita harus mengerti tentang CSS untuk menggunakan Bootstrap?

    3. Disarankan mengerti, tapi jika belum, bisa belajar melalui dokumentasi Bootstrap atau tutorial online.

  3. Apakah Bootstrap hanya bisa digunakan untuk website statis?

    4. Tidak, Bootstrap bisa digunakan untuk website dinamis seperti web app.

7. Menggunakan Hugo

Hugo adalah platform yang mirip dengan Jekyll, tetapi menggunakan bahasa pemrograman Go. Hugo juga memungkinkan pembuatan website statis dengan lebih mudah dan cepat. Caranya, download file Hugo di situs resminya, lalu ekstrak dan salin file executable ke repository kita. Setelah itu, buat file config.toml dengan kode berikut:

Baca Juga :  Cara Migrasi WordPress ke Hosting Baru

baseURL = “https://nama-domain-kita.com/”languageCode = “en-us”title = “Judul Website”theme = “ananke”

Setelah itu, buat file index.md dengan kode berikut:

—title: “Selamat Datang di Website Saya!”date: 2021-08-01T18:00:00+08:00draft: false—Ini adalah website statis yang di-hosting di Github.

Setelah selesai, klik tombol “Commit new file” untuk menyimpan perubahan. Setelah itu, website kita akan menggunakan tema Hugo dan bahasa pemrograman Markdown.

FAQ:

  1. Apakah Hugo gratis?

    2. Ya, Hugo gratis dan open-source.

  2. Apakah Hugo lebih cepat daripada Jekyll?

    3. Ya, Hugo lebih cepat karena menggunakan bahasa pemrograman Go yang lebih efisien.

  3. Apakah kita harus mengerti tentang bahasa pemrograman Go untuk menggunakan Hugo?

    4. Tidak harus, tapi jika ingin membuat tema custom, disarankan mengerti.

8. Menggunakan Gatsby

Gatsby adalah platform yang memungkinkan pembuatan website statis dengan menggunakan React.js. Gatsby juga memiliki fitur yang memudahkan optimasi performa website, seperti preloading dan code splitting. Caranya, install Gatsby CLI di komputer kita, lalu buat new site dengan perintah “gatsby new nama-site”. Setelah itu, buka folder nama-site, lalu jalankan perintah “gatsby develop” untuk melihat hasil website kita di browser.

FAQ:

  1. Apakah Gatsby gratis?

    2. Ya, Gatsby gratis dan open-source.

  2. Apakah kita harus mengerti tentang React.js untuk menggunakan Gatsby?

    3. Disarankan mengerti, tapi jika belum, bisa belajar melalui dokumentasi React.js atau tutorial online.

  3. Apakah Gatsby cocok untuk website yang kompleks?

    4. Ya, Gatsby cocok untuk website yang kompleks seperti web app.

9. Menggunakan Netlify

Netlify adalah platform yang memungkinkan hosting website statis dengan fitur-fitur yang lebih lengkap seperti form handling, serverless functions, dan integrasi dengan CMS. Netlify juga menyediakan fitur deployment otomatis dari repository Github atau Gitlab. Caranya, buat akun Netlify, lalu pilih “New site from Git” dan pilih repository Github atau Gitlab kita. Setelah itu, Netlify akan melakukan proses build dan deployment secara otomatis.

FAQ:

  1. Apakah Netlify gratis?

    2. Ya, Netlify memiliki plan gratis dengan fitur yang cukup lengkap. Namun, untuk fitur-fitur lebih lanjut, perlu membayar biaya bulanan.

  2. Apakah Netlify cocok untuk website yang kompleks?

    3. Ya,

    Related video of Cara Hosting Menggunakan Github

Copyright 2024 LintasYogya