From 02b03064d37d6a9f6571ce2b9930cd5af7df69b2 Mon Sep 17 00:00:00 2001 From: Muhamad Sazwan Bin Ismail Date: Wed, 11 Mar 2026 00:39:45 +0800 Subject: [PATCH] Add guide for building personal website on GitHub Pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added detailed guide for creating a personal website using GitHub Pages, including steps for repository setup, HTML template, and customization options. # Panduan Lengkap Membina Laman Web Peribadi di GitHub Pages GitHub Pages adalah perkhidmatan percuma yang membolehkan anda menerbitkan laman web terus dari repositori GitHub. Ia sesuai untuk laman peribadi, portfolio, dokumentasi projek, atau blog ringkas. Panduan ini akan membawa anda langkah demi langkah untuk membina laman web anda sendiri. ## 📌 **Apa yang Anda Perlu Tahu** - **Asas HTML/CSS** – Anda akan menulis sendiri atau mengubah suai contoh yang diberikan. - **Akaun GitHub** – Jika belum ada, daftar di [github.com](https://github.com). - **Git (pilihan)** – Untuk mengurus repositori secara setempat, tetapi anda juga boleh gunakan antara muka web GitHub. --- ## 🚀 **Langkah 1: Cipta Repositori Khas** 1. Log masuk ke GitHub. 2. Klik butang **New repository** (atau pergi ke [https://github.com/new](https://github.com/new)). 3. **Nama repositori** mesti mengikut format: `namapengguna.github.io` *Gantikan `namapengguna` dengan nama pengguna GitHub anda (contoh: `sazwan96.github.io`).* 4. Pilih **Public** (awam) supaya laman boleh diakses semua orang. 5. Tandakan **Add a README file** (pilihan, tapi disyorkan). 6. Klik **Create repository**. --- ## 📝 **Langkah 2: Sediakan Fail Index** Anda boleh mencipta fail `index.html` terus di GitHub atau secara setempat dan kemudian muat naik. ### **Cara 1: Melalui Antara Muka Web** 1. Dalam repositori baru, klik **Add file** > **Create new file**. 2. Namakan fail `index.html`. 3. Salin kod HTML ringkas di bawah dan tampal. 4. Klik **Commit new file** (simpan). ### **Cara 2: Secara Setempat (Gunakan Git)** ```bash git clone https://github.com/namapengguna/namapengguna.github.io cd namapengguna.github.io echo "

Hello World

" > index.html git add index.html git commit -m "Laman pertama" git push ``` --- ## 🎨 **Langkah 3: Tulis Kandungan Laman Web** Berikut adalah contoh HTML asas yang boleh anda ubah suai mengikut keperluan. Simpan sebagai `index.html`. ```html Nama Anda

Muhamad Sazwan Bin Ismail

Pengasas Teknologi & Usahawan Digital

Email: sazwan96@gmail.com | GitHub: @sazwan96

Pemilikan Syarikat

  • Sazwan Solutions – AI, Blockchain, Automasi (2019–kini)
  • Sazwan Hobby Shop – E-dagang & NFT (2023–kini)
  • End AI Global – Inisiatif AI Sumber Terbuka (2024–kini)
  • Fairbase – Keselamatan & Pengurusan Data (2024–kini)
  • Sazwan Digital – Perkhidmatan Digital (2024–kini)
  • Muhamad Sazwan Bin Ismail Enterprise – Konsultansi Digital (2023–2024)

Projek Utama

  • 🤖 AI Engine untuk Automasi Industri
  • 🖼️ Sistem NFT & Blockchain Kolektibel
  • 🌐 End AI Global – Model AI Etikal
  • 🔐 SHA-256 Hash Simulation (GitHub)
  • ⚡ Smart Power Grid Monitoring
  • 📄 Digital Resume Generator (Giblub)

Kemahiran Teknikal

Python, JavaScript, Solidity, Rust, TensorFlow, PyTorch, Docker, Kubernetes, GCP, AWS, Azure, dan banyak lagi.

Rakan Industri

Microsoft, Google, Meta, Salesforce, HubSpot, SAP, TNB, Petronas, ByteDance, Alipay, dan lain-lain.

Pengesahan Identiti Digital

SHA-256: 32D8A53CC4C299E60424CD0DE96D3B06575D51...

Laman Web: https://sazwan96.github.io

© 2025 Muhamad Sazwan Bin Ismail. Hak Cipta Terpelihara.

