作品集連結不一定會在理想情境下被打開。招募方可能在手機上快速瀏覽，客戶可能從轉寄信件裡點開，面試官也可能在短時間內比較多位候選人的作品。
這個連結只有一個任務：讓作品容易被檢查。
對許多設計師、前端開發者、攝影師、文字工作者、動態設計師、學生、自由工作者與小型工作室來說，靜態作品集網站已經夠用。它可以放案例研究、大圖、線上 demo、原型、專案說明、原始碼連結、影片和聯絡方式，不需要自己維護後端服務。真正容易出問題的不是「怎麼託管」，而是上傳了錯誤資料夾、頁面太重，或使用看起來不夠正式的臨時網址。
作品集託管應該解決什麼
作品集不只是圖庫。它是讓別人判斷你的能力、角色與執行品質的證據頁面。
| 需求 | 實際意思 |
|---|---|
| 可控的身分 | 使用自己的網域，而不是只依賴平台個人頁。 |
| 完整的案例 | 展示背景、負責範圍、限制、過程、結果與證據。 |
| 視覺品質 | 依作品需要呈現圖片與媒體，而不是被統一壓進動態牆格式。 |
| 可檢查的成果 | 連到原型、靜態 demo、小型 Web app、文件或原始碼。 |
| 私密預覽 | 對未完成或敏感專案使用密碼保護，只給特定對象查看。 |
| 發佈安全 | 如果匯出、圖片路徑或專案頁出錯，可以替換或回復版本。 |
好的託管方式應該讓作品集可以從簡單頁面開始，之後再逐步成長為正式的職業網站。
靜態作品集還是架站工具？
作品集平台和架站工具都很方便，也適合快速上線。但如果作品集本身的結構、互動、效能和細節也會被評估，獨立的靜態網站會給你更多控制權。
| 方案 | 適合情境 | 取捨 |
|---|---|---|
| 作品集平台 | 快速上傳作品、社群曝光、視覺展示 | 結構、品牌、網址和互動控制有限。 |
| 架站工具 | 無程式碼編輯、範本、快速製作頁面 | 月費、匯出限制和平台綁定因產品而異。 |
| 靜態作品集 | 自訂設計、靜態匯出、程式作品、互動 demo | 需要自己管理檔案、素材和發佈流程。 |
對 UI 設計師來說，作品集本身就是介面樣本。對前端開發者來說，它可以是實作能力的 demo。對工作室來說，它可能是潛在客戶看到的第一個品牌接觸點。這種情況下，網站不應該只是別人平台裡的一個個人頁。
常見工具應該發佈哪個資料夾
最常見的錯誤是上傳了錯誤目錄。
| 工具或技術棧 | 通常發佈 | 上傳前檢查 |
|---|---|---|
| HTML/CSS/JS | 包含 index.html 的資料夾 | 確認圖片、字型、腳本和專案頁都在裡面。 |
| Framer export | 匯出的靜態資料夾 | 檢查素材路徑和響應式版面。 |
| Webflow export | 匯出的網站資料夾 | 確認自訂程式碼和表單行為。 |
| Vite | npm run build 後的 dist | 如果有巢狀路由，檢查 base path。 |
| React static build | build 或框架輸出目錄 | 測試 client-side routing 和素材路徑。 |
| Next static export | out | 只適用於可以靜態匯出的路由。 |
| Astro / Eleventy / Hugo / Jekyll | 產生後的 output 目錄 | 如果託管平台不執行 build，就不要上傳原始碼目錄。 |
Cloudflare Pages 的 Direct Upload 文件說明了如何上傳已建置好的素材或本機檔案。這對作品集很實用，因為很多作品集一開始就是完成的匯出資料夾，而不是完整的 CI 流程。
案例頁比首頁更能建立信任
首頁負責第一印象。真正建立信任的是每個專案頁。
| 問題 | 為什麼重要 |
|---|---|
| 這個專案解決了什麼問題？ | 讀者需要快速理解背景、目標使用者和限制。 |
| 你的負責範圍是什麼？ | 對方想知道你實際做了哪一部分。 |
| 你做了哪些判斷？ | 成品越精緻，過程與取捨越需要講清楚。 |
| 上線後有什麼變化？ | 指標、回饋、前後對比或經驗復盤能增加可信度。 |
| 可以在哪裡檢查？ | 連到 demo、原型、影片、原始碼或更詳細的說明。 |
每個專案頁不必一樣長。小型 CSS 實驗可能只需要幾段說明和一個 demo。產品改版可能需要完整案例。涉及客戶保密的專案，則更適合公開摘要加私密連結。
讓媒體有表現力，但不要拖慢頁面
作品集常常不是輸在作品本身，而是輸在頁面太重。
發佈前建議檢查：
- 依頁面實際顯示尺寸匯出圖片。
- 在工作流程允許時使用現代圖片格式。
- 壓縮影片，避免預設自動播放大型背景影片。
- 長圖集使用 lazy-load。
- 只有在必要時提供高解析原圖。
- 用手機和一般網路測試，不只在大螢幕上看。
上線後的流量分析可以幫你判斷問題。如果重點案例頁有人進入但很快離開，原因可能是敘事結構、媒體大小或行動版面，而不一定是作品品質。
正式使用時應該綁定自己的網域
預覽網址適合第一次檢查。但如果作品集用於求職、接案或長期展示，通常應該放在自己能掌控的網域上。
| 模式 | 範例 |
|---|---|
| 個人姓名 | alexchen.dev, maria.design |
| 工作室名稱 | northline.studio |
| 職能定位 | productdesigner.name, frontend.dev |
| 子網域 | work.example.com, portfolio.example.com |
自訂網域不只是看起來專業。它更容易記住，更適合放進履歷、電子郵件簽名和社群頁面，也更容易在未來更換工具時保留同一個地址。Google 也提供資料頁面結構化資料文件，協助搜尋引擎理解網站中的個人或機構資訊。這不是排名捷徑，但說明作品集值得被當作正式 Web 資產維護。
保護不適合公開的作品
作品集裡可能包含客戶名稱、未發佈產品截圖、內部指標、提案稿、團隊專案或受 NDA 約束的內容。
| 作品類型 | 較穩妥的發佈方式 |
|---|---|
| 已公開上線的專案 | 公開案例頁，包含圖片與連結。 |
| 獲准展示但有限制 | 公開摘要加密碼保護的詳細內容。 |
| NDA 或未發佈專案 | 隱去敏感資訊，或只提供私密預覽連結。 |
| 團隊專案 | 說明你的角色，並正確標註協作者。 |
| 數據指標 | 如果具體數字敏感，可以使用區間或定性結果。 |
密碼保護不能取代法律或合約審查。它只是控制存取範圍的實用層。如果專案有合約限制，發佈細節前應先取得許可。
作品集流量分析應該回答什麼
作品集分析不需要變成複雜儀表板。它應該回答幾個實際問題。
| 問題 | 有用訊號 |
|---|---|
| 有沒有人打開作品集？ | 訪問量、訪客、國家或地區、來源。 |
| 哪些作品最受關注？ | 熱門頁面和專案路徑。 |
| 招募方或客戶是否來自正確管道？ | LinkedIn、電子郵件、招聘網站或個人網域的來源。 |
| 網站是否太重？ | 頻寬、裝置、瀏覽器和行動端占比。 |
| 新版本是否破壞了頁面？ | 關鍵頁面訪問突然下降，或重複出現 404。 |
把作品集放進 PDF 履歷、LinkedIn 貼文、外聯郵件或提案時，可以使用 UTM 連結。這樣「有人點開過」就不只是猜測。
DeployPages 適合什麼情境
如果你的作品集是靜態網站或靜態匯出，並且希望從瀏覽器完成可控發佈，DeployPages 會比較適合。
你可以上傳 HTML 資料夾、ZIP、Framer export、靜態 build 產物、小型線上 demo、PDF 案例素材或完整作品集網站。隨著專案成長，同一個專案可以使用 自訂網域、流量分析、密碼保護、即時回復 和 CLI 部署。
如果你從作品集開始，可以使用 portfolio hosting。如果起點是履歷頁，可以參考 resume hosting。如果只是發佈 HTML 資料夾，HTML deployment guide 是最快路徑。
發佈前檢查清單
在公開分享作品集連結之前：
- 打開每個主頁面和重點案例頁。
- 檢查首頁 hero、圖集、說明文字和專案卡片的行動版效果。
- 壓縮圖片、影片、PDF 和不必要的匯出素材。
- 刪除
localhost、本機檔案路徑、占位文案和臨時專案名。 - 放置清楚的聯絡方式。
- 如果用於職業展示，綁定自訂網域。
- 對敏感作品做遮蔽處理或密碼保護。
- 測試 demo、原始碼、原型和外部媒體連結。
- 大改版前保留可回復的版本。
作品集不需要很大。它需要容易檢查、足夠快、真實說明你的角色，並且放在一個容易記住的地址上。