[工具應用] 002 GitHub Pages 教學：免費架設個人網站完整指南

前言

在上一篇文章中，我們學會了 Git 的基本操作。現在，讓我們把這些知識付諸實踐，使用 GitHub Pages 來架設一個完全免費的個人網頁。對資安人員來說，擁有一個個人網站不僅能展示你的技術能力和研究成果，更是建立專業形象的重要一步。

這篇教學將帶你從零開始，一步步完成網站的建置與部署。即使你沒有任何網頁開發經驗，也能在 30 分鐘內擁有自己的網站。

什麼是 GitHub Pages？

GitHub Pages 是 GitHub 提供的免費靜態網站託管服務。你只需要將 HTML、CSS、JavaScript 等檔案推送到特定的 GitHub 儲存庫，GitHub 就會自動將它們發布成一個可以公開訪問的網站。

GitHub Pages 的特點

完全免費：不需要支付任何託管費用，也不需要自己架設伺服器。

自動部署：每當你推送新的程式碼到儲存庫，網站就會自動更新。

支援自訂網域：除了預設的 username.github.io 網址，你也可以綁定自己購買的網域。

HTTPS 加密：GitHub Pages 預設提供 HTTPS，確保訪客與網站之間的連線安全。

整合 Jekyll：GitHub Pages 內建支援 Jekyll 靜態網站產生器，讓你可以用 Markdown 撰寫內容。

限制與注意事項

只能託管靜態網站（HTML、CSS、JS），不支援後端程式語言如 PHP、Python
儲存庫大小建議不超過 1GB
網站大小建議不超過 1GB
每月流量限制約 100GB
每小時最多建置 10 次

對於個人網站、作品集、技術部落格來說，這些限制綽綽有餘。

為什麼資安人員需要個人網站？

在資安領域，個人品牌和技術展示非常重要。一個專業的個人網站可以：

展示研究成果：發布你發現的漏洞、撰寫的技術分析、參與的 CTF 比賽記錄。

建立專業形象：比起只有一份 PDF 履歷，一個持續更新的技術網站更能展現你的熱情和能力。

分享學習筆記：記錄學習過程不僅幫助自己複習，也能幫助其他正在學習的人。

累積作品集：開發的工具、寫過的腳本、參與的專案，都可以在網站上統整展示。

建立人脈：當你分享有價值的內容，自然會吸引同領域的人關注和交流。

事前準備

在開始之前，請確保你已經完成以下準備：

註冊 GitHub 帳號：前往 https://github.com 註冊（如果還沒有的話）
安裝 Git：參考上一篇文章的安裝說明

設定 Git 身份：

git config --global user.name "你的名字"
git config --global user.email "你的GitHub註冊信箱"

準備一個文字編輯器：VS Code、Sublime Text、或任何你習慣的編輯器

方法一：最簡單的方式（純 GitHub 網頁操作）

如果你想先快速體驗，可以完全在 GitHub 網站上操作，不需要使用任何指令。

步驟 1：建立儲存庫

登入 GitHub，點擊右上角的「+」，選擇「New repository」
Repository name 填入：你的使用者名稱.github.io
- 例如你的帳號是 securityhacker，就填入 securityhacker.github.io
- 這個命名格式很重要，它會成為你的網站網址
選擇「Public」（必須是公開的）
勾選「Add a README file」
點擊「Create repository」

步驟 2：建立首頁