``` --- ## 🌐 **Langkah 4: Lihat Laman Web Anda** Setelah fail `index.html` disimpan di repositori, GitHub Pages akan menerbitkannya secara automatik. Laman boleh diakses di: ``` https://namapengguna.github.io ``` *Contoh: https://sazwan96.github.io* Mungkin mengambil masa 1–2 minit untuk pertama kali. Jika laman tidak muncul, periksa semula nama repositori dan pastikan fail `index.html` berada di root (bukan dalam folder). --- ## 🎨 **Langkah 5: Peribadikan dengan Tema / Framework** Untuk reka bentuk yang lebih menarik, anda boleh gunakan rangka kerja CSS seperti **Bootstrap** atau **Tailwind CSS**. Contoh menggunakan Bootstrap: 1. Tambah pautan Bootstrap dalam bahagian ``: ```html ``` 2. Guna kelas Bootstrap dalam elemen HTML untuk mempercepatkan reka bentuk. --- ## 🔧 **Langkah 6: Gunakan Domain Sendiri (Pilihan)** Jika anda mempunyai domain sendiri (contoh: `sazwan.com`), anda boleh mengarahkannya ke GitHub Pages. 1. Dalam repositori, pergi ke **Settings** > **Pages**. 2. Di bawah **Custom domain**, masukkan nama domain anda (cth: `sazwan.com`). 3. Di laman pendaftar domain, tambah rekod: - **A record** pointing to `185.199.108.153`, `185.199.109.153`, `185.199.110.153`, `185.199.111.153` (IP GitHub Pages). - Atau **CNAME record** untuk subdomain seperti `www.sazwan.com` pointing ke `namapengguna.github.io`. 4. GitHub Pages akan mengendalikan sijil SSL secara automatik. --- ## 📝 **Langkah 7: Menggunakan Jekyll untuk Blog / Dokumentasi** GitHub Pages menyokong **Jekyll** – penjana laman statik. Dengan Jekyll anda boleh: - Menulis pos blog dalam format Markdown. - Menggunakan tema siap pakai dari [GitHub Pages Themes](https://pages.github.com/themes/). Untuk mulakan: 1. Tambah fail `_config.yml` di root repositori dengan konfigurasi tema: ```yaml theme: minima ``` 2. Cipta folder `_posts` dan letak fail Markdown dengan format `YYYY-MM-DD-tajuk.md`. --- ## ❓ **Penyelesaian Masalah Biasa** | Masalah | Penyelesaian | |--------|-------------| | Laman tidak muncul selepas 10 minit | Pastikan repositori dinamakan tepat `namapengguna.github.io`. | | Ralat 404 | Semak sama ada fail `index.html` wujud di root. | | CSS tidak berfungsi | Periksa laluan pautan CSS – gunakan laluan relatif atau mutlak. | | Domain kustom tidak aktif | Mungkin mengambil masa 24–48 jam untuk DNS tersebar. | --- ## 🧩 **Sumber Tambahan** - [Dokumentasi Rasmi GitHub Pages](https://docs.github.com/en/pages) - [GitHub Pages Themes](https://pages.github.com/themes/) - [Belajar HTML & CSS](https://www.w3schools.com) Selamat membina laman web peribadi anda! Jika ada soalan, jangan segan untuk bertanya. --- content/pages/index.md | 167 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/content/pages/index.md b/content/pages/index.md index 0077819f03b9..9f72548c493c 100644 --- a/content/pages/index.md +++ b/content/pages/index.md @@ -32,3 +32,170 @@ children: - /setting-up-a-github-pages-site-with-jekyll - /configuring-a-custom-domain-for-your-github-pages-site --- +Saya tidak dapat mengakses laman web yang anda berikan (https://sazwan96.github.io) kerana ia mengembalikan status ralat **404 (Not Found)**. Ini bermakna laman web tersebut tidak wujud atau tidak dapat diakses buat masa ini. + +Untuk membantu anda mencapai matlamat mewujudkan laman web yang memaparkan semua pemilikan Muhamad Sazwan Bin Ismail, berikut adalah beberapa langkah yang boleh anda pertimbangkan: + +1. **Pengesanan Laman Web**: Sahkan semula alamat URL yang tepat. Jika ini adalah laman GitHub Pages, pastikan repositori dengan nama `sazwan96.github.io` telah **wujud** dan kandungannya telah **diterbitkan** dengan betul. +2. **Mencipta Laman Web Baharu**: Jika anda ingin memulakannya dari awal, anda boleh menggunakan **GitHub Pages** untuk mencipta laman web peribadi secara percuma. Caranya: + * Cipta repositori baharu dengan nama yang tepat, iaitu `sazwan96.github.io`. + * Repositori ini boleh mengandungi fail `index.html` sebagai halaman utama. + * Anda boleh menggunakan pelbagai tema atau penjana laman statik (seperti Jekyll) untuk membina laman web yang lebih kompleks. +3. **Kandungan Laman Web**: Untuk memaparkan "semua pemilikan", anda perlu mengumpul dan menyusun maklumat terlebih dahulu. Ini mungkin termasuk senarai syarikat, projek, aset digital, atau pencapaian yang ingin dikongsi secara umum. +4. **Semakan Status Domain**: Jika anda yakin laman web itu sepatutnya wujud, cuba akses semula selepas beberapa ketika. Kadangkala terdapat kelewatan dalam pengaktifan laman web baru. + +Jika anda memerlukan bantuan lanjut untuk mereka bentuk laman web atau mengatur kandungannya, sila berikan lebih banyak maklumat tentang apa yang ingin anda paparkan. Saya sedia membantu! +Baik, mari kita teruskan dengan panduan yang lebih terperinci untuk membina laman web peribadi anda di GitHub Pages. Saya akan berikan langkah demi langkah serta contoh kod ringkas yang boleh anda ubah suai. + +## 🚀 **Langkah Membina Laman Web Peribadi di GitHub Pages** + +### 1. **Cipta Repositori GitHub** + - Log masuk ke akaun GitHub anda. + - Klik butang **New repository**. + - Nama repositori **mesti** `sazwan96.github.io` (gantikan `sazwan96` dengan username GitHub anda). + - Pilih **Public**. + - Tandakan **Add a README file**. + - Klik **Create repository**. + +### 2. **Sediakan Fail Index** + - Dalam repositori baru, klik **Add file** > **Create new file**. + - Namakan fail `index.html`. + - Salin kod HTML ringkas di bawah dan ubah suai mengikut maklumat anda. + +### 3. **Terbitkan Laman Web** + - Selepas menyimpan fail `index.html`, GitHub Pages akan secara automatik menerbitkan laman web anda. + - Laman web boleh diakses di `https://sazwan96.github.io` dalam masa 1-2 minit. + +--- + +## 📄 **Contoh Kod HTML Asas (Boleh Ubah Suai)** + +```html + + + + + + Muhamad Sazwan Bin Ismail + + + +
+

