2025 必看！10 個免費架設網站平台與技術筆記平台推薦

為什麼你需要這些平台？

（因為「寫筆記」和「發佈筆記」是兩回事啊！）

當你學程式時，一定會遇到這些問題：

以下推薦的平台都能解決這些痛點，而且完全免費！

平台	免費方案	自訂程式碼	內建筆記功能	學習曲線	適合誰
Glitch	✓	✓	✗	低	想即時預覽程式碼效果
GitHub Pages	✓	✓	需搭配 Jekyll	中	想完全掌控程式碼
CodePen	✓	✓	需搭配 Markdown	低	前端片段測試與分享
Netlify Drop	✓	✓	✗	低	嫌 GitHub 太複雜的人
Replit	✓	✓	✓	中低	全端開發練習
Vercel	✓	✓	✗	中	想部署 Next.js 專案
Obsidian Publish	✗ (付費)	✗	✓	低	Markdown 筆記愛好者
Notion	✓	✗	✓	低	純文字筆記 + 簡單分享
StackBlitz	✓	✓	✗	中	Angular/React 開發者
Fleek	✓	✓	✗	中高	想玩 IPFS 分散式儲存

核心關鍵詞：Glitch 教學、即時程式碼協作、Node.js 練習
長尾關鍵詞：如何用 Glitch 建立個人網站、Glitch 與 GitHub 比較

優點：
- 修改程式碼後立即刷新瀏覽器，所見即所得
- 內建 Express.js 後端環境，適合練習全端開發
- 可直接「複製」別人的專案來學習（範例專案庫）
缺點：
- 免費方案專案會休眠，需手動喚醒
- 不支援自訂網域（免費版只能用 .glitch.me 網址）
適合情境：
javascript
Copy// 在 Glitch 快速測試一個 API
app.get('/api/hello', (req, res) => {
res.json({ message: "你好，這是我的筆記 API！" });
});

核心關鍵詞：GitHub Pages 教學、Jekyll 部落格、靜態網站託管
長尾關鍵詞：如何用 GitHub 免費架站、GitHub Pages 自訂網域設定

優點：
- 完全免費且無流量限制
- 可搭配 Jekyll 靜態網站生成器，用 Markdown 寫筆記
- 適合寫技術教學文（SEO 效果好）
缺點：
- 需基礎 Git 指令知識（推薦用 GitHub Desktop 簡化）
- 無法動態更新內容（需手動 git push）
實用技巧：
bash
Copy# 快速部署 Jekyll 部落格
$ git clone https://github.com/username/username.github.io
$ cd username.github.io
$ bundle exec jekyll serve

核心關鍵詞：Replit 教學、線上 IDE、Python/Node.js 練習
長尾關鍵詞：Replit 資料庫連線教學、如何用 Replit 架設 Discord 機器人

優點：
- 支援 50+ 種程式語言，包含熱門框架（Django, Flask, React 等）
- 內建協作功能，可多人即時編輯
- 免費版即提供 PostgreSQL 資料庫
缺點：
- 免費方案有 CPU 限制，不適合高流量網站
- 自訂網域需付費升級
特色功能：
python
Copy# 在 Replit 快速架設 Python Flask 網站
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
return "<h1>我的程式筆記站</h1>"

核心關鍵詞：CodePen 教學、前端程式碼測試、CSS 動畫練習
長尾關鍵詞：如何嵌入 CodePen 到部落格、CodePen 專案匯出教學

優點：
- 即時預覽 HTML/CSS/JS 效果
- 可分享「單一元件」程式碼（如按鈕、輪播圖）
- 內建 Autoprefixer 等實用工具
缺點：
- 不適合完整網站開發（僅限前端片段）
- 免費版廣告較多
進階用法：
html
Copy
<iframe src="https://codepen.io/yourname/embed/xxx?default-tab=html%2Cresult"></iframe>Run HTML

核心關鍵詞：Notion 教學、知識管理、Markdown 筆記
長尾關鍵詞：如何用 Notion 發布公開頁面、Notion 資料庫整理技巧

✅ 推薦組合：GitHub Pages + Jekyll + Netlify（自動部署）
✅ 理由：完全掌控內容、SEO 友好、免費自訂網域

✅ 推薦組合：CodePen 嵌入 Glitch 專案
✅ 理由：5 分鐘內就能讓別人看到互動效果

✅ 推薦組合：Notion 公開頁面 + Obsidian 本地備份
✅ 理由：手機/電腦同步，隨時隨地編輯

🚀 立刻行動：

Glitch 入門教學

Jekyll 主題庫

CodePen 精選作品

延伸閱讀：