在儲存庫頁面，點擊「Add file」>「Create new file」
檔案名稱輸入：index.html
在編輯區輸入以下內容：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的資安研究站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        header {
            text-align: center;
            margin-bottom: 60px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 4px solid #0f3460;
            margin-bottom: 20px;
            background: #0f3460;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
            font-size: 60px;
        }

        h1 {
            color: #e94560;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .tagline {
            color: #a0a0a0;
            font-size: 1.2em;
        }

        .section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        h2 {
            color: #e94560;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #0f3460;
        }

        p {
            color: #d0d0d0;
            margin-bottom: 15px;
        }

        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .skill-tag {
            background: #0f3460;
            color: #e94560;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
        }

        .links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .links a {
            color: #e94560;
            text-decoration: none;
            padding: 12px 24px;
            border: 2px solid #e94560;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .links a:hover {
            background: #e94560;
            color: #1a1a2e;
        }

        .project {
            background: rgba(15, 52, 96, 0.5);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .project h3 {
            color: #e94560;
            margin-bottom: 10px;
        }

        .project p {
            margin-bottom: 0;
            font-size: 0.95em;
        }

        footer {
            text-align: center;
            color: #666;
            margin-top: 60px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="avatar">🔐</div>
            <h1>Your Name</h1>
            <p class="tagline">Security Researcher / Penetration Tester</p>
            <div class="links">
                <a href="https://github.com/yourusername" target="_blank">GitHub</a>
                <a href="https://linkedin.com/in/yourusername" target="_blank">LinkedIn</a>
                <a href="mailto:[email protected]">Email</a>
            </div>
        </header>

        <section class="section">
            <h2>About Me</h2>
            <p>
                嗨！我是一名對資訊安全充滿熱情的研究者。專注於 Web 應用程式安全、
                滲透測試以及漏洞研究。目前正在學習各種攻防技術，並記錄我的學習歷程。
            </p>
            <p>
                我相信分享知識能讓整個社群變得更強大，因此建立了這個網站來記錄我的
                研究成果和學習筆記。
            </p>
        </section>

        <section class="section">
            <h2>Skills</h2>
            <div class="skills">
                <span class="skill-tag">Web Security</span>
                <span class="skill-tag">Penetration Testing</span>
                <span class="skill-tag">Python</span>
                <span class="skill-tag">Linux</span>
                <span class="skill-tag">Network Security</span>
                <span class="skill-tag">OWASP Top 10</span>
                <span class="skill-tag">Burp Suite</span>
                <span class="skill-tag">Nmap</span>
            </div>
        </section>

        <section class="section">
            <h2>Projects</h2>
            <div class="project">
                <h3>🔍 Security Scanner</h3>
                <p>一個自動化的網站安全掃描工具，整合了多種檢測模組。</p>
            </div>
            <div class="project">
                <h3>📝 Vulnerability Writeups</h3>
                <p>記錄我在 CTF 比賽和實際滲透測試中發現的漏洞分析。</p>
            </div>
            <div class="project">
                <h3>🛠️ Pentest Toolkit</h3>
                <p>自己開發的滲透測試輔助腳本集合。</p>
            </div>
        </section>

        <section class="section">
            <h2>Recent Posts</h2>
            <div class="project">
                <h3>SQL Injection 攻擊手法詳解</h3>
                <p>深入解析 SQL Injection 的各種變形與防禦方式。</p>
            </div>
            <div class="project">
                <h3>如何開始學習滲透測試</h3>
                <p>給新手的滲透測試學習路線圖與資源推薦。</p>
            </div>
        </section>

        <footer>
            <p>© 2025 Your Name. Built with ❤️ and hosted on GitHub Pages.</p>
        </footer>
    </div>
</body>
</html>

在頁面下方的「Commit new file」區塊，輸入提交訊息如「Add index.html」
點擊「Commit new file」

步驟 3：啟用 GitHub Pages

在儲存庫頁面，點擊「Settings」
左側選單找到「Pages」
在「Source」區塊，選擇「Deploy from a branch」
Branch 選擇「main」，資料夾選擇「/ (root)」
點擊「Save」

步驟 4：查看你的網站

等待約 1-2 分鐘，GitHub 會自動部署你的網站。部署完成後，你可以在 Pages 設定頁面看到網站網址，或直接訪問：

https://你的使用者名稱.github.io

恭喜！你的第一個網站已經上線了！

方法二：使用 Git 指令（推薦）

對於長期維護網站來說，使用 Git 指令在本機編輯會更有效率。這也是實務上更常用的方式。

步驟 1：建立儲存庫

與方法一相同，先在 GitHub 網站上建立 你的使用者名稱.github.io 儲存庫。這次不需要勾選「Add a README file」。

步驟 2：Clone 到本機

git clone https://github.com/你的使用者名稱/你的使用者名稱.github.io.git
cd 你的使用者名稱.github.io

步驟 3：建立網站檔案

在這個資料夾中建立 index.html，可以使用上面提供的模板，或自己設計。

# 使用你喜歡的編輯器建立檔案
code index.html    # VS Code
# 或
nano index.html    # 終端機編輯器

步驟 4：提交並推送

# 查看狀態
git status

# 加入檔案
git add .

# 提交
git commit -m "Initial website setup"

# 推送到 GitHub
git push origin main

步驟 5：啟用 GitHub Pages

回到 GitHub 網站，按照方法一的步驟 3 啟用 GitHub Pages。

建立更完整的網站結構

一個基本的個人網站通常會有以下結構：

你的使用者名稱.github.io/
├── index.html          # 首頁
├── about.html          # 關於我
├── projects.html       # 專案作品
├── blog.html           # 部落格列表
├── contact.html        # 聯絡方式
├── css/
│   └── style.css       # 樣式檔
├── js/
│   └── main.js         # JavaScript
├── images/
│   ├── avatar.jpg      # 大頭照
│   └── ...             # 其他圖片
└── posts/
    ├── post1.html      # 文章1
    └── post2.html      # 文章2

建立共用的 CSS 檔案

將 CSS 獨立出來可以讓多個頁面共用相同的樣式：

mkdir css

建立 css/style.css：

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #e94560;
    --secondary-color: #0f3460;
    --bg-dark: #1a1a2e;
    --bg-light: #16213e;
    --text-light: #d0d0d0;
    --text-muted: #a0a0a0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-light);
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-light) 100%);
    min-height: 100vh;
}

