做一個網站，原來這麼不容易!
2026.02.15
學習很快樂，對啦，但有時候是辛苦後的腦內啡分泌的快樂。
寶店長喜歡學東學西，非常熱愛學習。
但學習實在是苦樂交織的過程，總是一言難盡。
學習筆記的第一篇，該記錄怎樣的學習呢?
那來聊聊這個「網站」吧。
做一個網站，到底有多不容易。
先說結論：
超級不~~~~~~~容易。
我只是想開一間店，身心靈的那種，
怎麼變成在跟程式還有一堆有的沒的奮戰啦!
📚 那些沒人告訴你的事
寶店長原本以為，做網站就是：
- 選個好看的版面
- 把文章放上去
- 完成！撒花！🎉
結果完全不是這樣。
做了之後才發現，
路上都是坑，
路是彎來彎去的，
路還看不到盡頭!
原來做個網站要知道的東西，還真多，
辛酸血淚也還真不少。
有點長的前言提要，不想看的可以跳過
寶店長是個文思泉湧的店長，
有著不好說的文筆，
以及有顆純真熱情助人的心意。
一直想為這世界做些什麼，
所以就用寶店長的文體來為這世界點盞燈吧。
靈食雜貨舖，就此誕生了。
但這間店，要開在哪?
用個網站吧。
於是請願意一起合作的朋友，
學了一下WordPress架站。
網域買了。
WordPress theme 買了。
雲端部 署的存放空間也訂閱了。
總之，先投資了一筆。
然後，就沒有然後了。
寶店長實在是很會拖。
等到終於要認真找個網站主題套用，
認真地給它開站，
認真地上傳文章，
然後發現——
網站主題的範本沒一個喜歡的。
看了幾個小時，
選了好幾天，
上百個看起來大同小異的網站模樣，
沒一個滿意的。
要放棄湊合著用之際，
突然看到官大為的網站，
實在是太清爽乾淨順眼了，
這就是我理想中的網站模樣!
發揮探索的精神，
終於找到是用Docusaurus建立的!
但問題是，
Docusaurus又是什麼東東。
寶店長就是在某些事情上特別固執，
花了一些時間研究了一下Docusaurus，
好像有點大概知道了...
靜態網站(應該不會太複雜)，
markdown語法(這個略知一點)，
有範本(事情好處理了)，
GPT講得頭頭是道(感覺有譜了)。
那就捲起袖子，
自己來做吧。
🏗️ 從0到0.1
跨出第一步，總是比較困難的。
回頭看，現在可以做到這個程度，
大概就是因為不懂可以有多困難吧。
一開始，比較土法煉鋼，
在 GitHub 上找了一個範本程式下載。
這大概是一開始最簡單的步驟了，
但光 找這個範本也找了幾個小時，
GitHub 怎麼使用也一知半解，
有個帳號就不錯了。
下載完的範本程式，
該如何處置呢，
如何替換成我心中的那個網頁呢?
這時候就是跟GPT的一問一答、一問一答、一問一答，
用著我粗淺的理解，
一步一步按照著GPT的建議去實作。
包括系統環境的安裝，
天曉得到底要安裝多少程式，
Node.js, Git, VS Code，
乾脆連python都裝一裝，
然後還不能裝太新的版本，
怕很多應用程式還不相容，
我能說什麼呢。
網站還未出現，
寶店長仍須努力!
這前期門檻也太高了吧。
愈是艱難，愈是激起鬥志。
(其實是因為國慶連假，寶店長閒不下來。)
🧱 架構這件事
光是「網站要怎麼設計」、「文章要如何分類」這件事，
就想了超級久。
靈食雜貨舖不是一個普通的部落格，
寶店長也不是一位普通的店長。
天馬行空的想法一堆，
想做的主題一堆，
興趣多元之外，
還三分鐘熱度，
更別說還有無止盡的靈感不斷冒出，
重點是又囉嗦。
(看到這裡應該不用懷疑，寶店長的囉嗦程度。)
精選靈食、心學堂，這是最早確定的，
寶店長的日常、油條生的圖文、燒焦生的啟發對話、靈食包、鑑識故事...
種類也太多元了，但這些在一開始就存在了。
只能先針對這些做規畫了。
用 Docusaurus 架站，
每一個區域都要設定自己的路徑、自己的 sidebar、自己的 plugin。
連續一兩天不眠不休，跟GPT不斷對話，自己去改程式碼，自己去調整。
但在建立架構的時候，
會突然問自己：
「這個適合放在這裡嗎?」
「這要給它一個獨立的欄位，還是整併在什麼之下?」
例如，
鑑識專欄本來是獨立的，後來整合進了精選靈食。
曾經開過「英語星球」，想做英語學習專區，後來放棄移除了。
架構不是一次就定案的，是一邊走一邊調整的。
一個好的架構，不是一開始就是完美的。
是用心到一個程度，突然豁然開朗，自然而然出現的。
🏗️ 從0.1到1到100
架構用好了，
接著就是有的沒的一堆細節。
footer、字體、版本控制，
實在是族繁不及備載。
靠著跟GPT對話，
自己再去手動修正程式碼，
這根本就是個災難，
自己都不知道自己在幹嘛，
每次改完很像在開獎，
這次GPT是給驚喜還是給驚嚇。
然後，這時候，
幸虧寶店長找了個空檔去參加vibe coding的工作坊，
學到了 Claude AI 這個工具，
雖然只是三腳貓功夫，但也足夠使用了。
自此之後，Claude 就幫我寫了所有的程式碼，
提供網站的所有分析跟建議了。
工具用對了，
會少了很多折騰。
但真正的問題在於，
去發掘那些你還看不到的問題。
🎭 角色登場
網站有了架構，還需要靈魂。
寶店長登場之後，油條生跟燒焦生也來了。
圖文素材要處理，
檔案要上傳，檔名要重新命名，
文章排版要調整，
對話格式要統一。
再後來，靈食包也一篇一篇上架，
如何統一格式，
如何定調文章樣貌，
如何有閱讀的一致性，
這些都要從第一篇開始，
一篇一篇修正調整。
突然發現，
架站，技術性的工作，複雜繁瑣但簡單，
真正困難的，
是那些網站上的內容靈魂，
那承載著寶店長要傳出去的心意，
一點一滴都是心血，
那才是更難的。
一個網站的溫度，
是用心投入出來的。
📐 規則與標準
文章開始累積後，寶店長發現一件事：
如果沒有命名規則，未來一定會亂成一團。
於是請 Claude 幫忙制定了檔名規範：
A 開頭是寶店長、B 開頭是油條生、C 開頭是靈食包、D 開頭是鑑識系列，
每篇文章都有主題編號和序號，
最多可以容納 99,900 篇(能寫到這樣也算是奇蹟了)。
然後是 Frontmatter 標準化——
每篇文章的開頭都要有 id、title、date，
還有 series（系列名）和 tags（標籤）。
這個就交給 Claude 處理了，
我只是下指令而已，
天曉得到底有哪些標準化的欄位。
趁網站還沒長胖之前，
能先規劃好的，先規劃好，
否則一旦文章多了，
想修改刪減什麼都是個困難。
不用急著前進，
因為，準備好再前進，
速度還會比較快。
🎨 那些漂亮的框框
大家在文章裡看到的那些漂亮框框——
什麼「靈光一閃」、「祝福」、「行動」、「重點提醒」...
那是 13 種自訂的提示區塊。
我忘記系統內建幾種了，
但我覺得不夠我用。
每一種都有自己的顏色、自己的 emoji、自己的字體。
明楷體、蘭亭楷、童書體，
之前莫名其妙買的字體派上了用場，
不過光是字體就挑了好久。
而且後來為了讓這些框框的程式碼不要太肥，
還做了一次大重構——
原本 436 行的 CSS，壓到剩 119 行，
Claude 建議的，
我就一直按 Enter。
很多理所當然的東西， 其實一點也不理所當然。
🎬 影片要內嵌
很多功能，都是跟著文章的需求加上去的。
例如，有一篇靈食包想放 YouTube 影片。
這時候還在跟GPT對話，
自己土法煉鋼，
引入LiteYouTube 元件，
我也搞不清楚這是什麼，
反正可以用就好了。
我還記得自己貼上程式碼用成功時的興奮，
那時覺得寫程式真是讓多巴胺大爆發。
費心思解決問題後， 身心舒暢啊。
🎨 深色模式的存在
網站有「淺色模式」和「深色模式」。
這其實是範本內的預設。
我個人是用「淺色模式」，
但又覺得反正都有「深色模式」，
不如加減留著，說不定真的有人會喜歡用。
我天真地以為， 切換一下就好了吧？
結果是每一個元件、每一個區塊、每一個文字的顏色，
在深色模式下都要另外設定。
有個朋友幫我debug，
深色模式的檢視真是個災難，
背景是深色，字也是深色，
嗯，Claude 出場，
能改的也有限，
那就這樣吧。
推薦大家用淺色模式囉。
🏠 首頁大改造
一開始的首頁很陽春，就是預設模板。
後來做了一次大改版。
這是因為吼，
反正 Claude 的月費都付了，
看一下網站還需要怎麼調整。
看首頁愈看愈不順眼，
乾脆大改版，
變成真正的雜貨舖風格。
有寶店長歡迎詞、最新文章卡片、系列收藏貨架。
還做了一個內容索引系統，
自動掃描所有文章，生成 JSON 索引，
讓首頁可以動態顯示最新內容。
後來又加了展覽區的 Landing Page，
做了文章策展和主題展示。
還有橫向滾動的文章列表元件。
Claude 建議得都很有道理，
唯一的缺點就是，
tokens用得很兇，
用完後就得痴痴地等重置，
一週的量用完後，
剩下的日子裡我只好去看書了。
📱 手機上看起來怎樣？
做網站的時候，一直在電腦上看，
覺得很滿意。
但是吼，還有手機這件事。
雖然事先已經先預料到這一點，
已經在程式上有些準備，
但還是得等上線時，
親自用手機確認。
天啊，圖片能看嗎?
原來圖片寫死了寬度 500px， 手機螢幕只有 375px。
於是開始了響應式優化之旅：
- 圖片改成百分比寬度
- 字體大小根據螢幕縮放（桌面 16px → 手機 14px）
- 所有元件都要在不同尺寸下測試
- 後來還做了 ResponsiveImage 元件，自動產生不同尺寸的 WebP 圖片
光是圖片優化就省下了 85% 的檔案大小。
(以上都是 Claude 幫我整理的，我的功能就是按 Enter。)
🚀 部署這件事
網站做好了，但要怎麼讓別人看到？
這就是「部署」——把網站放到網路上，讓全世界都能連得到。
寶店長一開始查到的是 Cloudways，
看起來很專業、功能也齊全。
但研究了一下發現——
要費用，而且部署的設定沒那麼容易。
後來再查了一下資料，
發現可以部署在 Cloudflare Pages 上，
而且是免費的！
不過，免費歸免費，
設定的東西可一點也不少。
DNS 要指向，
Build 指令要設定，
環境變數要填，
GitHub repo 要串接，
自訂網域要綁定，
就算AI可以教我，
但也要我自己手動看說明去處理。
花了一整天的時間。
不專業的就是做起來很辛苦，
但最後還是成了，
突然很佩服起自己，
做成功了。
困難之所以為困難，
是因為我們覺得困難，
困難之所以可以突破，
是因為試著去用心、花心思、投入時間、 專注、不放棄，
直到困難過去，成功到來。
🔍 Google 搜不到我
網站上線了，開開心心。
然後去 Google 搜「靈食雜貨舖」。
看了好幾頁，
什麼都沒有。
五個字，完全吻合， Google 就是不認識我。
原來，Google 不是全知的。
新網站如果不主動去跟 Google 報到，
它根本不知道你的存在。
於是寶店長學會了：
- 去 Google Search Console 驗證網域
- 提交 sitemap（網站地圖）
- 設定 SEO 的 description 和 keywords
- 做一張 1200×630 的 OG 預覽圖，分享連結時才有圖片
這些東西，
以前連聽都沒聽過，
但 AI 都知道喔，
果然新台幣得花下去。
原來很多事情的運作，
不是我所想像的那樣。
這跟人生好像也是一樣的道理。
📊 閱讀數據
上線之後，很自然地想知道：
到底有沒有人在看？
於是接了 PostHog 分析追蹤，
然後發現——光是「看得到數據」還不夠，
還要能在後台一眼看清每篇文章的閱讀數。
於是做了 Inventory 後台管理頁面——
不只看閱讀數（週/月/總計），
還能篩選、搜尋、排序，
還要能匯出 CSV。
然後為了讓數據自動更新，
設了 GitHub Actions，
每天自動從 PostHog 抓最新數據。
能做到這裡，不禁佩服起我自己的耐心。
怎麼可以看著AI的說明，
自己去這些網站上，按照說明一個一個用起來啊。
原來你可以做到你想像不到的事，
但要有耐心。
📬 電子報的思考
做網站的人好像都要搞電子報。
自動發歡迎信、每週寄、什麼行銷漏斗的。
寶店長一開始也這樣想。
還接了 Buttondown 訂閱系統，
在首頁和文章底部都放了訂閱表單。
但後來被雷打到——
不要自動化。
寶店長決定每一封信都親自回。
不是罐頭訊息，是真的讀完、真的回。
因為每一封信的背後，
都是一個活生生的人。
靈食雜貨舖，
是一間充滿生命溫度的店，
不能被商業市場的思維所定義。
🛒 開了 一間店中店
後來寶店長心血來潮，
想在網站上放一些實體的東西，
看新台幣什麼時候飛過來。
手工木製蘋果、牙籤罐，
還有「寶店長碎碎念 60 分鐘」的服務。
於是又多了一整個「選品區」要建置。
商品卡片元件、商品網格、分類頁面，
商品拍照，上傳照片，照片修整，
還要寫一篇 blog 公告上架消息，
也是用了一整天。
人家賣東西，是講求成本與獲利，
寶店長賣東西，一個產品頁面的介紹，都跟它拚了，
時間成本早就無法計量了，
根本是在做興趣，不是在賣東西。
賺錢，本來就不是靈食雜貨舖的主軸。
📢 店長廣播與上架日誌
網站上有新資訊，
要放在什麼地方呢?
其他網站都是最新公告，
這名稱真是有點無聊，
乾脆來個寶店長的店長廣播吧。
每次有新東西上線，
寶店長就會用那句經典開場白：
各位親愛的顧客，
各位親愛的顧客，
各位親愛的顧客，
這裡是寶店長廣播。
從開張那天的第一篇廣播—
「靈食雜貨舖正式開張！」
到油條生與燒焦生正式亮相，
到讀者信箱開張，
再 到選品區上架公告—
每一篇廣播，都是一個里程碑。
也是寶店長的心血結晶啊。
再來是，
Docusaurus本身有blog設定，
可以按照日期排列，
覺得沒用到很可惜。
某天，突發奇想，
那來做上架日誌好了，
貨物有上架的需求，
文章也可以上架，
而且用日期呈現上架，
兩全其美啊。
不過，
文章建立後，是不會自動連動的，
還是費了一些時間設定自動載入新文章，
而且每次都要確認真的都會自動載入，
debug了好幾次，
現在應該是真的自動更新了。
每一次的上架，
都像是把自己的心意包裝好，
放到貨架上，
等待有緣人的相遇。
🧩 那些你看不到的元件
除了文章本身，
網站上有好多「看起來理所當然，但都是一個一個精雕細琢出來的」元件：
- 分享按鈕 — 讓讀者可以把文章分享到社群，後來又升級成浮動分享列，滑到哪裡都能分享
- 收藏按鈕 — 讓讀者收藏喜歡的文章
- 靈食包日期元件 — 因為靈食包用序號命名，日期要另外用元件顯示
- 文章推薦系統 — 根據瀏覽紀錄和收藏，推薦可能喜歡的文章
- spark 金句系統 — 每篇文章可以設 定一句精選金句，用在卡片顯示上
- 文章卡片 — 影展風格的卡片，在首頁和各區域展示
每一個小元件背後，
都是寶店長的用心，
總覺得，還可以再更好一些，
總覺得，還可以一直持續進步才是。
🔧 那些瑣碎但重要的小事
還有好多好多的小東西：
- 版本紀錄系統 — CHANGELOG 搭配腳本，footer 自動顯示版本號
- 每個資料夾要設定
_category_.json，還要統一用卡片式顯示 - 圖片要壓縮（PNG + WebP + 多尺寸），省下 85% 檔案大小
- 字體要子集化（從幾 MB 壓到幾百 KB）
- 部署設定（GitHub → Cloudflare，推一次就自動上線）
- 標籤系統精簡（從 30 多個砍到 18 個）
- Blog 作者要集中管理（不然每篇都要重寫一次作者資訊）
- 搜索插件要設定對（不然多區域的文章搜不到）
每一個的改動，都是心血，
心血的背後，都是因為不妥協的堅持，
不妥協的堅持背後，都是因為愛啊。
🧪 從「未完成」到「開放」
有些區域一開始是藏起來的，
例如人生實驗室，
直到最近才有想法開放，
文章會慢慢上架，
看寶店長寫到哪上架到哪囉。
有些區域到現在還是藏起來的，
請大家敬請期待。
大家的期待與反饋，
是促使寶店長前進的動力啊。
🌱 從 v1.0 到 v2.4
回頭看，靈食雜貨舖從 v1.0 走到現在的 v2.4， 經歷了：
| 版本 | 做了什麼 |
|---|---|
| v1.0 | 架好 Docusaurus 基本網站，設定繁體中文，什麼都很陽春 |
| v1.1 | 新增能量調理所，鑑識專欄整合進精選靈食 |
| v1.2 | CHANGELOG 系統上線，footer 終於有版本號了 |
| v1.3 | 精選靈食大重整，資料夾結構全部翻新 |
| v1.4 | 油條生與燒焦生正式登場！15 張佛系圖文 + 對話系列 |
| v1.5 | 英語星球上線、全站響應式優化、字體大小自動縮放 |
| v1.6 | 檔名標準化、Frontmatter 驗證腳本、VS Code 快捷模板 |
| v1.7 | 13 種自訂提示區塊上線（就是那些漂亮的框框） |
| v1.8 | LiteYouTube 輕量影片嵌入，載入效能提升 98% |
| v1.9 | 首頁雜貨舖風格大改版、內容索引系統、AdBanner、Admonition CSS 重構、字體優化 |
| v2.0 | 正式上線！ PostHog 追蹤、ResponsiveImage、油條生藝廊、訂閱元件、深色模式修復、圖片優化 85% |
| v2.1 | 人生實驗室開放、AI 練功日誌、展覽區、Inventory 後台、ScrollRow、spark 金句系統 |
| v2.2 | 選物區開張、FloatingShareBar、分析整合、SEO 優化、Blog 作者集中管理、卡片式統一、靈食包文章大更新 |
| v2.3 | SEO 全面優化、URL 英文化、Logo 重製、主題式 Blog、JSON-LD 結構化數據、圖片壓縮、spark 金句系統完善 |
| v2.3.1 | SEO 文案全面優化、首頁改版、全站 description 補齊、robots.txt 薄頁面處理、preconnect 預連線 |
| v2.4 | 選品區改名 + 寶店長推薦子分類 + 新系列文章上架、SEO 第二輪（160 頁未索引調查、移除英文 locale、全站 description 全面補齊）、PostHog 流量數據修復 |
未完待續中...
每一個版本，
都是一個用心，
都是一次學習，
都是一個自我對話的過程。從開始傻呼呼的，
沒有預料到現在的進程，
只有感恩，只有期許，只有祝福。感恩自己的堅持與外在的幫助，
期許初衷的保持與持續提昇前進，
祝福來到這網站的每個人，都能身心靈得到自在。
💡 寶店長學到了什麼
做一個網站，
不只是技術的學習，
更是一個認識自己、保持初衷、堅持不懈的過程，
也希望這樣的學習，
能夠給每個正在跟困難搏鬥的人們帶來一股力量。
你不會是孤單的，
因為我們都還正在路上。
💬 寶店長後記
一路走來，
真不容易，
但路就是這樣被走出來的。
從 v1.0 到 v2.3.4，
16 個大版本的更新，無數個小版本的更新，
自己也沒想過這麼多個日子的堅持，
多少個夜晚的奮戰，
也是有一點點小成果啦。
如果你也想要走一段這樣的路，
請聯繫寶店長。
如果你跟寶店長一樣，
想為這世界點盞燈，
但需要有技術上的支援，
寶店長絕對兩肋插刀，義不容辭地全力支援!
如果你也在做一件從零開始的事，
一件很有意義的事，
請你繼續。
起步慢也沒關係。
不完美也沒關係。
你走的每一步，都會算數。
就像這間靈食雜貨舖，
從一個連 WordPress 範本都搞不定的店長，
走到了今天。
還在走。
還會繼續走。
大家一起前進吧。
祝福大家，今日的身心靈，一切安好。
🧩 延伸閱讀
© 2026 Spirit & Savor 靈食雜貨舖
系列：精選靈食・寶店長・寶店長的學習筆記
📧 spiritandsavor@gmail.com