enpitsulin

enpitsulin

这个人很懒,没有留下什么🤡
twitter
github
bilibili
nintendo switch
mastodon

使用Next.js重構我的部落格

又到了一年一度鼓捣博客的時間咳咳,因為升級 gatsby 導致倉庫收到太多依賴警告了,同時意識到大而全的框架的一些缺點,所以決定捨棄 Gatsby 轉而使用 Nextjs

Gatsby vs Nextjs#

同為 React 生態中的頁面構建框架,他們均提供了 SSG 的功能,作為一個簡單的博客僅靜態導出就完全能夠達到我的需求了。

對於頁面數據的獲取上,Gatsby 和 Nextjs 差異在於 Nextjs 允許從任意的數據源獲取數據,僅僅需要在指定生命周期函數getStaticProps中返回相應的值即可,但是 gatsby 的數據源是基於graphql的,但是很多實現均依賴插件,很大程度上依賴社區和官方的工作。

當前文章內容都是通過本地文件系統保存,使用 Gatsby 和 Nextjs 基本等效,但是對於 Typescript 的支持 Nextjs 遠遠的將 Gatsby 甩在後面

使用模板#

本身是想將原先的使用 Nextjs 復現然後再進行更改,但是中途發現使用 MDX 來構建文章會比純 markdown 的展示效果更好。

但是在集成的過程中發現在 Nextjs 中使用 MDX 如果不作為 pages 頁面交給 Nextjs 處理則無法進行很好的自定義,但是通過next-mdx-remotemdx-bundler在渲染的時候需要使用new Function()

雖然最後解決了這個問題,但是覺得不是很優雅,然後在尋找解決方法的過程中發現了一個模板,同時此模板使用了tailwindcss,近期我也總是有在使用同類型的windicss因為之前 tailwind 沒有 JIT 模式

然後就轉而使用該模板,很多佈局我覺得挺不錯的,但是其中的一些功能和頁面展示樣式我覺得還是需要改進,首頁之類的還過於簡陋。

內容管理#

在先前 Gastby 最後的版本中我使用了 Netlify CMS 來管理內容,基本也形成了 JAMStack 的結構,但是使用體驗來說着實還是差點,作為內容管理我覺得使用體驗不是很到位。

中途也嘗試用 Notion 來做內容管理,但多多少少又一些不如直接 markdown 來的效果好

使用額外的內容管理#

現在目標是通過 Sukka 大佬的這篇文章使用 Next.js + Hexo 重構我的博客的啟發使用 hexo 與 nextjs 整合或者與 contentlayers 結合。

contentlayer#

這個包的野心很大,目標是整合各種內容源 —— 無論是本地文件如 MDX、markdown、json、純文本或者是 CMS 都可以通過其進行管理

但其部分目標功能處於 wip 狀態,不過可能的未來能和 notion 集成我覺得挺香的。

hexo#

Hexo 不僅是一個靜態站點生成器,其內部的數據庫還暴露了一系列 api 可以直接操作本地的文章

這部分可以參考 Sukka 大佬的文章和 hexo 官方文檔,而且有一方面的優點 hexo 可以基於文件系統將數據持久化,這個可以讓構建省去一部分的時間資源

同時 hexo 集成的一些功能如 rss 和 sitemap 生成可以讓我將現有的此部分內容重構為更簡單的代碼,還有很多 hexo cli 能提供的功能也是很香

集成 i18n#

其實國際化似乎對於我這個小博客沒有什麼多大的作用,但是一直在工作中用不上,就算是為以後的英文文章鋪路?會有嗎?

next-translate#

其實看倉庫的提交記錄就知道一開始是選擇next-i18next來做 i18n 的但是發現需要對所有動態路由手動增加 props,十分的麻煩,然後還是使用了next-translate

日後的計劃是對文章的 frontmatter 增加額外的 lang 屬性用於標識語言,然後在文章列表顯示語言標籤來標識文章內容的語言,以及可能未來有的雙語文章中切換語言就以後在做額外的處理吧。

不過格式化時間字符串似乎還是跟隨讀者的語言而變化的,這個還是有待改善的。

做字符串翻譯工作也好費時間

解析域名#

掛載 github 或者 vercel 看著怪 low 的,於是斥巨資購買了一個enpitsulin.xyz域名然後去 vercel 控制台綁定blog.enpitsulin.xyz,然後在阿里雲的控制台按照 vercel 給出的記錄添加解析設置,然後稍等一會就行了

但是好像現在還是要掛梯子,這部分以後在調整吧。

然後根域名就備案了放著為以後做學習用途吧。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。