個人網站上線全記錄：Vercel 免費部署 + 自訂網域 + 7 項安全設定一次搞定

背景 / 為什麼聊這個

今天是個值得記錄的日子。qqleveragelife.com 正式上線了。

老實說，「架個人網站」這件事我拖了很久。不是不會，是覺得麻煩——選主機、設定 DNS、擔心安全性，每個步驟都有潛在的坑。但今天花了幾個小時，一口氣把部署、自訂網域綁定、安全性設定全部解決了。記錄下來給同樣在猶豫要不要建站的你。

重點是：全程費用接近零（網域費除外），而且快到不像話。

核心內容

第一步：把網站推上 GitHub

這是最基礎的動作。把你的專案推到 GitHub repository，Vercel 之後會直接從這裡拉取代碼並自動部署。

bash
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/你的帳號/你的專案.git
git push -u origin main

如果你已經在用 Git 管理代碼，這步直接跳過。

第二步：Vercel 一鍵部署

完成後你會拿到一個 your-project.vercel.app 的網址，網站已經活了。免費方案完全夠個人使用。

第三步：GoDaddy 綁定自訂網域（DNS 設定重點）

這一步很多人卡住，因為 DNS 術語讓人頭痛。其實只需要設兩筆記錄：

在 Vercel 的操作：

在 GoDaddy DNS 管理頁面新增這兩筆：

設定完後等 10-30 分鐘讓 DNS 傳播，你的自訂網域就能正常訪問了。

常見坑： GoDaddy 預設通常有一筆 @ 的 A Record 指向舊 IP，記得先刪掉再新增，否則會衝突。

第四步：7 項安全性 Headers（別跳過）

很多人網站上線後就停在這，忘了安全性設定。這些 Headers 能防止常見的 XSS、點擊劫持（Clickjacking）、MIME 類型混淆攻擊。

在 next.config.js 加入（Next.js 專案）：

javascript
const securityHeaders = [
  { 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: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  { key: 'X-XSS-Protection', value: '1; mode=block' },
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
  },
]

module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }]
  },
}

設定完 push 到 GitHub，Vercel 會自動重新部署。

用 securityheaders.com 免費掃描你的網站，確認每一項都通過。

第五步：robots.txt + sitemap.xml（SEO 基礎）

robots.txt（告訴搜尋引擎哪些頁面可以爬）：

javascript
User-agent: *
Allow: /
Sitemap: https://你的網域.com/sitemap.xml

sitemap.xml 推薦用 next-sitemap 套件自動生成，每次部署自動更新，不用手動維護。安裝後在 next-sitemap.config.js 設定你的網域就好。

我的觀點 / 實際應用

整個流程走完，最讓我驚訝的是 Vercel 把技術門檻拉得極低。5 年前建站要租 VPS、設定 Nginx、搞 SSL 憑證，現在這些 Vercel 全包了，而且免費。

DNS 傳播等待（10-30 分鐘）是唯一「被動等」的部分，其他每個步驟都能在幾分鐘內搞定。

可以直接複製的上線 checklist：

一句話總結

Vercel 把「部署個人網站」的技術門檻砍掉了 80%，剩下的 20% 是 DNS 設定和安全性 Headers——而這篇文章把那 20% 也解決了。