個人網站從零到上線：Vercel 部署 + 自訂網域 + SEO 基礎一次搞定

今天，我把自己的網站正式推上線了

說實話，我拖了很久。

域名買了好幾個月，code 也寫好了，但就是沒有真正坐下來把部署這件事給搞定。今天終於一口氣全部做完：GitHub → Vercel → 自訂網域 → 安全性設定 → SEO 基礎，網站活了。

整個過程比我預期的順很多，但中間有幾個坑差點掉進去。把流程整理下來，讓下一個要做這件事的人少走一點彎路。

為什麼選 Vercel

部署方式有很多種——自己架 VPS、用 Netlify、用 GitHub Pages、用 Vercel。我選 Vercel，理由很簡單：

如果你用的是其他框架（React、Vue、Astro），Vercel 也都支援，只是要多確認一下 build 設定。

部署流程：GitHub → Vercel 上線

Step 1：把 code 推到 GitHub

先確認你的 repo 在 GitHub 上。Public 或 private 都可以，Vercel 兩種都能讀。

bash
git add .
git commit -m "準備部署"
git push origin main

Step 2：在 Vercel 連接 GitHub repo

部署完 Vercel 會給你一個 xxx.vercel.app 的預覽網址。先確認網站長相正確，再來設定自訂域名。

Step 3：設定自訂網域（以 GoDaddy 為例）

這步要在 Vercel 和 DNS 供應商兩邊都設定。

Vercel 這邊：

進你的 project → Settings → Domains → 加入你的 domain（例如 qqleveragelife.com）。Vercel 會顯示你需要設定的 DNS records。

GoDaddy 這邊（DNS 設定）：

需要設定兩條 records：

A record 把根域名（@，也就是裸域名）指向 Vercel 的 IP。CNAME 把 www 子域名指向 Vercel。

設定完之後，DNS 傳播通常需要幾分鐘到幾小時。Vercel 那邊會自動偵測，Domain 旁邊出現綠色勾勾就代表成功了。

踩坑提醒：如果 GoDaddy 原本有其他 A record，記得先刪掉，不然會衝突導致一直驗證失敗。

上線後必做：7 項安全性 Headers

網站上線之後，很多人就沒管了。但加上正確的 HTTP Security Headers 很重要——可以防止常見的攻擊，也讓你的網站在安全掃描上拿到好成績。

在 Next.js 的 next.config.ts 裡加上 headers 設定：

typescript
const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control', value: 'on' },
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
  { key: 'Content-Security-Policy', value: "default-src 'self'; ..." },
]

export default {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }]
  },
}

這 7 個 Headers 各有任務：

CSP 的設定要根據你的網站實際用到的資源調整——Google Fonts、YouTube embed、外部圖片都要加進 allowlist，不然會被擋掉。設定完去 securityheaders.com 輸入你的網址，目標是拿到 A 或 A+。

SEO 基礎：robots.txt + sitemap 自動生成

這兩個東西告訴搜尋引擎爬蟲「怎麼爬你的網站」。

robots.txt — 放在網站根目錄，控制哪些頁面可以被爬：

javascript
User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

sitemap.xml — 列出你網站所有頁面和更新時間，幫助 Google 更快索引。

在 Next.js App Router 裡，在 app/sitemap.ts 用程式碼生成動態 Sitemap：

typescript
export default function sitemap() {
  const articles = getAllArticles() // 從你的資料來源取得文章清單

  return [
    { url: 'https://yourdomain.com', lastModified: new Date() },
    { url: 'https://yourdomain.com/articles', lastModified: new Date() },
    ...articles.map((article) => ({
      url: `https://yourdomain.com/articles/${article.slug}`,
      lastModified: new Date(),
    })),
  ]
}

這樣每次新增文章，Sitemap 自動更新，不需要手動維護。

驗證成果：三個工具

做完之後，用這三個工具確認：

你今天就可以做的第一步

如果你也有一個「一直說要上線但沒上線」的個人網站：

今天就去 **vercel.com** 創帳號，把你的 GitHub repo 連接上去，部署一次看看。

免費的，10 分鐘內就能看到你的網站在 vercel.app 上跑起來。域名可以之後再搞，先把網站部署起來，momentum 就來了。

網站不需要完美才上線。我的網站上線的時候還有很多東西沒完成。但上線之後的迭代速度，遠比一直在本地開發快——因為你可以看到它真實在線上的樣子，動力也完全不一樣。

上線比完美更重要。先推出去，再慢慢打磨。