/* Navigation */
nav {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 0;
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 100;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav a:hover,
nav a.active {
    color: var(--primary-color);
}

/* Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Typography */
h1, h2, h3 {
    color: var(--primary-color);
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
}

/* Cards */
.card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--primary-color);
    color: var(--bg-dark);
}

.btn-primary {
    background: var(--primary-color);
    color: var(--bg-dark);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary-color);
}

/* Footer */
footer {
    text-align: center;
    padding: 30px;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    h1 {
        font-size: 2em;
    }
}

建立導覽列模板

更新 index.html 加入導覽列：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁 - 我的資安研究站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html" class="active">首頁</a></li>
            <li><a href="about.html">關於我</a></li>
            <li><a href="projects.html">專案</a></li>
            <li><a href="blog.html">部落格</a></li>
            <li><a href="contact.html">聯絡</a></li>
        </ul>
    </nav>

    <div class="container">
        <!-- 頁面內容 -->
    </div>

    <footer>
        <p>© 2025 Your Name. Hosted on GitHub Pages.</p>
    </footer>
</body>
</html>

使用 Jekyll 建立部落格

如果你想要一個功能更完整的部落格，GitHub Pages 內建支援 Jekyll——一個靜態網站產生器，可以讓你用 Markdown 撰寫文章。

快速開始 Jekyll

在儲存庫根目錄建立 _config.yml：

title: 我的資安研究站
description: 記錄資安學習與研究的技術部落格
author: Your Name
email: [email protected]

# 主題設定
theme: minima

# 部落格設定
permalink: /blog/:year/:month/:title/
paginate: 5

# 社群連結
github_username: yourusername
twitter_username: yourusername
linkedin_username: yourusername

# Markdown 設定
markdown: kramdown
highlighter: rouge

建立 _posts 資料夾存放文章：

mkdir _posts

建立第一篇文章 _posts/2025-01-15-my-first-post.md：

---
layout: post
title: "我的第一篇資安學習筆記"
date: 2025-01-15
categories: [security, learning]
tags: [web-security, beginner]
---

## 前言

這是我的第一篇技術文章，記錄我學習 Web 安全的心得。

## OWASP Top 10 簡介

OWASP Top 10 是由開放式 Web 應用程式安全計畫（OWASP）發布的十大 Web 應用程式安全風險清單...

## SQL Injection 基礎

SQL Injection 是最常見的 Web 漏洞之一。攻擊者透過在輸入欄位中注入惡意的 SQL 語句...


# 有漏洞的程式碼範例
query = "SELECT * FROM users WHERE username = '" + user_input + "'"


### 防禦方式

1. 使用參數化查詢
2. 輸入驗證
3. 最小權限原則

## 結語

學習資安是一條漫長的路，但每天進步一點點，終究會有所成就。

注意文章檔名格式必須是 YYYY-MM-DD-title.md。

選擇 Jekyll 主題

GitHub Pages 支援多種 Jekyll 主題。你可以在 _config.yml 中設定：

# 官方支援的主題
theme: minima

# 或使用遠端主題
remote_theme: pages-themes/[email protected]

官方支援的主題包括：minima、architect、cayman、dinky、hacker、leap-day、merlot、midnight、minimal、modernist、slate、tactile、time-machine。

你也可以到 https://jekyllthemes.io 瀏覽更多第三方主題。

綁定自訂網域

如果你有自己的網域，可以將它綁定到 GitHub Pages。

步驟 1：設定 DNS

到你的網域 DNS 管理介面，新增以下記錄：

方式一：使用 CNAME（子網域）

類型: CNAME
名稱: www（或 blog 等子網域）
值: 你的使用者名稱.github.io

方式二：使用 A 記錄（頂級網域）

類型: A
名稱: @
值: 185.199.108.153
值: 185.199.109.153
值: 185.199.110.153
值: 185.199.111.153

步驟 2：設定 GitHub

在儲存庫根目錄建立 CNAME 檔案（無副檔名）：

www.yourdomain.com

到 Settings > Pages，在「Custom domain」欄位輸入你的網域
勾選「Enforce HTTPS」

DNS 設定生效可能需要數小時到 48 小時，請耐心等待。

進階技巧

使用 GitHub Actions 自動化

GitHub Actions 可以讓你在每次推送時自動執行任務，例如建置網站、檢查連結等。

建立 .github/workflows/pages.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

加入 Google Analytics

追蹤網站流量可以幫助你了解哪些內容最受歡迎。

