---
title: AI 用幾個架站程式小結
updated: 2025-05-07 03:45:13Z
created: 2025-05-05 02:04:57Z
latitude: 24.16316510
longitude: 120.67466910
altitude: 0.0000
---

用 windsurf 的 AI 架幾個自動生成靜態網頁式部落格

需求說明：

```
<context>
## 主要功能

* 我想要做一個部落格
* 用 markdown 檔案撰寫
* 用網頁產生程式轉成頁面
* 用 GitHub action 執行轉成靜態頁面的程式
* 用 GitHub pages 部署
* 技術架構單純

## 頁面規格

* 首頁（這項不用主選單連結）
* 部落格文章：
    * 左欄：文章列表
    * 右欄：文章內容
* 知識庫文章：
    * main menu 改成該領域的 menu ，例如 misc 有自己的 main menu
    * 左欄：該知識文章列表（如 misc 有自己的列表）
    * 右欄：文章內容
* 關於我：單欄

## 資料夾說明

* content: 底下放 markdown 檔案，包括
    * blog: 部落格
    * knowledge: 知識庫
    * about: 關於我
* .github: GitHub action 的原始碼

## 樣式說明

* 首頁第一大區塊是部落格文章列表
* 首頁第二大區塊是知識庫分類，並各列出最新一篇文章

## 網址階層

* 首頁: /
* 部落格: /blog
* 部落格文章: /blog/{permalink} ：例如 /blog/2024-08-06-成為企劃人摘要
* 關於我: /about
* 知識庫首頁: /knowledge
* 知識庫各別首頁: /{slug}
* 知識庫文章: /{slug}/{permalink} ：例如 /misc/linux-ntp-setup
</context>
<PRD>
# 技術架構

* 使用框架 {{flame-name}}

# 開發流程規劃

* 階段一：首頁和各頁面可以跑，部落格文章、知識庫只要單頁
* 階段二：左右欄功能建立

# 附錄

</PRD>
```

試了一下 prd.txt -> tasks 花大概 0.04 美金（claude）  
整理一下各程式細節重點：

# 11ty(eleventy)

問題：沒有真正的版型系統，雖然有[版型網站](https://www.11tythemes.com/)，但各個版型其實是嵌入 11ty 程式碼運作的。

### 沒有 taskmaster 的情況：

產生 11ty 的一個網站很快很方便，塞入需要的版型檔案（[Nunjucks](https://mozilla.github.io/nunjucks/)），就完成了

### 有 taskmaster 的情況：

#### tm 概述：
1. Initialize Project Repository
2. Install and Configure 11ty
3. Install and Configure pages-cms Theme

目前做到 3 大部份會當掉，因為其實 pages-cms 沒有實際存在的 11ty theme repository 。
做到 3 為止前的情況：

#### Claude 3.7 thinking：
Powershell 指令較 gemini 多，但很多沒辦法正確執行完畢Orz
一直引用到 11ty 2.0 的寫法，導致啟用很多問題

#### Gemini-2.5 pro
在使用 powershell 時用了很多不正確的語法，產生大量缺少斜線（目錄階層）檔案，例如 `src/_layouts/about.njk` 變成 `src_layoutsabout.njk`

#### openAI 4.1
一開始就讀不到 taskmaster 的 mcp ，不確定是不是我設定的問題，直接跳過。

#### 上述解決方案
改成用 git bash......

## Astro

## Gatsby

第一步建立環境
第二步套用 theme 
第三步搭建 blog 系統

### Gemini-2.5-pro:
第一步能成功 build 出來，雖然過程都是 Checked command status
有裝好 gatsby-starter-blog 版型且可以跑
package.json 中的 meta （title, author 之類的）有先幫我改了

### OpenAI-4o:
也能一次完成第一步，結束後有提供一個連結是預覽網頁
有裝好 gatsby-starter-blog 版型且可以跑
package.json 中的 meta 沒什麼改

### Claude:
第一步進行完有錯誤，請 Claude 除錯好像取不到錯誤訊息，要自行把錯誤訊息貼上 prompt 才知道是少了哪些套件
Claude 第一步沒有先裝 gatsby-starter-blog 版型 -> 完全不正確

## Docusaurus

##