在寫了完了之前的那個網站後，也順手在上面發了己篇文章，本身跟這個重寫的部落格一樣，是使用 nextjs 寫的，然後使用 tailwindcss 來做裝飾，開發心得可以參考這篇，但我在開發的過程中發現了幾個問題:

程式的耦合性超高
- 因為我markdown -> html這部份是呼叫unified.js相關的套件處理的，寫的過程中因為還沒有很了解這套件怎麼運作，造成寫出了不少很髒的程式碼。
style跟v3太過相似了
- 這個網站的 tailwindcss 是從 v3 的網站上直接複製過來的，然後 v4 的網站是從 v3 的網站上直接複製過來的，所以 v4 的網站跟 v3 的網站很像，問題是，我v3的網站根本不是為了部落格寫的，反倒比較像是一個電子名片。

我的計畫

把markdown -> html 的功能獨立成一個套件，並這套件具有擴充性，讓我可以隨便增改，而不太需要去動到原本的程式碼。
直接使用 tailwindcss v4，而不是重之前v3的css轉換過來。
重寫網站的layout和style
支援留言

把markdown -> html 的功能獨立成一個套件

在做這項工作的時候，我給自己設定了除了前面提到的計畫，幾個目標。

擴充性
易用性

最終我嘗試建立了一個 monorepo，裡面的城市有生成html的功能，還有把html轉換成table of content，順便還寫了一測試Coverage應該是在95%以上，功能會在下面細說。

metadate的驗證

其實我在寫前面文章的時候，就已經在我文章的metadata加入了categories這個東西，我原本希望他能夠顯示在網頁上，然而我發現我在引入這部分的時候，真的是超痛苦，痛苦的點有幾個：

沒辦法驗證文章是否忘記加入這個attribute
沒辦法得知文章的類別，只能強制的as

為了解決這個問題，我是用了 zod 這個套件來驗證文章的metadata，這樣我就可以在寫文章的時候，強制要求我必須要有這個屬性。

生成html的功能

這部份就算是把之前v4的網站的功能獨立出來，這邊我使用了 unified.js 這個套件來處理markdown轉html的功能，本身使用到了 remark, rehype地相關套件處理相關程式。

不過為了擴充性，我這部份只有相依了必要的套件，並讓使用這可以自己pass入要使用的plugin，這樣我就可以在不改動原本程式碼的情況下，增加或是修改功能。

Style的選擇

在逛 vercel網站的時候，蠻喜歡他們這種很黑的風格，另外我也是發現，Tailwind提供的顏色系統 zinc 剛好就是我要的，在那之前我是用tailwind的stone顏色。

點擊查看完整圖片

但是我在開發的過程中，發現了一件事情，純黑的背景好無聊喔，所以就順手寫了一個點點的背景。

留言的系統

原本在推特上看到，很想是用 @fuma-nama 寫的 comments套件，主要是真的很好看，不過稍微深入研究後，我決定不使用，因為我不太想讓我這部落格太複雜，還得使用資料庫存資料，最後就決定使用 giscus 這個套件，這個套件是使用github的discucssion來存留言的資料，這樣我就不需要再額外去管理資料庫了。

不過原始的樣是跟我的網站風格不太搭，所以我就稍微改了一下樣式，讓他跟我的網站風格比較搭（這部份還得感謝copilot幫我改theme）。

部屬的問題

差不多在2月初的時候，我就開始著手開發這個網站，當時我還是使用vercel來部屬我的網站，因為vercel提供了很方便的功能，可以自動部屬我的網站，而且還有免費的方案。

差不多開發到3月中下旬，我發現cloudflare pages 也可以host我的nextjs網站，而且最重要的事情是免費又大碗，所以我就切換過來了。

cloudflare pages提供了幫你build的功能，每個月500次build，這樣我就可以省去很多麻煩，輕鬆的讓他自動部屬。

但是問題出現了，cloudflare的node版本next15不支援了，怎麼辦？自己build+上傳啊。Github Action也沒有很困難。

下面這是我的deploy的設定檔。

on: [push]
jobs:
    deploy:
        runs-on: ubuntu-latest
        permissions:
            contents: read
            deployments: write
        name: Deploy to Cloudflare Pages
        steps:
            - uses: actions/checkout@v4
            - uses: pnpm/action-setup@v4.1.0
              with:
                  version: 9.7.0
            - name: "Install Node"
              uses: actions/setup-node@v4
              with:
                  node-version: "18.x"
                  cache: "pnpm"
            - name: Build
              run: pnpm install && pnpm pages:build
            - name: Deploy preview to Cloudflare Pages
              uses: cloudflare/wrangler-action@v3
              if: github.ref != 'refs/heads/main'
              with:
                  command: pages deploy --branch=preview
                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}
            - name: Deploy production to Cloudflare Pages
              uses: cloudflare/wrangler-action@v3
              if: github.ref == 'refs/heads/main'
              with:
                  command: pages deploy
                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}

未來的打算

會寫一個我side project區塊，預計也是使用我自己寫的套件完成。
增加一個可以給認識的人加 link的區塊，順便開放讓大家加入。
未來或許會加入collection的功能，讓我可以寫一個系列文章。