到 Google Analytics 建立帳戶並取得追蹤 ID
在 <head> 標籤中加入追蹤程式碼：

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

加入留言功能

靜態網站本身無法處理留言，但可以整合第三方服務：

Giscus（推薦）：使用 GitHub Discussions 作為留言系統
– 免費、無廣告
– 支援 Markdown
– 需要 GitHub 帳號才能留言
– 設定教學：https://giscus.app

Disqus：老牌的留言系統
– 免費版有廣告
– 不需要 GitHub 帳號

SEO 優化

讓搜尋引擎更容易找到你的網站：

加入 meta 標籤：

<head>
    <meta name="description" content="資安研究員的技術部落格，分享滲透測試、漏洞研究等內容">
    <meta name="keywords" content="資安, 滲透測試, 漏洞研究, CTF">
    <meta name="author" content="Your Name">

    <!-- Open Graph for social sharing -->
    <meta property="og:title" content="我的資安研究站">
    <meta property="og:description" content="資安研究員的技術部落格">
    <meta property="og:image" content="https://yourusername.github.io/images/og-image.jpg">
    <meta property="og:url" content="https://yourusername.github.io">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
</head>

建立 sitemap.xml：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourusername.github.io/</loc>
    <lastmod>2025-01-15</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourusername.github.io/about.html</loc>
    <lastmod>2025-01-15</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

建立 robots.txt：

User-agent: *
Allow: /
Sitemap: https://yourusername.github.io/sitemap.xml

到 Google Search Console 提交你的網站

常見問題排解

網站沒有更新？

確認已經成功 push 到 GitHub
到 Settings > Pages 檢查部署狀態
清除瀏覽器快取或使用無痕模式
等待幾分鐘，GitHub 需要時間建置

出現 404 錯誤？

確認檔案名稱是 index.html（全小寫）
確認 Pages 設定的分支和資料夾正確
確認儲存庫是 Public

CSS 或圖片沒有載入？

檢查路徑是否正確
使用相對路徑（./css/style.css）或從根目錄開始的路徑（/css/style.css）
確認檔案已經被 commit 和 push

Jekyll 建置失敗？

檢查 _config.yml 格式是否正確
檢查文章的 front matter（—之間的 YAML）格式
到 Actions 頁面查看詳細錯誤訊息

實用資源

GitHub Pages 官方文件：https://docs.github.com/en/pages
Jekyll 官方文件：https://jekyllrb.com/docs/
免費圖示：https://fontawesome.com、https://heroicons.com
配色工具：https://coolors.co、https://colorhunt.co
免費圖片：https://unsplash.com（記得標註來源）

總結

透過這篇教學，你已經學會了：

什麼是 GitHub Pages 以及它的優缺點
兩種建立網站的方式（網頁操作和 Git 指令）
如何建立基本的網站結構和樣式
使用 Jekyll 建立部落格
綁定自訂網域
各種進階功能和 SEO 優化

現在，你可以開始打造屬於自己的資安研究站了！記住，網站的價值不在於外觀多華麗，而在於你持續分享的有價值內容。開始寫下你的第一篇技術文章吧！

下一步，你可以嘗試：
– 客製化網站設計
– 撰寫你的第一篇 CTF Writeup
– 分享你學習某個資安工具的心得
– 記錄你解決某個技術問題的過程

祝你架站順利！🚀

前言

什麼是 GitHub Pages？

GitHub Pages 的特點

限制與注意事項

為什麼資安人員需要個人網站？

事前準備

方法一：最簡單的方式（純 GitHub 網頁操作）

步驟 1：建立儲存庫

步驟 2：建立首頁

步驟 3：啟用 GitHub Pages

步驟 4：查看你的網站

方法二：使用 Git 指令（推薦）

步驟 1：建立儲存庫

步驟 2：Clone 到本機

步驟 3：建立網站檔案

步驟 4：提交並推送

步驟 5：啟用 GitHub Pages

建立更完整的網站結構

建立共用的 CSS 檔案

建立導覽列模板

使用 Jekyll 建立部落格

快速開始 Jekyll

選擇 Jekyll 主題

綁定自訂網域

步驟 1：設定 DNS

步驟 2：設定 GitHub

進階技巧

使用 GitHub Actions 自動化

加入 Google Analytics

加入留言功能

SEO 優化

常見問題排解

網站沒有更新？

出現 404 錯誤？

CSS 或圖片沒有載入？

Jekyll 建置失敗？

實用資源

總結

飛飛

相關文章

[資安工具] 006 VPN 完整指南：從入門到企業 VPN 選擇

[資安工具] 005 用 John the Ripper 破解密碼 Hash：從原理到實作全指南

[資安工具] 004 Mimikatz 初學者指南：Windows 資安評估與滲透測試入門

[資安工具] 003 SQLmap 介紹