---
title: "部署靜態網頁到 Cloudflare"
url: https://geminixiang.com/posts/deploy-ssg-page-to-cloudflare/
description: "把靜態網站（SSG / CSR）部署到 Cloudflare Pages：從匯入 GitHub repository、設定存取權限到完成部署的步驟。"
published: 2025-10-30
category: "DevOps"
tags: ["cloudflare", "devops"]
---

# 部署靜態網頁到 Cloudflare

# 部署靜態網頁到 Cloudflare

這次來紀錄一下我最愛的部署網站方式 - Cloudflare Pages 

https://pages.cloudflare.com/

簡短說明，Cloudflare Pages 部署最適合 CSR、SSG，而 SSR 也可以 (透過 Cloudflare Workers 來處理請求)，下面簡單部署設定教學

1. Cloudflare > Workers and pages > 建立應用程式 > 匯入現有 Git 存放庫
![cloudflare-2](../../assets/images/posts/cloudflare-2.png)

2. 給予 Cloudflare 存取權限 (建議給指定的 repository)
![cloudflare-3](../../assets/images/posts/cloudflare-3.png)

3. 部署的相關設定
![cloudflare-4](../../assets/images/posts/cloudflare-4.png)

4. 完成部署
![cloudflare-5](../../assets/images/posts/cloudflare-5.png)


## Reference

- https://developers.cloudflare.com/pages/configuration/git-integration/github-integration/

---

## About the author

**Ying Xiang Zhao** (geminixiang) — DevOps Engineer, Taipei, Taiwan.

Ying Xiang Zhao（geminixiang）是住在台北的 DevOps 工程師，工作橫跨雲原生基礎設施、CI/CD、ML 模型部署與全端開發。這個部落格記錄 infra、資安與 AI coding agent 的實戰筆記；作品包含開源專案 mikan（把 AI coding agent 帶進 Slack / Telegram / Discord）與 tiny-agent（用四種語言實作的極簡 coding agent），瀏覽器內的影片編輯器 Studio，並經營旅遊分帳工具 SentriPay。

**Open to work** — DevOps Engineer / Platform Engineer / Site Reliability Engineer / AI Infrastructure Engineer · Taipei, Taiwan / Remote. Résumé: https://geminixiang.com/about/ (JSON: https://geminixiang.com/resume.json)

Topics: DevOps, Cloud Native, Kubernetes, Docker, Terraform, Google Cloud, CI/CD, Security, AI coding agents, ML model deployment, TypeScript, Python

Projects:
- [mikan](https://github.com/geminixiang/mikan) — Self-hosted AI coding agent for Slack, Telegram, Discord and GitHub with per-conversation sandboxes
- [tiny-agent](https://github.com/geminixiang/tiny-agent) — Minimal AI coding agents in TypeScript, Go, Python and Rust, plus a book on how they work
- [SentriPay](https://sentripay.com) — Travel expense splitter with multi-currency conversion and shareable, live-synced trip ledgers
- [Studio](https://studio.geminixiang.com) — Browser-based video editor built on WebCodecs

[About](https://geminixiang.com/about/) · [Résumé](https://geminixiang.com/about/) · [LinkedIn](https://linkedin.com/in/geminixiang/) · [GitHub](https://github.com/geminixiang) · [Twitter](https://x.com/geminixiang)