Cursor實踐項目-16-用Cursor快速開發社交媒體圖片工具：從構思到上線全流程指南(四) — 域名購買+github+vercel+cloudflare->網站線上發佈

項目說明

從零到上線：用域名 + GitHub + Vercel + Cloudflare，在 2 小時內把你的網站發佈到互聯網上。

你將完成：選/綁定域名 → 推代碼到 GitHub → Vercel 自動構建發佈 → 配好 DNS 與 HTTPS，一條龍搞定。

核心思路：只專注寫代碼，其它交給自動化流水線；提交即觸發部署，更新即上線，出錯可一鍵回滾。

最終結果：用你的專屬域名，全球可訪問、全站 HTTPS 的在線網站。

預計投入：約 2 小時，零基礎也能跟上。

成果展示

網站已上架：pixtoolkits.com

pixtoolkits.com

前置準備

Cursor
- 版本：1.3.9
- cursor rules: https://cursorpractice.com/zh/cursor-tutorials/prompts/system-prompts
- agent: claude-4-sonnet-thinking、GTP-5
- project rules: ./cursorpractice-06-10xUse.md
可選：Gemini CLI
- 安裝：npm install -g @gemini-cli/gemini
- 使用：gemini --help

為什麼選擇這種模式

各組件職責與優勢：GitHub（協作與版本）、Vercel（零配置部署與邊緣能力）、Cloudflare（全球 DNS 與安全）。
省心省力：寫完代碼推到 GitHub，網站會自動構建並上線，不用管服務器。
省錢：三者都有免費額度，個人或小團隊就能用起來。
打開更快：全球加速，國內外訪問都更順暢。
更安全：全站 HTTPS，基礎防護開箱即用。
好協作：多人修改有記錄，有預覽地址，出問題可一鍵回滾。
可遷移：域名放在 Cloudflare 管理，後續更換託管平台不受限制。
小提醒：
- 首次綁定域名和證書，通常要等幾分鐘到數小時生效。
- 圖片/頁面可以緩存，接口或實時數據不要強制緩存。
- 如果發佈後有異常，可以快速回退到上個版本。

整體流程

域名註冊；
github 創建倉庫
cursor編輯代碼，綁定並提交github倉庫
vercel註冊並初始化項目，綁定github倉庫
綁定域名、設置DNS、自動生成https證書
瀏覽器打開域名，進行訪問

項目詳細步驟

1) 域名註冊

域名服務有好多服務商提供，我選擇的是namesilo，網址：www.namesilo.com/
讓cursor基於項目的功能，幫你推薦幾個域名，然後輸入域名去確認是否可以採購
pixtoolkits.com 可以購買，選擇並支付

2) github倉庫建立

註冊github
新創建一個倉庫，右上角+下拉選擇“New repository”
輸入倉庫名稱，可以和你的域名一致，可以選擇公開或者私有，私有就只有你自己可以訪問。
然後這裡就獲取到你倉庫的鏈接地址，點擊複製

3) cursor編輯代碼，綁定並提交github倉庫

如圖，git標誌那邊選擇...，下拉選擇“遠程”->"添加遠程存儲庫"->輸入地址、輸入倉庫名稱
可能會提醒你做一次認證，根據需求認證，如果不明白就讓cursor來處理
綁定成功後，進行一次代碼推送，左邊欄上面會顯示“提交”，下面會有本地的提交記錄和一個橙色的雲朵標誌，那個就是遠程倉庫的版本。

4) vercel註冊並初始化項目，綁定github倉庫

註冊vercel
登錄vercel，創建項目, “ADD NEW...”->"Project"
與github賬號進行綁定，根據提示進行認證，我這邊已經是認證狀態
在'Import Git repository'這裡選擇你的git倉庫名稱，會提示你沒有找到該倉庫，點擊下面'Confiure Github App'。
跳轉到github，在 setting-Applications-Repository access-選擇你要開放給三方的倉庫，開放之後在vercel那邊即可選擇。
重新回到vercel，這個時候就可以選中倉庫，點擊'Import'
進入新建項目界面，輸入項目名稱，點擊'Deploy'
部署過程可以查看，可能會有錯誤
把信息信息截圖，貼圖給cursor進行修復。
修復完成之後，直接讓cursor進行git提交，倉庫已經綁定，後續已經可以自動推動，自動部署。修復完成後，vercel提示部署成功。點擊進入控制台。

5) 綁定域名、設置DNS、自動生成https證書

下面進行域名的綁定，'Setting'-'Domains'-'ADD Domain'
輸入域名,我這邊是'pixtoolkits.com'，勾選將pixtoolkits.com轉為'www.pixtoolkits.com'。
這邊會有紅色的警告，是因為沒有ssl證書。需要去cloudflare進行設置
轉到cloudflare，註冊賬號之後，進入'Accout Home'-點擊'Onboard a domain'
輸入域名，選擇手動填寫DNS設置，點擊繼續，下一步這邊可以看到 nameservers的地址，這裡需要將這個地址填寫到你的域名服務商那邊。
回到namesilo，進入域名管理界面，點擊選擇你剛註冊的域名，填寫對應的NameServers。記得刪除多餘的NameServers 3.
回到cloudflare，過一會就可以看到你的域名旁邊顯示了一個綠色的'active'，表示DNS已經解析完成。
再次回到vercel，查看剛才的項目，點擊紅色警告的地方，不要點擊edit.複製vervel這邊項目部署的ip，準備填寫到cloudflare。
回到cloudflare，'DNS'-'Records'-選擇域名開始填寫-進行填寫後進行保存.
填寫完成後的效果
過一會，回到vercel就會看到已經沒有紅色的警告，提示SSL證書正在生成。
最後去cloudflare進行訪問模式的修改，'SSL/TLS'-'overview'-'configure'，進行設置，設置為'FULL(Strict)'

6) 瀏覽器打開域名，進行訪問

完成，打開瀏覽器，輸入域名 pixtoolkits.com
後續可以持續更新功能，自動推動代碼到git，然後你的網站也可以實時更新。

系列