專為資訊安全初學者設計的 CTF 入門教學簡報，使用 Slidev 框架建置，涵蓋資安基礎概念、CTF 競賽介紹與實戰練習
這是一份關於「CTF 第一次接觸」的資訊安全教學簡報，由 @CXPh03n1x 製作。簡報旨在幫助初學者了解資訊安全領域的基礎知識，並透過 CTF（Capture The Flag）競賽和 Wargame 實戰來學習資安技能。
- 🎯 資安入門：介紹資訊安全核心概念與專業術語
- 🏁 CTF 啟蒙：了解 CTF 競賽模式與訓練方式
- ⚡ 實戰練習：透過 Natas Wargame 平台進行實作
- 📝 筆記習慣：培養撰寫 Writeup 的技術文件能力
- 資安三本柱（C.I.A）：機密性、完整性、可用性
- 風險評估概念：風險、弱點、漏洞的區別
- 駭客文化：駭客精神與道德準則
- 資安專業術語：OWASP、CVE、CWE、ATT&CK 等
- CTF 競賽類型：
- Jeopardy（解題模式）
- Attack & Defense（攻防模式）
- King of Hill（占地模式）
- Wargame 訓練：傳統闖關式學習
- Natas 平台介紹：OverTheWire 經典 Web 安全挑戰
- 實作練習：從 Natas 0 開始的 Web 安全實戰
- Writeup 撰寫：技術文件記錄與分享
- 簡報框架：Slidev v52.1.0
- 前端框架：Vue.js v3.5.18
- 主題樣式：@cxphoenix/slidev-theme-fhsh-aisp v1.2.0
- 互動擴充：slidev-addon-tldraw v0.4.2
- 字型支援：繁體中文（edukai, Noto Sans Traditional Chinese）
- 部署平台：Netlify / Vercel
git clone <repository-url>
cd ctf-first-touch# 推薦使用 pnpm
pnpm install
# 或使用 npm
npm installpnpm dev
# 或
npm run dev開啟瀏覽器前往 http://localhost:3030 即可預覽簡報。
pnpm build
# 或
npm run build├── slides.md # 簡報主要內容檔案
├── package.json # 專案配置與相依性
├── components/ # 自訂 Vue 元件
│ ├── CenterFlexBlock.vue # 置中彈性容器元件
│ ├── CustomToc.vue # 自訂目錄元件
│ └── GridBlock.vue # 格線佈局元件
├── public/ # 靜態資源目錄
│ ├── fonts/ # 字型檔案
│ ├── natas.png # Natas 平台截圖
│ └── level_2.png # Level 2 示範圖片
├── pages/ # 額外頁面（如果有）
├── snippets/ # 程式碼片段（如果有）
├── styles/ # 樣式檔案
├── netlify.toml # Netlify 部署配置
└── vercel.json # Vercel 部署配置
透過 GitHub Actions 自動部署：
- 在 repository 的 Settings > Pages
- 選擇 "GitHub Actions" 作為 source
- 推送程式碼後自動部署
- 連接你的 GitHub repository
- 專案會自動讀取
netlify.toml配置檔案 - 建置命令：
npm run build - 發布目錄：
dist
- 匯入 GitHub repository
- 專案會自動讀取
vercel.json配置檔案 - 支援自動 CI/CD
置中彈性佈局容器，用於內容居中顯示。
自訂目錄元件，自動生成簡報章節導覽。
<CustomToc />格線佈局元件，用於整齊排列多個內容區塊。
開發模式下支援即時預覽，修改 slides.md 後瀏覽器會自動重新載入。
pnpm dev --open # 自動開啟瀏覽器在瀏覽器中按 ? 鍵檢視所有快捷鍵：
f：全螢幕模式o：總覽模式d：深色模式切換g：跳轉到指定頁面
# 匯出為 PDF
pnpm export
# 匯出為 PNG (每頁一張)
pnpm export --format png
# 匯出為 PPTX
pnpm export --format pptx支援 TLDraw 手繪工具，可在簡報中進行即時繪製和標註。
- 建議在實際教學前先熟悉簡報內容與操作
- 可根據學員程度調整 Natas 練習的進度
- 鼓勵學員做筆記並分享 Writeup
- 跟隨簡報進度逐步學習資安概念
- 實際操作 Natas 平台練習
- 養成記錄學習過程的習慣
Q: 開發伺服器無法啟動
- 確保 Node.js 版本 ≥ 18.0
- 檢查 3030 port 是否被佔用
- 嘗試清除 node_modules 後重新安裝
Q: 字型顯示異常
- 檢查字型檔案是否正確載入
- 確認字型路徑設定正確
Q: 部署後圖片無法顯示
- 確認圖片檔案在 public 目錄中
- 檢查圖片路徑是否正確
- Node.js: ≥ 18.0
- 套件管理工具: npm、pnpm、或 yarn
- 瀏覽器: 支援現代 Web 標準的瀏覽器
本專案採用 CC BY 4.0 授權條款，詳見 LICENSE 檔案。
🎯 讓我們一起透過 CTF 踏入資訊安全的世界！