目錄#

• 網站架設筆記，也是一份教學（？）
• 為什麼選 Fuwari 不選其他的？
• 開始準備：
• 第一步：產生一份自己的專案
  • 直接 Fork Repo（複製專案）
• 第二步：裝套件
• 第三步：先把網站資訊改成「自己的Blog」
• 第四步：寫出自己的第一篇文章
  • 新建一篇文章
    • 方法一：建立一篇基礎的文章
    • 方法二：建立一篇複雜的文章
  • Frontmatter 長什麼樣子？
• 第五步：讓 Blog 上線（Cloudflare Pages）
  • 先把程式碼丟回 GitHub
    • 如果你是使用 Visual Studio Code：
    • 如果你不是使用Visual Studio Code：
  • 用 Cloudflare Pages 架設你的網站
• 第六步：之後可以慢慢玩的東西

網站架設筆記，也是一份教學（？#

最近開始在架設我的網站，在我找遍各種開源項目模板後，我最終選定了這款 —— Fuwari。 這篇文章主要是寫給：已經有一點程式基礎、用過 GitHub，但還沒有自己架過靜態 Blog 的人。 如果你想要一個「好看、好維護、不用從零刻 UI」的個人網站，可以跟著這篇一步一步做出第一個自己的 Blog。

WARNING

這篇文章會提到一些專業術語由於篇幅問題不一一介紹講解，有興趣的可以自行查閱。

為什麼選 Fuwari 不選其他的？#

先簡單講一下我為什麼挑它，以下是他的特色：

• 靜態 Blog 模板，用 Astro 寫的，部署超級簡單。
• 直接寫 Markdown 就可以發文，對寫技術筆記、生活文都很友善。
• 內建 Tag、分類、目錄、RSS，UI 也很簡約耐看。
• 顏色、 Banner 可以自己改一改，很快就有「自己風格」。

官方 Repo 在這裡：https://github.com/saicaca/fuwari。

開始準備：#

要跟著做，你需要這幾個東西：

• 一台電腦（手機很難操作，不要只用手機喔）
• 一個 GitHub 帳號。
• 一個 Cloudflare 帳號。
• Node.js（建議裝 LTS 版）。
• Git（用來把檔案存到網路上/從網路上下載下來）。
• 一個你順手的編輯器（我自己是大推 Visual Studio Code 啦，你如果要用其他的也沒關係，只是比較麻煩而已）。

NOTE

安裝完之後，可以開啟終端機（cmd / Terminal）簡單檢查一下：

• node -v：如果有顯示版本號（像是 v20.x.x），代表 Node.js 裝好了。
• git --version：有顯示 git version … 就沒問題。

第一步：產生一份自己的專案#

1
git clone https://github.com/<你的帳號>/fuwari.git
2
cd fuwari

第二步：裝套件#

進到專案根目錄之後，先把相依套件裝起來：

1
npm install

npm install：下載這個專案需要用到的所有套件，第一次使用時一定要先執行一次。

裝完之後，開發模式跑起來：

1
npm run dev

npm run dev：啟動一個開發用的小伺服器，之後你改檔案、存檔，瀏覽器會自動更新畫面。

終端機會顯示一個網址（大概是 http://localhost:4321），丟到瀏覽器裡，就能看到預設的部落格網站。

這一步做到就代表：
「你已經有一個在自己電腦上跑的 Blog 了，接下來就是把它改成你的樣子。」

第三步：先把網站資訊改成「自己的Blog」#

Fuwari 把網站的大部分設定集中在這個檔案中：src/config.ts。

打開它，你會看五大區塊：

• siteConfig （網頁基本資訊）:
  • title 網頁的標題
  • subtitle 網頁的副標題
  • lang 網頁的語言
  • themeColor 網頁主題配色
  • banner 網頁橫幅設定
  • toc 文章的目錄顯示
  • favicon 網站的圖標
• navBarConfig （導覽欄設定）:
  • links 最上方導航欄顯示的鏈結
• profileConfig （個人資料設定） :
  • avatar 你的頭像
  • name 你的名字
  • bio 你的簡介
  • links 裡面放著你要導向的鏈結
• licenseConfig （授權設定） :
  • enable 狀態
  • name 授權的名稱
  • url 授權的網址
• expressiveCodeConfig （程式碼區塊）:
  • theme 主題

你可以先把上面提到的所有內容都改成跟你有相關的：

• 把網站標題改成你的名字或你團隊的名字。
• 把描述改成你想放在首頁的簡短介紹。
• 把作者名字改成你自己。
• 導覽列只保留你真的會用到的項目，例如「首頁 / 文章 / 關於」。

改完記得存檔，切回瀏覽器重新整理，就可以看到自己 Blog 的樣式都變成你喜歡的樣式了。

簡易範例：

1
// 原本（範例）
2
export const siteConfi: SiteConfig  = {
3
  title: "Fuwari",
4
  subtitle: "Demo Site",
5
  lang: "en", // Language code, e.g. 'en', 'zh_CN', 'ja', etc.
6
  // ...
7
}
8

9
// 改成自己的（示範）
10
export const siteConfig: SiteConfig = {
11
  title: "PGpenguin72",
12
  subtitle: "GuGuGaGa",
13
  lang: "zh_TW", // 語言代碼，例如 'en', 'zh_CN', 'ja' 等
14
  // ...
15
}

你可以先只改 title、subtitle、lang 這幾個欄位，之後熟悉一點再慢慢調整顏色、 Banner 等細節。

第四步：寫出自己的第一篇文章#

TIP

寫一份自己的文章前，建議你先修改 src/content/spec/ 下面的所有內容，這些內容主要是和你自己相關的頁面（如 關於 ），修完自己的詳細自我介紹後再寫自己的部落格不遲喔！

Fuwari 的文章是用 Markdown 檔案管理的，放在 src/content/posts/ 底下。

1
npm run new-post -- my-first-post

1
./src/content/posts/my-first-post
2
> index.md
3
> 你的其他檔案（例如照片影片，後續可以直接使用）

1
---
2
title: 我的第一篇Blog文章
3
published: 2026-02-08
4
description: '這是一個文章描述'
5
image: ''
6
tags: ["標籤1", "標籤2"]
7
category: '分類'
8
draft: false
9
lang: ''
10
---

第五步：讓 Blog 上線（Cloudflare Pages）#

當你在本機玩到差不多，下一步就是「讓別人也看得到你精美的網站」。

1
git add .

1
git commit -m "update my blog"

1
git push

第六步：之後可以慢慢玩的東西#

先把 Blog 架起來、寫到第一篇文，其實最重要的部分就完成了。後面有空可以玩：

• 改顏色、 Banner 圖，做出自己的配色。
• 用 Tag / Category 把文章分類整理好。
• 把「關於我」那一頁寫的超好，當作名片頁。
• 研究一下 Fuwari 支援的 Markdown 擴充語法（註解框、卡片之類）。

以上就是我現在在用的 Fuwari 架站流程筆記。
如果你是第一次搞靜態 Blog，又懶得從頭開始寫網頁，這個方案算是「上手速度快、維護又簡單」的一條路。