晉博網站更新紀錄

嗨嗨，我是晉博 🦕

這個網站（jenbolin.com）全都是由我從零到一慢慢打磨起來的！想把這打磨的過程都紀錄下來！

靈感來自 Heptabase 的 changelog，他們每次改版都會記下「這一版改了什麼」。我很喜歡這種「東西是怎麼一點一點長出來的，全都記錄下來」。所以我也想幫自己的網站做一份。

這份紀錄想同時做兩件事：

• 給自己：回頭看看，原來我已經走了這麼遠。網站從來不是一天蓋好的，是幾十個小決定疊出來的。
• 給讀者：如果你完全沒架過網站，想讓你看到「一個完全不會寫程式的人，從零用 Cladue Code 把網站慢慢調成現在的樣子」。

我一開始沒養成「改版前先截圖」的習慣，所以下面有些「Before」我只能用示意圖代替（圖片上有標記），還請見諒 😅

{{block:soft}}

本頁面的分類定義

為了讓你更好找到你想看的內容，可以點擊這四大分類。

• 🧱 網站骨架：網站是怎麼架起來、內容怎麼分類、網站改名的思考等等
• 📖 閱讀體驗：讓文章更好讀、更好找重點的設計。
• 🎨 介面視覺：讓網站看起來更有品牌性、看起來更舒服的小設計
• ✨ 互動巧思：一些些有趣的小細節，讓網站更有記憶點、更好玩。

把網站架起來

{{date:2025-12-01}}

{{cat:網站骨架}}

最初架站，是 2025 年底參考雷蒙的這篇文章 自架 Ghost 網站教學 + 電子報系統 Mailgun，取代 WordPress，大概花了 1 個小時就架成功了！

至於為什麼要架一個網站？

• 最主要是，我擔任講師和教學者這幾年，真的體會到「輸出是最好的學習」。架個網站，相較於社群，更能完整、有脈絡地整理自己的學習，之後要查找也更容易。
• 再來，過去幫不少醫師和診所經營品牌，後來才發現：我能留下的都是知識、經驗、數據，卻一直沒有好好累積「晉博」這個人的品牌。

決定「要分享哪些主題」

{{date:2026-06-28}}

{{cat:網站骨架}}

• 更新了什麼：把內容分成三大主題：Notion、行銷、自我成長。
• 為什麼這麼做：內容還沒多的時候，先想清楚「我經營網站的目的是什麼」、「我要寫哪幾類」。我現在經營網站，是為了記錄自己的正職工作（行銷）與個人成長；另外，如果有機會的話，也希望能接到 Notion 的合作邀約。

文章頁長出「目錄」

{{date:2026-06-30}}

{{cat:閱讀體驗}}

• 更新了什麼：長文右邊，加了一張會跟著你的目錄卡：捲動時會自動高亮你正在讀的段落，還有閱讀進度指示。
• 為什麼這麼做：文章一長，讀者就很難找到重點；有了目錄，就能一眼跳到自己想去的地方！
• 靈感來源：雷蒙三十網站

文章內加白色卡片

{{date:2026-06-30}}

{{cat:介面視覺}}

• 更新了什麼：文章內文從「貼著背景」改成裝進一張白色圓角卡片，背景則是放與首頁圖呼應的藍色光影、玻璃球。
• 為什麼這麼做：這是參考 雷蒙的網站文章樣式。我很喜歡他網站那塊白色的內容區塊，看起來就是很舒服！閱讀起來舒服是很重要的！！！！
• 靈感來源：雷蒙三十網站

首頁加入「理念」

{{date:2026-07-02}}

{{cat:介面視覺}}

• 更新了什麼：首頁從系統預設的文章列表，先變成整齊的卡片牆，最後再加上一張我自己做的霧面藍球 + 去背半身照當背景，疊上大標「比起用什麼工具，更重要的是了解自己」。
• 為什麼這麼做：首頁是門面，要讓人一眼知道「這網站想傳達什麼」，給人留下深刻的第一印象以及有機會對我產生共鳴。

{{cat:互動巧思}}

會被吸過去的按鈕

{{date:2026-07-14}}

• 更新了什麼：把 CTA 的按鈕做成磁吸的動畫
• 為什麼這麼做：我覺得按鈕最重要的就是「要被點擊」。當這顆按鈕能跟著游標移動，就更能吸引到別人的目光。

