網站效果預覽: https://preview.tangly1024.com/
1.NotionNext 架站教學：優勢、流程與要注意的地方
✅ NotionNext 的優點
- 省錢：完全免費、開源，零成本。
- 超簡單：只要在Notion寫文章，就會自動同步。
- 快速上線：部署在Vercel一鍵搞定。
- 專心創作：專心寫內容，不用分心管架站或維護。
- 外觀不錯：套件和佈景已設計好，直接有現成專業部落格。
⚠️ NotionNext 的限制與風險
- 客製化有限：想要大幅改版會麻煩。
- 依賴 Notion API：如果 Notion API 出現問題或變動，網站可能會受影響。
- 學習門檻：雖然簡單，但還是需要一點 GitHub/Vercel基礎，不然可能卡住。
- SEO不一定好：比起傳統的 WordPress專業架站工具，對SEO的控制項較少。
- 功能單一：適合單純書寫，如果你要商城、會員系統等複雜互動，就不適合。
「整體來看，NotionNext 在成本、上手難度與操作直覺性上都有優勢，特別適合只需要一個簡單能上線的網站的人。雖然在進階功能與高度客製化上有所限制，但對我目前的需求來說，已經是最合適的選擇。」
2.事前準備
- 申請notion的帳號，滿推薦使用學校email信箱申請，可獲得無限頁面（用來創建與管理內容）
- 註冊github帳號
- 註冊vercel帳號（建議直接以 GitHub 登入）
3.架站流程-模板>代碼>部署
部署站点只要三大步驟，分别是：
- 複製tangly1024的Notion模板
- 複製tangly1024的Github原始代碼
- 在Vercel中部署
STEP:1 複製Notion模板
- 登入自己的Notion後，複製下方的模板
- 右上角點擊duplicate，選擇自己想要存放的工作區，等待複製過去。
如何在Notion中複製NotionNext模板 - 將網頁發布並公開，後面會有32個字元的頁面ID，先存起來。
Notion的頁面ID一共有32個字元
STEP:2 複製Github原始代碼
- 點擊下方連結即可複製，不建議改名稱，不要變動專案名稱以避免後續配置錯誤
直接fork Github專案即可
STEP:3 建立Vercel項目
- 用Github賬號注冊登入
- Import git repository 的地方選擇 NotionNext
- 點擊Environment Variables，新增屬性 NOTION_PAGE_ID ，後方值輸入notion的32字元頁面ID
- 點擊Depoly，等待部署
STEP:4 頁面完成
- 點選DOMAINS就可以看到你的網站囉！
在Vercel中匯入GitHub專案，複製到Notion的頁面ID到Vercel 的環境變數設定中，並部署 NotionNext 網站
建議
老實說，用 NotionNext 架站真的比我想的還輕鬆。只要在 Notion 寫文章，它就會自動更新網站。Github 的程式碼不用亂動，放著跑就好。想更專業一點，可以綁上自己的網域，看起來會更正式。寫文章時順便加個封面和標題，分享出去比較漂亮。。
FAQ
Q1：NotionNext 是什麼？跟 Notion 有什麼不同？
NotionNext 是一個開源專案，透過 Notion 作為後台寫作，再用 GitHub + Vercel 部署網站，讓你用 Notion 筆記快速生成個人網站。
Q2：用 NotionNext 架站需要寫程式嗎？
不需要寫程式，只需會基本帳號註冊與部署操作。如果會一點 GitHub 更好，但跟著教學操作即可完成。
Q3：NotionNext 架的網站能做 SEO 嗎？
可以做基本SEO設定。雖然比WordPress等架站工具自由度稍低，但 NotionNext支援 sitemap、自訂 meta 標題與描述等。只要設定正確，Google仍可有效收錄內容。
<aside>
本篇文章參考https://docs.tangly1024.com/article/vercel-deploy-notion-next
</aside>
