Langsung ke konten utama

Cara Membuat Akun GitHub hingga Menerbitkan Website Secara Gratis

 Membuat Akun GitHub & Meng-host Website di GitHub Pages

( institut sains dan teknologi nasional )

        Halo pembaca! Di zaman digital seperti sekarang, memiliki website pribadi bukan lagi hal yang sulit. Bahkan, Anda bisa mempublikasikannya secara gratis hanya dalam hitungan menit. Pada panduan ini, kita akan belajar bersama cara membuat akun GitHub, mengelola repository, hingga meng-online-kan website menggunakan GitHub Pages. Semua langkah disusun dengan jelas agar Anda dapat mengikutinya dengan mudah, meskipun baru pertama kali mengenal GitHub.

Membuat Akun GitHub & Meng-host Website di GitHub Pages

1. Pengenalan singkat

GitHub: platform hosting repositori Git yang populer untuk kolaborasi pengembangan perangkat lunak.
GitHub Pages: layanan gratis dari GitHub untuk meng-host situs statis (HTML/CSS/JS). Ada dua tipe Pages:

  • User/Organization site — repo bernama username.github.io → satu situs utama (domain https://username.github.io).

  • Project site — situs untuk repo biasa (dipublikasikan dari branch gh-pages atau main/docs/).

2. Persiapan & Persyaratan

Sebelum mulai, siapkan:

  • Email aktif.

  • Nama pengguna GitHub yang ingin dipakai (unik).

  • File situs statis: paling minimal index.html. Bisa juga ada file CSS, JS, gambar, dll.

  • (Opsional tapi disarankan) Git terpasang di komputer, atau GitHub Desktop untuk antarmuka GUI.

Install Git (opsional CLI)

  • Windows: installer dari git-scm.com

  • macOS: brew install git atau Xcode Command Line Tools

  • Linux: sudo apt install git (Debian/Ubuntu) atau paket lain sesuai distro

3. Membuat Akun GitHub (langkah detil)

  1. Buka https://github.com

  2. Klik Sign up → isi email → Continue.

  3. Buat password kuat → Continue.

  4. Pilih username (akan menjadi https://github.com/username).

  5. Verifikasi (captcha) → GitHub mungkin kirim kode ke email → verifikasi.

  6. Selesaikan beberapa preferensi awal (opsional).

  7. Setelah berhasil, login.

Tips username: hindari spasi dan karakter khusus; nama akan berpengaruh pada URL GitHub Pages jika ingin memakai user site.

4. Struktur minimal situs statis

Letakkan file di root repository (untuk user site). Contoh struktur sederhana:

index.html
about.html
css/
  style.css
js/
  main.js
images/
  logo.png
README.md

Contoh index.html sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Website Saya</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header><h1>Halo, ini website pertama saya!</h1></header>
  <p>Selamat datang di situs yang dihosting di GitHub Pages.</p>
</body>
</html>

5. Membuat repository untuk User Site (metode GUI di web)

  1. Login → klik ikon + → New repository.

  2. Repository name: wajib username.github.io (ganti username dengan username GitHub-mu).

  3. Pilih Public.

  4. (Opsional) centang Add a README.

  5. Klik Create repository.

Catatan: Untuk Project site, kamu bisa gunakan nama repo bebas (mis. portfolio) lalu aktifkan Pages dari branch gh-pages/main/folder docs/.

6. Mengupload file website — 2 cara

A. Upload lewat browser (paling mudah)

  1. Buka repo → klik Add file → Upload files.

  2. Drag & drop file/folder situsmu.

  3. Isi pesan commit → Commit changes.

B. Menggunakan Git (CLI) — direkomendasikan untuk workflow

Contoh langkah lengkap:

# di folder proyek lokal
git init
git add .
git commit -m "Initial commit: website"
# set remote (ganti URL dengan repo-mu)
git remote add origin https://github.com/username/username.github.io.git
# jika branch default belum main, set dan push
git branch -M main
git push -u origin main

Jika menggunakan SSH, gunakan URL SSH: git@github.com:username/username.github.io.git.

7. Mengaktifkan GitHub Pages


Untuk user site (username.github.io) biasanya akan aktif otomatis setelah commit ke branch main. Namun untuk memastikan:

  1. Buka repo → Settings → tab Pages (atau di sidebar: Pages).

  2. Pada Source, pastikan dipilih main (atau master) dan folder / (root) atau gh-pages sesuai konfigurasi.

  3. Klik Save jika diubah.

  4. GitHub akan menampilkan URL publik (mis. https://username.github.io) dan status deployment.

Waktu propagasi: umumnya beberapa menit (kadang hingga 10 menit).

8. Menggunakan Project Site

Jika ingin host situs untuk repo biasa (misal untuk dokumentasi proyek):

  • Opsi 1: Buat branch gh-pages → push konten situs ke branch itu. Pages dapat memilih gh-pages sebagai source.

  • Opsi 2: Letakkan situs di folder docs/ pada branch main dan pilih main + folder /docs.

Contoh push ke gh-pages (cara sederhana):

git checkout --orphan gh-pages
git --work-tree build/ add --all
git --work-tree build/ commit -m "Deploy site"
git push origin HEAD:gh-pages --force
git checkout main

(Ini berguna bila kamu memiliki folder build/ dari generator statis).

9. Custom Domain (pakai domain sendiri)

  1. Beli domain di registrar (mis. Namecheap, Niagahoster, Cloudflare, dsb).

  2. Di GitHub repo → Settings → Pages → masukkan domain di Custom domain → Save.

  3. GitHub akan memberi instruksi DNS:

    • Untuk user site (root domain): arahkan A record ke IP GitHub Pages (contoh: 185.199.108.153, dsb). Gunakan empat IP GitHub Pages (lihat dokumentasi GitHub Pages untuk IP terkini).

    • Untuk subdomain (www): gunakan CNAME yang mengarah ke username.github.io.

  4. Setelah DNS berubah (propagasi DNS bisa 5 menit–48 jam), aktifkan HTTPS (GitHub menyediakan sertifikat gratis melalui Let's Encrypt). Centang Enforce HTTPS bila sudah tersedia.

Penting: IP GitHub Pages dapat berubah — cek dokumentasi GitHub untuk daftar IP terbaru sebelum mengonfigurasi A record.

10. Opsi Lanjutan: Static Site Generators (SSG)

GitHub Pages mendukung Jekyll secara built-in. Alternatif populer:

  • Jekyll (native di GitHub Pages)

  • Hugo

  • Gatsby (React)

  • Nuxt / Next (bisa butuh build & deploy via Actions)

Untuk SSG yang perlu proses build (Hugo, Gatsby), gunakan GitHub Actions untuk otomatisasi build lalu deploy ke branch gh-pages atau repo username.github.io.

Contoh workflow sederhana (.github/workflows/gh-pages.yml) untuk Node-based SSG:

name: Build and deploy
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

(Atur npm run build dan publish_dir sesuai SSGmu.)

11. File Penting dan Praktik Baik

  • .gitignore — hindari commit file build sementara, node_modules, dsb.

  • README.md — dokumentasi repo.

  • .nojekyll — jika menggunakan build yang menghasilkan folder _ (agar Jekyll tidak memproses).

  • CNAME — jika menggunakan custom domain (isi nama domain kamu; commit ke root repo).

Contoh .gitignore dasar:

node_modules/
dist/
.build/
.DS_Store

12. Troubleshooting Umum

  • Halaman tidak muncul / 404: pastikan index.html di root branch yang digunakan, dan Pages source sudah diset. Cek tab Pages untuk status deployment.

  • 404 setelah push: mungkin perlu menunggu beberapa menit. Jika masih, cek struktur file (index.html di root), cek branch yang dipilih.

  • HTTPS belum tersedia: tunggu hingga sertifikat TLS diterbitkan (bisa beberapa menit–jam). Pastikan DNS sudah benar jika pakai custom domain.

  • File statis tidak termuat (JS/CSS): pastikan path relatif benar. Jika memakai baseurl (Jekyll) atau situs di subpath (username.github.io/repo), atur baseURL dengan benar.

  • 500/Build failed (Jekyll): cek error build di halaman Actions atau Pages build log.

13. Contoh Cara Lengkap (dari nol) — CLI

  1. Buat folder lokal my-website → buat index.html.

  2. Inisialisasi Git:

cd my-website
git init
git add .
git commit -m "Initial commit"

  1. Buat repo di GitHub bernama username.github.io (atau lewat web).

  2. Tambahkan remote & push:

git remote add origin https://github.com/username/username.github.io.git
git branch -M main
git push -u origin main

  1. Pergi ke https://username.github.io setelah beberapa menit.

14. Perbandingan: GitHub Pages vs Layanan lain

  • GitHub Pages: gratis, mudah, cocok untuk situs statis & dokumentasi.

  • Netlify / Vercel: fleksibel, dukungan fungsi serverless, preview deploy, cocok untuk banyak SSG modern.

  • Firebase Hosting / AWS S3+CloudFront: lebih kompleks, skalabilitas tinggi.

Pilih GitHub Pages bila: ingin cepat, gratis, integrasi GitHub, dokumentasi proyek pribadi.

15. FAQ (Pertanyaan yang sering muncul)

Q: Bisa meng-host file dinamis (PHP)?
A: Tidak. GitHub Pages hanya untuk situs statis (HTML/CSS/JS). Untuk PHP atau server-side rendering, gunakan hosting lain (Netlify Functions, Vercel, VPS, dsb).

Q: Saya punya repo privat — bisa host Pages?
A: GitHub Pages untuk user/organization site memerlukan repo public untuk publik hosting gratis. (GitHub Enterprise/bersyarat bisa berbeda.)

Q: Bagaimana agar domain https://www.domain.com ke username.github.io?
A: Konfigurasikan CNAME atau A record sesuai instruksi GitHub Pages, lalu isi file CNAME di repo.

16. Checklist Ringkas (Cetak/Praktik)

  1. Buat akun GitHub.

  2. Siapkan file situs (index.html).

  3. Buat repo username.github.io.

  4. Upload file (browser atau git push).

  5. Cek Settings → Pages → pastikan source main/root.

  6. Buka https://username.github.io.

  7. (Opsional) Atur custom domain + DNS.

  8. (Opsional) Setup workflow GitHub Actions untuk build otomatis.

17. Contoh Pesan Commit & Konvensi

  • Gunakan pesan commit ringkas tapi informatif:

    • feat: add about page

    • fix: correct broken link on index

    • docs: update README

  • Gunakan branch feature untuk pengembangan fitur baru, lalu merge ke main.

18. Sumber Daya & Dokumentasi Resmi (rekomendasi baca)

  • Dokumentasi GitHub Pages (resmi) — baca untuk IP terbaru, instruksi CNAME, dan fitur HTTPS.

  • Panduan Git dasar (git-scm.com/book) untuk memahami branching dan push/pull.

  • Tutorial SSG (Jekyll, Hugo, Gatsby) bila ingin situs lebih dinamis.

19. Contoh Template Ringkas (paket file siap pakai)

Kamu bisa copy-paste ini ke file index.html dan css/style.css.

index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Portfolio — Nama Kamu</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <nav class="nav"><a href="/">Beranda</a> · <a href="/about.html">Tentang</a></nav>
  <main>
    <h1>Halo! Aku Nama Kamu</h1>
    <p>Selamat datang di website portofolio yang dihosting di GitHub Pages.</p>
  </main>
  <footer>© 2025 Nama Kamu</footer>
</body>
</html>

css/style.css:

body{font-family:system-ui,Arial,sans-serif;max-width:880px;margin:2rem auto;padding:0 1rem}
nav.nav{margin-bottom:1rem}
h1{font-size:2rem}
footer{margin-top:2rem;color:#666;font-size:.9rem}

20. Langkah Selanjutnya yang Disarankan (pilihan)

  • Buat repo template portofolio dan gunakan untuk versi personal.

  • Pelajari GitHub Actions untuk otomatisasi build-deploy.

  • Eksplor SSG (Hugo/Jekyll) untuk konten blog/publikasi.

  • Tambahkan analytics ringan (mis. Plausible, Google Analytics) jika perlu.

        Terima kasih telah mengikuti panduan ini hingga akhir. Semoga membantu dan menjadi langkah awal menuju kemampuan baru dalam pengelolaan website dan pengembangan teknologi. Teruslah berkarya dan berinovasi.

Komentar

Posting Komentar

Postingan populer dari blog ini

Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web

 Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web ( institut sains dan teknologi nasional )      Perkembangan teknologi kecerdasan buatan (Artificial Intelligence/AI) telah membawa perubahan signifikan dalam berbagai bidang, termasuk dalam pengembangan situs web. Salah satu inovasi yang menarik perhatian dalam beberapa tahun terakhir adalah hadirnya platform Emergent.sh , sebuah layanan berbasis AI yang memungkinkan pengguna membuat situs web atau aplikasi secara otomatis hanya dengan memberikan instruksi dalam bentuk teks. Platform ini menjadi contoh nyata bagaimana teknologi AI dapat berfungsi sebagai asisten digital yang menggantikan sebagian besar proses teknis yang sebelumnya harus dilakukan secara manual oleh seorang pengembang web. Secara konseptual, Emergent.sh bekerja berdasarkan pendekatan multi-agent system , yaitu sistem yang terdiri dari beberapa agen kecerdasan buatan yang memiliki peran dan tanggung jawab berbeda. Setiap agen berfungsi sepert...
Posting Komentar
Baca selengkapnya

Hari Pertama PKL di ISTN: Awal Perjalanan Seru!

         cerita hari pertama pkl di (ISTN)  institut sains dan teknologi nasional  Cerita Hari Pertama PKL      Hari pertama PKL akhirnya tiba. Sejak malam sebelumnya, perasaan gugup dan antusias bercampur jadi satu. saya bangun lebih awal dari biasanya, mempersiapkan pakaian rapi dan segala perlengkapan yang diperlukan. Tepat pukul 07.00, saya sudah berangkat menuju tempat PKL: (ISTN) institut sains dan teknologi nasional , sebuah kampus universitas yang bergerak di bidang pengajaran berbasis sains dan teknologi.      Sesampainya di sana, suasana kampus masih cukup tenang. saya disambut oleh satpam dengan ramah dan kami langsung diarahkan ke ruang administrasi. Tak lama kemudian, pembimbing lapangan kami, Pak Ariadi , datang dan mengajak kami ke lab komputer. Ia memperkenalkan saya pada tempat saya akan melakukan pkl  serta  beliau memberikan kesempatan untuk memperkenalkan diri kami masing-masing. Kegiatan dila...
Posting Komentar
Baca selengkapnya

Level Up! Keseruan Hari Kedua PKL di ISTN

  cerita aktifitas pkl di hari kedua ISTN  (institut sains dan teknologi nasional) cerita di hari kedua pkl dan aktivitasnya Cerita Hari Kedua PKL Hari kedua PKL terasa lebih sibuk dibandingkan hari pertama, tapi tetap penuh pengalaman baru. Pagi-pagi, saya sudah datang lebih awal untuk memastikan tidak ada yang terlewat. Begitu sampai, saya langsung bertegur sapa dan bertemu dengan rekan-rekan teman saya dan pembimbing. Kegiatan dimulai dengan melanjutkan pekerjaan yang sudah diberikan, tetapi kali ini saya mulai lebih paham alurnya. Pembimbing kami PAK ARIADI   memberikan arahan tambahan dan tips agar pekerjaan lebih cepat selesai tanpa mengurangi kualitas. Saya juga diberi kesempatan mencoba tugas baru yang diberikan, sehingga bisa menambah keterampilan. Di sela-sela pekerjaan, saya sempat berbincang dengan teman-teman PKL lainnya. Kami saling bertukar cerita tentang tugas masing-masing yang sudah diberikan, dan ternyata cukup banyak hal yang bisa dipelajari dari penge...
Posting Komentar
Baca selengkapnya