{{cat:互動巧思}}

一鍵複製文字的按鈕

{{date:2026-07-14}}

• 更新了什麼：要用滑鼠選取再複製太麻煩了！所以我做了一鍵複製的小巧思。
• 為什麼這麼做：平常我在讀其他文章的時候，作者的文章內，會有地方需要我們去複製，但每次都要「手動選取 + 複製」，有時候那段文字太長，很容易會少選 1~2 個字，所以我就做一顆按鈕，不只方便，還能避免少選文字的問題。

{{copy:點我一下就成功複製囉}}

更有趣的 Toggle List

{{date:2026-07-16}}

{{cat:互動巧思}}

• 更新了什麼：文章裡的摺疊區塊（Toggle）按鈕，換成了我的品牌吉祥物：一隻葉子小精靈，收合時微笑、展開時驚訝。
• 為什麼這麼做：我覺得 Toggle list 原本是一個 > 的樣式有點無聊，就想說能不能換成一顆「人臉」，就把它做出來了！

改名：從「學習」到「進化」

{{date:2026-07-16}}

{{cat:網站骨架}}

• 更新了什麼：從「晉博的學習筆記」改成「晉博的進化筆記」。
• 為什麼這麼做 ：
  • 「學習」對我來說比較偏向吸收資訊並整理出來，但不一定會做出行動和反思讓自己進化。
  • 「進化」更貼近我想傳達的，不是單純紀錄我學了什麼，而是記錄「我遇到什麼問題、有哪些體悟、採取哪些行動、我怎麼一點一點變得更好」。

首頁加入吸睛動畫

{{date:2026-07-16}}

{{cat:介面視覺}}

• 更新了什麼：
  • 首頁標題裡的「工具」兩個字，會緩緩變成「模板」再變回來
  • 點一下畫面，還會長出一圈雙藍色的漣漪。
• 為什麼這麼做：首頁我覺得算是門面，想在第一印象就給來訪者「驚喜」的感覺，留下特別的印象。

底部固定資訊 + 結尾作者介紹

{{date:2026-07-16}}

{{cat:閱讀體驗}}

• 更新了什麼：加上了網站底部的固定資訊，以及文章結尾固定的作者介紹。
• 為什麼這麼做：想讓讀者能更認識我，以及了解我網站的理念。
• 「真人撰寫非 AI 生成貼紙」的靈感來源：雷蒙三十網站

為「教學文」做的排版設計

{{date:2026-07-17}}

{{cat:閱讀體驗}}

• 更新了什麼：做了能用分隔線把長文切成一塊一塊的卡片，這卡片還能變顏色（本篇重點 / 避雷 / 延伸閱讀）。
• 為什麼這麼做：如果是故事文章或是有起承轉合的文章，我覺得很適合連貫性的大區塊，但是教學型文章我覺得需要「快速看到重點在哪、坑在哪」，所以把「分隔線」變成把每一塊分出重點，減緩閱讀上的壓力，也更好找到重點。
• 靈感來源：Leo Huang 的網站

{{block:key}}

這裡是會持續進化的頁面！

回頭把這些一條一條列出來，我自己也有點驚訝！！原來網站已經默默做了這麼多更新。

如果你也在架自己的網站，我最想跟你分享的幾件事：

1. 思考清楚需求再去調整：架網站後，我每天都去大量觀摩其他創作者的網站，也看到很多很棒的設計，看到喜歡的設計我都會先回過頭思考：「我需要嗎？為什麼我需要這個？能給我或讀者帶來什麼影響」
2. 別追求一次到位：這網站不是 1 天或 1 個禮拜就變成這樣，而是不斷挖掘需求打磨而成。
3. 跟 AI 對話：盡可能釐清需求以後，再請 AI 去執行（也可以和 AI 一起深度挖掘需求），執行時可以先請 AI 做最簡單的 Demo，比較不會耗費太多 Token。
4. 懂一些程式碼會更好：我完全不懂怎麼調整程式碼，所以除了做設計圖以外，初期調整網站幾乎 100% 都是請 AI 代操，但這樣 Token 真的燒超快，所以我現在會請 AI 改完以後，統整出一份我自己要調整的話，可以怎麼調整，很多地方就可以自行手動微調了。

這頁之後我會持續更新，歡迎你持續關注 。