個人部落格網站 - 完整教學範例
三種風格的提示詞、作品集網站程式碼與部署方法。
📝 提示詞範例(三種風格)
風格 1:簡約專業型(適合求職、商務)
請幫我建立一個專業的個人部落格網站:
網站架構:
1. 頂部導航列(固定):首頁、關於我、作品集、聯絡
2. 首頁區塊:
- 大型橫幅區:顯示姓名「李明華」和標語「全端工程師 | 熱愛創造美好的數位體驗」
- 個人照片(圓形頭像,尺寸 200x200px)
- 簡短介紹(3-4 行)
3. 關於我區塊:
- 詳細自我介紹(200 字)
- 技能標籤:JavaScript, React, Node.js, UI/UX Design
- 興趣愛好:閱讀、攝影、登山
4. 作品集區塊:
- 3 個作品卡片(圖片 + 標題 + 簡介 + 連結)
- 作品範例:
1. 電商網站設計 - 響應式購物網站
2. 任務管理 App - React 專案
3. 數據視覺化系統 - D3.js 應用
5. 聯絡區塊:
- Email:example@email.com
- GitHub:github.com/username
- LinkedIn:linkedin.com/in/username
- 社群媒體圖示連結
6. 頁尾:版權資訊、社群連結
設計風格:
- 配色:主色 #2C3E50(深藍灰)、輔助色 #3498DB(亮藍)、背景 #FFFFFF(白色)
- 字體:標題用粗體,內文用 16px 易讀字體
- 版面:現代簡約風格,每個區塊之間有明顯間隔
- 留白空間充足,視覺舒適
互動效果:
- 導航列固定在頂部,滑動時有陰影效果
- 點擊導航連結平滑捲動到對應區塊
- 按鈕和連結有 hover 效果(顏色變化)
- 作品卡片有陰影,hover 時會稍微放大
技術要求:
- 純 HTML + CSS(內嵌或使用 <style> 標籤)
- 響應式設計(手機、平板、電腦都能正常顯示)
- 程式碼有清楚註解
- 圖片使用 placeholder(之後可以替換)
- 使用語意化 HTML 標籤(header, nav, section, footer)風格 2:創意活潑型(適合設計師、創作者)
請幫我建立一個充滿創意的個人作品集網站:
網站架構:
1. 全螢幕首頁橫幅:
- 大標題:「創意無限 | 設計師 Sarah Chen」
- 動態漸層背景
- 向下箭頭指示
2. 個人介紹區:
- 照片(不規則形狀或圓形)
- 個性化自我介紹
- 標籤雲:平面設計、插畫、品牌視覺
3. 作品集(網格排列):
- 6 個作品展示
- 滑鼠移上去顯示標題和簡介
- 作品類型:Logo 設計、海報、插畫、包裝設計
4. 設計理念區:
- 分享設計哲學和工作方式
5. 聯絡表單:
- 簡單的聯絡欄位
- 社群媒體連結(Instagram、Behance、Dribbble)
設計風格:
- 配色:活潑的漸層色(粉色 #FF6B9D 到紫色 #C06C84)
- 大膽的排版、不對稱的版面
- 使用 emoji 和圖標
- 視覺元素豐富(形狀、線條)
互動效果:
- 滾動時有視差效果
- 作品集用 grid 排列,hover 時有遮罩效果
- 按鈕有動畫效果
技術要求:
- HTML + CSS,包含動畫效果
- 使用 flexbox 和 grid 排版
- 響應式設計
- 程式碼有註解風格 3:極簡文青型(適合作家、部落客)
請幫我建立一個極簡風格的個人部落格:
網站架構:
1. 簡潔頂部:
- 網站名稱「思想的角落」
- 簡單導航:文章、關於、聯絡
2. 首頁:
- 個人引言(一句話描述)
- 最新文章列表(3 篇)
- 每篇顯示:標題、日期、摘要
3. 關於頁面:
- 簡短的個人介紹
- 聯絡方式(Email、社群)
4. 頁尾:
- 簡單版權聲明
設計風格:
- 配色:黑 #000000、白 #FFFFFF、淡灰 #F5F5F5
- 字體:優雅的襯線字體(標題)、易讀的無襯線字體(內文)
- 大量留白
- 文字為主,少圖片
- 類似 Medium 的閱讀體驗
互動效果:
- 極簡的 hover 效果(底線出現)
- 平滑的過渡動畫
- 專注閱讀體驗
技術要求:
- 純 HTML + CSS
- 語意化標籤
- 響應式(行動裝置優先)
- 程式碼簡潔有註解💻 完整程式碼(簡約專業型)
portfolio.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;
}
html {
scroll-behavior: smooth; /* 平滑捲動 */
}
body {
font-family: -apple-system, BlinkMacSystemFont, '微軟正黑體', 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
background: #FFFFFF;
}
/* ==================== 頂部導航列 ==================== */
nav {
background: #2C3E50;
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
nav .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo {
font-size: 1.5rem;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
nav a:hover {
color: #3498DB;
}
/* ==================== 通用容器 ==================== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 80px 0;
}
h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #2C3E50;
text-align: center;
}
.section-subtitle {
text-align: center;
color: #7f8c8d;
margin-bottom: 3rem;
font-size: 1.1rem;
}
/* ==================== 首頁橫幅區 ==================== */
#hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 150px 20px 100px;
margin-top: 60px; /* 留空給固定導航列 */
}
#hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
animation: fadeInDown 1s;
}
#hero .tagline {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
animation: fadeInUp 1s;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 2rem auto;
display: block;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: fadeIn 1.5s;
}
#hero .intro {
max-width: 600px;
margin: 2rem auto;
font-size: 1.1rem;
line-height: 1.8;
}
/* ==================== 關於我區塊 ==================== */
#about {
background: #F8F9FA;
}
.about-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.about-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.8;
color: #555;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}
.skill-tag {
background: #3498DB;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 25px;
font-size: 0.95rem;
transition: transform 0.3s, box-shadow 0.3s;
}
.skill-tag:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
.interests {
margin-top: 2rem;
color: #7f8c8d;
font-style: italic;
}
/* ==================== 作品集區塊 ==================== */
#portfolio {
background: #FFFFFF;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.portfolio-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.portfolio-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.portfolio-content {
padding: 1.5rem;
}
.portfolio-content h3 {
color: #2C3E50;
margin-bottom: 0.5rem;
}
.portfolio-content p {
color: #7f8c8d;
margin-bottom: 1rem;
}
.portfolio-link {
display: inline-block;
color: #3498DB;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.portfolio-link:hover {
color: #2980b9;
}
/* ==================== 聯絡區塊 ==================== */
#contact {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
#contact h2 {
color: white;
}
.contact-info {
max-width: 600px;
margin: 2rem auto;
}
.contact-item {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
font-size: 1.1rem;
}
.contact-item i {
font-size: 1.5rem;
}
.contact-item a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.contact-item a:hover {
opacity: 0.8;
}
.social-links {
display: flex;
gap: 2rem;
justify-content: center;
margin-top: 3rem;
}
.social-links a {
color: white;
font-size: 2rem;
transition: transform 0.3s;
display: inline-block;
}
.social-links a:hover {
transform: scale(1.2);
}
/* ==================== 頁尾 ==================== */
footer {
background: #2C3E50;
color: white;
text-align: center;
padding: 2rem 0;
}
footer p {
margin: 0.5rem 0;
}
/* ==================== 動畫效果 ==================== */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== 響應式設計 ==================== */
@media (max-width: 768px) {
nav ul {
gap: 1rem;
}
#hero h1 {
font-size: 2rem;
}
#hero .tagline {
font-size: 1rem;
}
h2 {
font-size: 2rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
nav .logo {
font-size: 1.2rem;
}
nav ul {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<!-- ==================== 頂部導航列 ==================== -->
<nav>
<div class="container">
<div class="logo">李明華</div>
<ul>
<li><a href="#hero">首頁</a></li>
<li><a href="#about">關於我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">聯絡</a></li>
</ul>
</div>
</nav>
<!-- ==================== 首頁橫幅區 ==================== -->
<section id="hero">
<div class="container">
<h1>李明華</h1>
<p class="tagline">全端工程師 | 熱愛創造美好的數位體驗</p>
<!-- 個人照片(使用 placeholder)-->
<img src="https://placehold.co/200" alt="李明華" class="profile-img">
<p class="intro">
我是一位充滿熱情的全端工程師,專注於打造直觀、美觀且高效的網頁應用。
擁有 5 年的開發經驗,熟悉前端與後端技術,熱衷於學習新技術並解決複雜問題。
</p>
</div>
</section>
<!-- ==================== 關於我區塊 ==================== -->
<section id="about">
<div class="container">
<h2>關於我</h2>
<p class="section-subtitle">讓技術為生活帶來更多可能</p>
<div class="about-content">
<p>
我從大學時期開始接觸程式設計,從最初的網頁製作到現在的全端開發,
一直保持著對技術的好奇心與學習熱情。我相信好的產品不僅要功能完善,
更要注重使用者體驗和視覺設計。工作之餘,我喜歡參與開源專案、閱讀技術文章,
並且樂於分享自己的經驗與知識。
</p>
<h3 style="margin-top: 2rem; color: #2C3E50;">技能專長</h3>
<div class="skills">
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">HTML & CSS</span>
<span class="skill-tag">UI/UX Design</span>
<span class="skill-tag">Git</span>
</div>
<p class="interests">
💡 興趣愛好:閱讀、攝影、登山
</p>
</div>
</div>
</section>
<!-- ==================== 作品集區塊 ==================== -->
<section id="portfolio">
<div class="container">
<h2>作品集</h2>
<p class="section-subtitle">精選專案展示</p>
<div class="portfolio-grid">
<!-- 作品 1 -->
<div class="portfolio-item">
<img src="https://placehold.co/400x200/3498db/ffffff?text=E-Commerce" alt="電商網站">
<div class="portfolio-content">
<h3>電商網站設計</h3>
<p>
響應式購物網站,包含產品展示、購物車、結帳流程。
使用 React 和 Node.js 建構,注重使用者體驗與效能優化。
</p>
<a href="#" class="portfolio-link">查看專案 →</a>
</div>
</div>
<!-- 作品 2 -->
<div class="portfolio-item">
<img src="https://placehold.co/400x200/e74c3c/ffffff?text=Task+Manager" alt="任務管理 App">
<div class="portfolio-content">
<h3>任務管理 App</h3>
<p>
協作式任務管理工具,支援團隊成員即時同步。
採用 React 前端框架,Firebase 作為後端服務。
</p>
<a href="#" class="portfolio-link">查看專案 →</a>
</div>
</div>
<!-- 作品 3 -->
<div class="portfolio-item">
<img src="https://placehold.co/400x200/2ecc71/ffffff?text=Data+Visualization" alt="數據視覺化">
<div class="portfolio-content">
<h3>數據視覺化系統</h3>
<p>
企業數據分析與視覺化平台,將複雜數據轉換為直觀圖表。
使用 D3.js 和 Chart.js 建構互動式圖表。
</p>
<a href="#" class="portfolio-link">查看專案 →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== 聯絡區塊 ==================== -->
<section id="contact">
<div class="container">
<h2>聯絡我</h2>
<p class="section-subtitle" style="color: rgba(255,255,255,0.9);">歡迎與我交流合作</p>
<div class="contact-info">
<div class="contact-item">
<span>📧</span>
<a href="mailto:example@email.com">example@email.com</a>
</div>
<div class="contact-item">
<span>💼</span>
<a href="https://github.com/username" target="_blank">GitHub: @username</a>
</div>
<div class="contact-item">
<span>🔗</span>
<a href="https://linkedin.com/in/username" target="_blank">LinkedIn</a>
</div>
</div>
<div class="social-links">
<a href="#" title="GitHub">🐙</a>
<a href="#" title="LinkedIn">💼</a>
<a href="#" title="Twitter">🐦</a>
<a href="#" title="Instagram">📷</a>
</div>
</div>
</section>
<!-- ==================== 頁尾 ==================== -->
<footer>
<div class="container">
<p>© 2025 李明華 | 用 ❤️ 和 ☕ 打造</p>
<p>使用 Claude AI 協作開發</p>
</div>
</footer>
</body>
</html>🎨 客製化指南
修改 1:更換個人資訊
提示詞:
請把以下資訊替換成我的個人資料:
- 姓名:王曉華
- 標語:UI/UX 設計師 | 用設計說故事
- 自我介紹:[你的介紹文字]
- Email:your-email@example.com
- GitHub:github.com/your-username修改位置:
在 HTML 中搜尋並替換:
<h1>李明華</h1>→ 改成你的名字<p class="tagline">→ 改成你的標語<p class="intro">→ 改成你的介紹- 聯絡資訊區塊的連結和文字
修改 2:更換配色主題
提示詞範例:
暖色系(橘紅色):
請把配色改成暖色系:
- 主色:#E74C3C(紅色)
- 輔助色:#F39C12(橘色)
- 導航列和頁尾:深灰色 #34495E冷色系(青綠色):
請把配色改成清新的青綠色:
- 主色:#1ABC9C(青綠色)
- 輔助色:#16A085(深青綠)
- 保持白色背景修改位置(CSS):
/* 導航列背景 */
nav {
background: #E74C3C; /* 改成你要的顏色 */
}
/* 首頁橫幅漸層 */
#hero {
background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
}
/* 技能標籤顏色 */
.skill-tag {
background: #F39C12;
}
/* 聯絡區塊漸層 */
#contact {
background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
}修改 3:更換字體
提示詞:
請引入 Google Fonts 的 'Noto Sans TC' 字體,
讓整個網站使用這個更適合中文閱讀的字體修改方式:
- 在
<head>中加入:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">- 在 CSS 中修改:
body {
font-family: 'Noto Sans TC', sans-serif;
}修改 4:新增更多作品
提示詞:
請在作品集區塊再新增 3 個作品卡片:
1. 旅遊部落格 - 個人旅遊紀錄網站
2. 天氣查詢 App - 即時天氣資訊應用
3. 線上履歷產生器 - 快速建立專業履歷新增位置:
在 .portfolio-grid 內複製既有的 .portfolio-item 並修改內容:
<!-- 作品 4 -->
<div class="portfolio-item">
<img src="https://placehold.co/400x200/9b59b6/ffffff?text=Travel+Blog" alt="旅遊部落格">
<div class="portfolio-content">
<h3>旅遊部落格</h3>
<p>
記錄旅行足跡的個人部落格,包含遊記、照片集、旅行地圖。
使用響應式設計,在各種裝置上都能完美呈現。
</p>
<a href="#" class="portfolio-link">查看專案 →</a>
</div>
</div>
<!-- 繼續新增其他作品... -->修改 5:新增技能進度條(進階)
提示詞:
請把技能區塊改成進度條樣式,顯示每個技能的熟練度:
- JavaScript (90%)
- React (85%)
- Node.js (80%)
- UI/UX Design (75%)修改 HTML:
<div class="skills-progress">
<div class="skill-item">
<div class="skill-info">
<span>JavaScript</span>
<span>90%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span>React</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 85%"></div>
</div>
</div>
<!-- 繼續新增其他技能... -->
</div>新增 CSS:
.skills-progress {
max-width: 600px;
margin: 2rem auto;
}
.skill-item {
margin-bottom: 1.5rem;
}
.skill-info {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-weight: bold;
color: #2C3E50;
}
.progress-bar {
background: #E0E0E0;
border-radius: 10px;
height: 10px;
overflow: hidden;
}
.progress {
background: linear-gradient(90deg, #3498DB, #2980b9);
height: 100%;
border-radius: 10px;
transition: width 1s ease;
}修改 6:新增「最新文章」區塊(進階)
提示詞:
請在作品集和聯絡區塊之間新增一個「最新文章」區塊,
顯示 3 篇部落格文章預覽:
- 標題
- 發布日期
- 摘要(50 字)
- 「閱讀更多」按鈕新增 HTML(在 #contact 前面):
<section id="blog">
<div class="container">
<h2>最新文章</h2>
<p class="section-subtitle">分享技術心得與學習筆記</p>
<div class="blog-grid">
<!-- 文章 1 -->
<article class="blog-item">
<div class="blog-date">2025-01-15</div>
<h3>React Hooks 深入解析</h3>
<p>
深入探討 React Hooks 的運作原理,從 useState 到自訂 Hook,
帶你完整理解這個改變 React 開發方式的重要功能...
</p>
<a href="#" class="read-more">閱讀更多 →</a>
</article>
<!-- 文章 2 -->
<article class="blog-item">
<div class="blog-date">2025-01-10</div>
<h3>CSS Grid 實戰技巧</h3>
<p>
CSS Grid 是現代網頁排版的利器,本文分享 10 個實用技巧,
幫助你更有效率地建構響應式版面...
</p>
<a href="#" class="read-more">閱讀更多 →</a>
</article>
<!-- 文章 3 -->
<article class="blog-item">
<div class="blog-date">2025-01-05</div>
<h3>JavaScript 效能優化</h3>
<p>
介紹 JavaScript 效能優化的常見方法,包括程式碼分割、
懶加載、記憶化等技術,讓你的應用更快速...
</p>
<a href="#" class="read-more">閱讀更多 →</a>
</article>
</div>
</div>
</section>新增 CSS:
#blog {
background: #F8F9FA;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.blog-item {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.blog-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.blog-date {
color: #3498DB;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.blog-item h3 {
color: #2C3E50;
margin-bottom: 1rem;
}
.blog-item p {
color: #7f8c8d;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.read-more {
color: #3498DB;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.read-more:hover {
color: #2980b9;
}📚 教學指引(給講師)
教學流程建議
1. 展示不同風格(10 分鐘)
- 展示 3 種風格的範例網站
- 討論各種風格的適用場景
- 讓學員選擇自己喜歡的風格
2. 規劃內容(10 分鐘)
引導學員思考:
- 你想呈現什麼形象?
- 你有哪些作品或經歷可以展示?
- 你希望誰來看這個網站?(雇主、客戶、朋友)
準備素材:
- 個人照片(可用 placeholder 代替)
- 自我介紹文字
- 作品描述
- 聯絡方式
3. 撰寫提示詞(10 分鐘)
- 帶學員一起完成提示詞
- 強調要包含的元素:
- 網站架構
- 設計風格
- 互動效果
- 技術要求
4. 生成網站(10 分鐘)
- 在 Claude 中貼上提示詞
- 取得完整的 HTML 檔案
- 測試執行
5. 客製化修改(20 分鐘)
必做項目:
- 替換個人資訊(姓名、介紹、聯絡方式)
- 修改作品內容(至少 3 個作品)
- 調整配色(選擇適合自己的顏色)
選做項目:
- 新增更多區塊(技能、經歷、證書)
- 改變排版方式
- 加入額外互動效果
- 新增圖片或圖標
6. 測試與優化(10 分鐘)
- 測試所有連結
- 檢查在不同裝置上的顯示
- 確保文字沒有錯別字
- 最終潤飾
🎯 學習重點
學員應該學到:
網站架構規劃
- 資訊架構(IA)的概念
- 如何組織內容
- 導航設計的重要性
設計思維
- 配色原理
- 版面設計
- 視覺層級
- 使用者體驗考量
響應式設計
- 理解 RWD 的概念
- 為什麼手機版很重要
- 如何測試不同裝置
個人品牌
- 如何呈現專業形象
- 作品集的重要性
- 持續更新的必要性
🚀 延伸挑戰
課後可以嘗試:
難度 ⭐⭐
- 替換成真實的照片和圖片
- 新增更多頁面(每個作品獨立頁面)
- 加入真實的作品連結
難度 ⭐⭐⭐
- 新增聯絡表單(使用 Formspree 或 Google Forms)
- 整合 Google Analytics 追蹤訪客
- 加入深色模式切換功能
難度 ⭐⭐⭐⭐
- 連接後端 API 顯示動態內容
- 新增部落格系統(CMS)
- 加入多語言支援
🌐 部署指南
方法 1:GitHub Pages(免費、推薦)
- 註冊 GitHub 帳號
- 建立新的 Repository(例如:
my-portfolio) - 將 HTML 檔案改名為
index.html - 上傳到 Repository
- 在 Settings > Pages 啟用
- 你的網站網址:
https://username.github.io/my-portfolio
方法 2:Netlify(免費、更快速)
- 註冊 Netlify 帳號
- 拖曳你的 HTML 檔案到 Netlify
- 幾秒鐘後獲得網址
- 可以自訂網域名稱
方法 3:Vercel(免費、專業)
- 註冊 Vercel 帳號
- 連結 GitHub Repository
- 自動部署
- 每次更新程式碼自動重新部署
💡 常見問題
Q1:如何替換照片?
A:將 https://placehold.co/200 改成你的照片網址,或使用相對路徑(如 images/photo.jpg)。
Q2:如何改變網站寬度?
A:修改 .container 的 max-width 數值(預設 1200px)。
Q3:如何新增更多頁面?
A:建立新的 HTML 檔案(如 about.html),並在導航列加入連結。
Q4:如何加入 Google Analytics?
A:在 </head> 前加入 GA 追蹤碼。
📦 完整資源包
推薦的免費資源:
圖片:
- Unsplash(免費高品質圖片)
- Pexels(免費商用圖片)
圖標:
- Font Awesome(圖標字體)
- Ionicons(開源圖標)
字體:
- Google Fonts(免費網頁字體)
- 推薦中文字體:Noto Sans TC
配色工具:
- Coolors.co(配色生成器)
- Adobe Color(配色靈感)
範例版本: v1.0
測試環境: Chrome, Firefox, Safari
適用於: AI 協作開發工作坊
難度等級: 零基礎友善