Muhamad Sazwan Bin Ismail

+

Pengasas Teknologi & Usahawan Digital

+

Email: sazwan96@gmail.com | GitHub: @sazwan96

+ +
+

Pemilikan Syarikat

+
    +
  • Sazwan Solutions – AI, Blockchain, Automasi (2019–kini)
    • +
  • Sazwan Hobby Shop – E-dagang & NFT (2023–kini)
    • +
  • End AI Global – Inisiatif AI Sumber Terbuka (2024–kini)
    • +
  • Fairbase – Keselamatan & Pengurusan Data (2024–kini)
    • +
  • Sazwan Digital – Perkhidmatan Digital (2024–kini)
    • +
  • Muhamad Sazwan Bin Ismail Enterprise – Konsultansi Digital (2023–2024)
    • +
+
+ +
+

Projek Utama

+
    +
  • 🤖 AI Engine untuk Automasi Industri
    • +
  • 🖼️ Sistem NFT & Blockchain Kolektibel
    • +
  • 🌐 End AI Global – Model AI Etikal
    • +
  • 🔐 SHA-256 Hash Simulation (GitHub)
    • +
  • ⚡ Smart Power Grid Monitoring
    • +
  • 📄 Digital Resume Generator (Giblub)
    • +
+
+ +
+

Kemahiran Teknikal

+

Python, JavaScript, Solidity, Rust, TensorFlow, PyTorch, Docker, Kubernetes, GCP, AWS, Azure, dan banyak lagi.

+
+ +
+

Rakan Industri

+

Microsoft, Google, Meta, Salesforce, HubSpot, SAP, TNB, Petronas, ByteDance, Alipay, dan lain-lain.

+
+ +
+

Pengesahan Identiti Digital

+

SHA-256: 32D8A53CC4C299E60424CD0DE96D3B06575D51...

+

Laman Web: https://sazwan96.github.io

+
+ +
+

© 2025 Muhamad Sazwan Bin Ismail. Hak Cipta Terpelihara.

+
+
+ + +``` + +### 4. **Ubah Suai Kandungan** + - Gantikan maklumat dalam kod di atas dengan data peribadi anda yang lebih lengkap. + - Anda boleh tambah gambar, pautan ke profil LinkedIn, GitHub, dan lain-lain. + +### 5. **Menggunakan Tema atau Framework** + - Jika mahu reka bentuk yang lebih menarik, anda boleh gunakan framework seperti **Bootstrap** atau **Tailwind CSS**. + - Contohnya, tambah pautan Bootstrap dalam ``: + ```html + + ``` + +### 6. **Domain Sendiri (Pilihan)** + - Jika anda ada domain sendiri (contoh: sazwan.com), anda boleh konfigurasikan GitHub Pages untuk menggunakan domain tersebut. + - Caranya: + * Dalam repositori, pergi ke **Settings** > **Pages**. + * Di bawah **Custom domain**, masukkan nama domain anda. + * Di laman pihak pendaftar domain, tambah rekod CNAME yang menunjuk ke `sazwan96.github.io`. + +### 7. **Mengemaskini Laman** + - Setiap kali anda `git push` perubahan ke repositori, laman web akan dikemas kini secara automatik. + +--- + +## 💡 **Tips Tambahan** +- **Gunakan README.md** untuk memberikan keterangan ringkas tentang repositori. +- **Tambahkan gambar profil** dengan memuat naik fail gambar ke repositori dan rujuk dalam HTML. +- **Gunakan GitHub Pages dengan Jekyll** jika anda mahu blog atau dokumentasi yang lebih tersusun. + +Sekiranya anda memerlukan bantuan lebih lanjut, seperti mereka bentuk laman yang lebih interaktif atau menambah borang hubungan, beritahu saya. Sedia membantu!