初學者運用 Cloudflare 架設 Astro 網站全攻略

前言

Astro 是一款現代化的靜態網站生成器，結合高效能、易用性與多元前端框架整合能力，非常適合用來打造個人部落格、作品集或企業官網。本文將帶你從零開始，運用 Cloudflare Pages 免費架設 Astro 網站，並教你如何客製化、部署與維護，適合完全沒經驗的新手。

一、準備工作

1. 註冊 Cloudflare 帳號

前往 Cloudflare 官網。
點擊「Sign Up」註冊新帳號，填寫 Email 與密碼。
完成 Email 驗證後登入 Cloudflare 控制台。

2. 安裝 Node.js 與 npm

Astro 需 Node.js 環境，建議安裝 LTS 版本。

前往 Node.js 官網下載並安裝。
安裝完成後，開啟終端機（命令提示字元或 PowerShell），輸入：
```
node -v
npm -v
```
若能顯示版本號，表示安裝成功。

3. 安裝 Git

部署到 Cloudflare Pages 需用 Git 管理程式碼。

前往 Git 官網下載並安裝。
安裝完成後，終端機輸入：
```
git --version
```
顯示版本號即安裝成功。

二、建立 Astro 專案

1. 建立新資料夾

在桌面或任意位置建立 Astro 專案資料夾，例如 my-astro-blog。

2. 初始化 Astro 專案

開啟終端機，切換到專案資料夾：
```
cd 路徑\my-astro-blog
```
執行 Astro 初始化指令：
```
npm create astro@latest
```
依照提示選擇「blog」範本，並選擇 TypeScript 或 JavaScript。
安裝完成後，執行：
```
npm install
```
這會安裝所有依賴套件。

3. 啟動本地開發伺服器

在專案根目錄執行：
```
npm run dev
```
終端機會顯示本地網址（如 http://localhost:4321），用瀏覽器打開即可預覽網站。

三、網站客製化

1. 編輯首頁內容

打開 src/pages/index.astro，可修改歡迎詞、介紹、排版。
Astro 支援 Markdown 與元件化開發，讓你輕鬆新增區塊、圖片、連結。

2. 新增部落格文章

在 src/content/blog 資料夾新增 Markdown 檔案，例如 20250809.md。

範例內容：

---
title: 我的第一篇 Astro 部落格
date: 2025-08-09
tags: [Astro, Cloudflare, 教學]
description: 初學者架設 Astro 部落格的完整教學
---
# 歡迎來到我的 Astro 部落格
這是我的第一篇文章，分享架設過程與心得。

文章會自動顯示在部落格列表頁。

3. 客製化樣式

編輯 src/styles/global.css，可調整字型、顏色、排版。
也可安裝 Tailwind CSS 或 SCSS 進行進階設計。

4. 新增自訂元件

在 src/components 新增元件檔案（如 MyBanner.astro）。
在頁面中 import 並使用元件，提升網站可維護性。

四、部署到 Cloudflare Pages

1. 將專案推送到 GitHub

在 GitHub 建立新儲存庫（repo）。

在本地終端機執行：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/你的帳號/你的repo.git
git push -u origin main

2. Cloudflare Pages 建立新專案

登入 Cloudflare 控制台，選擇「Pages」。
點擊「Create a Project」，連結你的 GitHub 帳號。
選擇剛剛推送的 Astro 專案 repo。
設定 Build Command 為 npm run build，Output folder 為 dist。
點擊「Save and Deploy」，Cloudflare 會自動建置並部署網站。

3. 設定自訂網域（選用）

在 Cloudflare 控制台新增網域，設定 DNS 指向 Cloudflare Pages。
完成後即可用自己的網域存取 Astro 網站。

五、常見問題與排除

1. npm 指令無法執行

請確認 Node.js 與 npm 已安裝，並在環境變數 PATH 中。

若 PowerShell 出現執行政策錯誤，執行：

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

2. Git push 出現權限問題

請確認已設定 GitHub 帳號與 email：

git config --global user.name "你的名字"
git config --global user.email "你的信箱"

3. Cloudflare Pages 部署失敗

檢查 Build Command 與 Output folder 是否正確。
確認 package.json 有 build 指令。
檢查專案是否有安裝所有依賴套件。

六、Astro 常用功能與最佳實踐

1. 整合前端框架

Astro 可與 React、Vue、Svelte 等框架元件混用，只需安裝對應套件並在 .astro 檔案中 import 使用。

2. 圖片優化

Astro 內建圖片元件，支援自動壓縮、lazy loading，提升網站效能。

3. Markdown 支援

直接撰寫 Markdown 文章，Astro 會自動轉換為網頁，並支援 Frontmatter 設定。

4. SEO 優化

Astro 會自動產生 meta 標籤、Open Graph、sitemap，提升搜尋引擎排名。

5. 部署簡易

支援 Vercel、Netlify、Cloudflare Pages 等雲端平台，部署流程簡單快速。

七、結語

透過本教學，你已學會如何運用 Cloudflare Pages 架設 Astro 靜態網站，並完成部落格文章新增、網站客製化、雲端部署等全流程。Astro 不僅效能優異，還能輕鬆整合多種前端技術，適合初學者與進階開發者。歡迎持續探索 Astro 的進階功能，打造屬於自己的個人化網站！

# 初學者運用 Cloudflare 架設 Astro 網站全攻略