Skip to content

Add guide for building personal website on GitHub Pages#43293

Open
Sazwanismail wants to merge 2 commits intogithub:mainfrom
Sazwanismail:patch-2
Open

Add guide for building personal website on GitHub Pages#43293
Sazwanismail wants to merge 2 commits intogithub:mainfrom
Sazwanismail:patch-2

Conversation

@Sazwanismail
Copy link

@Sazwanismail Sazwanismail commented Mar 10, 2026 •
edited
Loading

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.
  • 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).
  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)

git clone https://github.com/namapengguna/namapengguna.github.io
cd namapengguna.github.io
echo "<html><body><h1>Hello World</h1></body></html>" > 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.

<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nama Anda</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
        }
        .company {
            font-weight: bold;
            color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Muhamad Sazwan Bin Ismail</h1>
        <p><strong>Pengasas Teknologi & Usahawan Digital</strong></p>
        <p>Email: sazwan96@gmail.com | GitHub: @sazwan96</p>

        <div class="section">
            <h2>Pemilikan Syarikat</h2>
            <ul>
                <li><span class="company">Sazwan Solutions</span> – AI, Blockchain, Automasi (2019–kini)</li>
                <li><span class="company">Sazwan Hobby Shop</span> – E-dagang & NFT (2023–kini)</li>
                <li><span class="company">End AI Global</span> – Inisiatif AI Sumber Terbuka (2024–kini)</li>
                <li><span class="company">Fairbase</span> – Keselamatan & Pengurusan Data (2024–kini)</li>
                <li><span class="company">Sazwan Digital</span> – Perkhidmatan Digital (2024–kini)</li>
                <li><span class="company">Muhamad Sazwan Bin Ismail Enterprise</span> – Konsultansi Digital (2023–2024)</li>
            </ul>
        </div>

        <div class="section">
            <h2>Projek Utama</h2>
            <ul>
                <li>🤖 AI Engine untuk Automasi Industri</li>
                <li>🖼️ Sistem NFT & Blockchain Kolektibel</li>
                <li>🌐 End AI Global – Model AI Etikal</li>
                <li>🔐 SHA-256 Hash Simulation (GitHub)</li>
                <li>⚡ Smart Power Grid Monitoring</li>
                <li>📄 Digital Resume Generator (Giblub)</li>
            </ul>
        </div>

        <div class="section">
            <h2>Kemahiran Teknikal</h2>
            <p>Python, JavaScript, Solidity, Rust, TensorFlow, PyTorch, Docker, Kubernetes, GCP, AWS, Azure, dan banyak lagi.</p>
        </div>

        <div class="section">
            <h2>Rakan Industri</h2>
            <p>Microsoft, Google, Meta, Salesforce, HubSpot, SAP, TNB, Petronas, ByteDance, Alipay, dan lain-lain.</p>
        </div>

        <div class="section">
            <h2>Pengesahan Identiti Digital</h2>
            <p><strong>SHA-256:</strong> 32D8A53CC4C299E60424CD0DE96D3B06575D51...</p>
            <p><strong>Laman Web:</strong> <a href="https://sazwan96.github.io">https://sazwan96.github.io</a></p>
        </div>

        <footer>
            <p>© 2025 Muhamad Sazwan Bin Ismail. Hak Cipta Terpelihara.</p>
        </footer>
    </div>
</body>
</html>

🌐 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 <head>: html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  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.

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.

🧩 Sumber Tambahan

Selamat membina laman web peribadi anda! Jika ada soalan, jangan segan untuk bertanya.

Why:

Closes:

What's being changed (if available, include any code snippets, screenshots, or gifs):

Check off the following:

  • A subject matter expert (SME) has reviewed the technical accuracy of the content in this PR. In most cases, the author can be the SME. Open source contributions may require an SME review from GitHub staff.
  • The changes in this PR meet the docs fundamentals that are required for all content.
  • All CI checks are passing and the changes look good in the review environment.

@Sazwanismail
Add guide for building personal website on GitHub Pages
02b0306 
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 "<html><body><h1>Hello World</h1></body></html>" > 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
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nama Anda</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f4f4f4;
            color: github#333;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
        }
        .company {
            font-weight: bold;
            color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Muhamad Sazwan Bin Ismail</h1>
        <p><strong>Pengasas Teknologi & Usahawan Digital</strong></p>
        <p>Email: sazwan96@gmail.com | GitHub: @Sazwan96</p>

        <div class="section">
            <h2>Pemilikan Syarikat</h2>
            <ul>
                <li><span class="company">Sazwan Solutions</span> – AI, Blockchain, Automasi (2019–kini)</li>
                <li><span class="company">Sazwan Hobby Shop</span> – E-dagang & NFT (2023–kini)</li>
                <li><span class="company">End AI Global</span> – Inisiatif AI Sumber Terbuka (2024–kini)</li>
                <li><span class="company">Fairbase</span> – Keselamatan & Pengurusan Data (2024–kini)</li>
                <li><span class="company">Sazwan Digital</span> – Perkhidmatan Digital (2024–kini)</li>
                <li><span class="company">Muhamad Sazwan Bin Ismail Enterprise</span> – Konsultansi Digital (2023–2024)</li>
            </ul>
        </div>

        <div class="section">
            <h2>Projek Utama</h2>
            <ul>
                <li>🤖 AI Engine untuk Automasi Industri</li>
                <li>🖼️ Sistem NFT & Blockchain Kolektibel</li>
                <li>🌐 End AI Global – Model AI Etikal</li>
                <li>🔐 SHA-256 Hash Simulation (GitHub)</li>
                <li>⚡ Smart Power Grid Monitoring</li>
                <li>📄 Digital Resume Generator (Giblub)</li>
            </ul>
        </div>

        <div class="section">
            <h2>Kemahiran Teknikal</h2>
            <p>Python, JavaScript, Solidity, Rust, TensorFlow, PyTorch, Docker, Kubernetes, GCP, AWS, Azure, dan banyak lagi.</p>
        </div>

        <div class="section">
            <h2>Rakan Industri</h2>
            <p>Microsoft, Google, Meta, Salesforce, HubSpot, SAP, TNB, Petronas, ByteDance, Alipay, dan lain-lain.</p>
        </div>

        <div class="section">
            <h2>Pengesahan Identiti Digital</h2>
            <p><strong>SHA-256:</strong> 32D8A53CC4C299E60424CD0DE96D3B06575D51...</p>
            <p><strong>Laman Web:</strong> <a href="https://sazwan96.github.io">https://sazwan96.github.io</a></p>
        </div>

        <footer>
            <p>© 2025 Muhamad Sazwan Bin Ismail. Hak Cipta Terpelihara.</p>
        </footer>
    </div>
</body>
</html>
```

---

## 🌐 **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 `<head>`:
   ```html
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   ```
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.
@github-actions
Copy link
Contributor

github-actions bot commented Mar 10, 2026 •
edited
Loading

How to review these changes 👓

Thank you for your contribution. To review these changes, choose one of the following options:

A Hubber will need to deploy your changes internally to review.

Table of review links

Note: Please update the URL for your staging server or codespace.

The table shows the files in the content directory that were changed in this pull request. This helps you review your changes on a staging server. Changes to the data directory are not included in this table.

Source Review Production What Changed
pages/index.md fpt
ghec
ghes@ 3.20 3.19 3.18 3.17 3.16 3.15 3.14
fpt
ghec
ghes@ 3.20 3.19 3.18 3.17 3.16 3.15 3.14

Key: fpt: Free, Pro, Team; ghec: GitHub Enterprise Cloud; ghes: GitHub Enterprise Server

🤖 This comment is automatically generated.

@github-actions github-actions bot added the triage Do not begin working on this issue until triaged by the team label Mar 10, 2026
@Sazwanismail
Copy link
Author

Sazwanismail commented Mar 10, 2026

Uploading IMG-20251121-WA0003.jpg…

@Sazwanismail Sazwanismail marked this pull request as draft March 10, 2026 17:52
@Sazwanismail Sazwanismail marked this pull request as ready for review March 10, 2026 17:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

triage Do not begin working on this issue until triaged by the team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Sazwanismail