L,.G

槿呈Goidea

读书/新知/生活禅
email
twitter
tg_channel
首頁文章NewsletterMemEX關於

博客的遷移和重整

#tech#Nobelium#Notion193
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
本文介紹了將博客從 http://super.so/ 遷移到 Nobelium 的過程，作者對導航欄、頁腳、程式碼區塊和字體進行了自定義修改，並在 Nobelium 數據庫中完善了博客內容。作者認為博客應該純粹，用於記錄與分享，而 Notion 和 Nobelium 滿足了作者對博客的全部需求。Feather.so 是一個優質的驅動服務，適合將 Notion 用作博客。Super.so 價格較高，而 Notablog 和 NotionNext 是開源項目，但更新不頻繁。Nobelium 是一個簡約風格的博客，部署簡單。Nobelium 的部署並不複雜，開發者在 GitHub 的專案頁面中有詳細說明。填寫相應的 Ackee 或 Google Analytics ID，選擇使用的評論插件並填寫相關信息。如果您自己部署了 cusdis 服務，請更換為您自己的服務地址。區分開發環境和生成環境。

本文介紹的是之前本博客在 Notion 時所使用的 Nobelium 框架。現在本博客已經改為 Astro 框架。

尋找#

今年的 2 月，我曾因為伺服器的原因將博客從 Typecho 遷移到了 Notion，並通過 Super.so 驅動。老實講，整體並不是非常滿意，主要是以下三點：

  1. Super.so 還沒有為博客提供 RSS 訂閱。無奈之下最開始使用的是用 rss.com 製作的訂閱源，發現並不穩定而且不能輸出全文；又換成了 fetchrss.com，只能在部分 RSS 閱讀器中可以查看全文；最後，看到了 DIYgod 大佬的新項目鏈上開源博客 xLog，這才解決了 RSS 的問題。
  2. Super.so 也沒有集成評論功能。雖然我的博客評論並不多，但總還是有的。即便是我找到了 Tally，也還是因為讀者使用門檻過高而受到過批評。
  3. Super.so 更適合構建簡單的網站，而不適合於博客。利用 Notion + Super.so 來做 CMS 很合適，可如果單純做博客，尤其是內容一多起來，頁面管理複雜、混亂的問題就暴露出來。

所以，我又開始尋找與 Notion 更匹配的博客驅動服務。

利用 Notion 建站的項目有很多，經過篩選之後我挑出來 4 個，分別是 Feather.so，Notablog，NotionNext 和 Nobelium。

Feather.so 非常好，可以說如果想要把 Notion 當作博客來使用，最好的驅動服務就是這個了。不僅有 RSS，也有評論功能，非常好的 SEO 優化，頁面管理邏輯順暢…… 不過，好服務往往對應著高價格，Super.so 每個月 $12 我都嫌貴，更何況這個是每個月 $39 呢。

Notablog 是我關注很久的一個項目，由一位美籍華人在 GitHub 上開源。整體觀感十分簡潔、優雅，操作與管理邏輯也很清晰，可以很方便地部署在 VPS。然而，這個項目近一年沒有什麼更新了。

NotionNext 是我曾經部署過的一個項目，不僅寫過文章介紹，還推薦給了好幾位朋友。到目前為止開發者的更新依然頻繁，一直在盡心維護。只是對 Notion Block 的支持並不全面，更新起來也有些麻煩，不太適合我這種懶人。

Nobelium 和 Notablog 與 NotionNext 一樣是在 GitHub 上開源的項目，只是與後兩者區別很大。Notablog 更像是一個個人網站；NotionNext 由於支持很多種主題，顯得花哨了很多；Nobelium 就是一個極簡風格的博客，沒有華麗的渲染，沒有多變的主題，也沒有複雜的功能。普普通通的 Nobelium 給了我返璞歸真的感覺，個人博客不就應該是這樣嗎？

部署#

Nobelium 的部署並不複雜，開發者在 GitHub 的項目頁面中寫的很詳細，我只簡單說一下。

步驟一：複製 Notion template 到您自己的 Notion 帳號中。

這個資料庫裡的每一個屬性非常好理解。

步驟二：在 GitHub 中將項目 Fork 到自己的帳號之後，需要修改 blog.config.js 中的內容。

const BLOG = {
  title: "CRAIGARY", // 您的博客名稱（標題）
  author: "Craig Hart", // 您的暱稱
  email: "[email protected]", // 您的郵箱
  link: "https://nobelium.vercel.app", // 您的博客網址
  description: "This gonna be an awesome website.", // 您的博客描述（副標題）
  lang: "en-US", // 語言，'en-US'為英文, 'zh-CN'為簡體中文, 'zh-HK'為香港繁體中文, 'zh-TW'為台灣繁體中文, 'ja-JP'為日文, 'es-ES'為西班牙文]
  timezone: "Asia/Shanghai", // 時區，可以在 https://en.wikipedia.org/wiki/List_of_tz_database_time_zones 查看有關時區的更多詳情
  font: "sans-serif", // 字體，'sans-serif'為無襯線字體, 'serif'為襯線字體
  lightBackground: "#ffffff", // 淺色背景，使用十六進制的顏色，比如 #fffefc，注意不要忘記 #
  darkBackground: "#18181B", // 深色背景，使用十六進制的顏色，注意不要忘記 #
  path: "", // 除非您想要在一個文件夾中部署，否則請將此文件保留為空
  since: 2021, // 博客起始日期，如果留空則使用現在的年份
  sortByDate: false, // 按日期排序，false 表示否，ture 表示是
  showAbout: true, // 顯示關於本站
  showArchive: true, // 顯示歸檔
  autoCollapsedNavBar: false, // 自動折疊導航欄
  ogImageGenerateURL: "https://og-image-craigary.vercel.app", // 生成 OG 圖像鏈接
  socialLink: "https://twitter.com/craigaryhart", // 社交平台鏈接，填寫後在文章頁面點擊您的暱稱會跳轉到對應的平台
  seo: {
    keywords: ["Blog", "Website", "Notion"], // 關鍵詞
    googleSiteVerification: "", // 刪除該值或替換為您自己的谷歌網站驗證代碼
  },
  notionPageId: process.env.NOTION_PAGE_ID, // 不要更改這個！！！
  notionAccessToken: process.env.NOTION_ACCESS_TOKEN, // 如果不希望將資料庫公開，則使用
  analytics: {
    provider: "", // 目前提供 Google Analytics 和 Ackee 兩種訪客統計,如果要使用 Google Analytics 則填寫'ga'，如果要使用 Ackee 則填寫 'ackee'，如果不使用則留空
    ackeeConfig: {
      tracker: "", // 如果使用 Ackee，則填寫，如'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: "", // 如果使用 Ackee，則填寫，如'https://ackee.craigary.net'
      domainId: "", // 如果使用 Ackee，則填寫，如'0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: "", // 如果使用 Google Analytics，則填寫，如'G-XXXXXXXXXX'
    },
  },
  comment: {
    // 目前集成的評論插件包括 gitalk, utterances 和 cusdis
    provider: "", // 填寫您使用的評論插件，留空則表示不使用
    gitalkConfig: {
      repo: "", // 此處請填寫您從 gitalk 獲取的信息
      owner: "", // 此處請填寫您從 gitalk 獲取的信息
      admin: [], // 此處請填寫您從 gitalk 獲取的信息
      clientID: "", // 此處請填寫您從 gitalk 獲取的信息
      clientSecret: "", // 此處請填寫您從 gitalk 獲取的信息
      distractionFreeMode: false,
    },
    utterancesConfig: {
      repo: "", // 此處請填寫您從 utterances 獲取的信息
    },
    cusdisConfig: {
      appId: "", // // 此處請填寫您從 cusdis 獲取的信息
      host: "https://cusdis.com", //如果您自己部署了 cusdis 服務，則更換為您自己的服務地址
      scriptSrc: "https://cusdis.com/js/cusdis.es.js", // 如果您自己部署了 cusdis 服務，則更換為您自己的服務地址
    },
  },
  isProd: process.env.VERCEL_ENV === "production", // 區分開發環境和生成環境，詳情見 https://vercel.com/docs/environment-variables#system-environment-variables
};
// export default BLOG
module.exports = BLOG;

步驟三：修改完成後，到 Vercel 中部署就可以了，記得在 1️⃣ 填寫 NOTION_PAGE_ID，在 2️⃣ 填寫 Page ID，然後點擊 Add 添加。

image

  • 什麼是 Notion Page ID

    在 Notion 中點擊 Share，然後打開 Share to web，會生成一段可公開訪問的網址，比如 https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4，在https://xxx.notion.site/ 之後，?v= 之前的那一段編碼就是 Page ID，即80c301f9f7264a4aa5dfc1f8b9841222 。

    image

Cusdis#

我很認同秉儒在《為何我想停用 Cusdis 但卻又反悔？》中提到的理想中留言系統的樣子：

有匿名留言的功能；要用 Twitter, Github, Telegram, FB, Google 等不同登錄方式也可以；也可以用 email 登錄；支持 markdown；可以連接 Tg 或 Slack 等通訊軟件實時提醒；可以用 email 通知評論者他們的評論已回覆（如果有留下 email）；輕量、注重隱私。

從 blog.config.js 可以看到，Nobelium 的評論插件支持 gitalk，utterances 和 cusdis。

Utterances 我沒有用過，所以不考慮。Gitalk 在寫評論的時候要使用 GitHub 帳號登錄，並不是匿名的，而且在國內的訪問也不好，所以不考慮。Cusdis 是 Randy 大佬開發的評論插件，不僅小巧便捷，還不需要在評論的時候登錄任何帳號進行匿名評論，自然也就成為了唯一的選擇，並且我之前還使用過，印象中很接近理想中留言系統的樣子。

我沒有選擇自部署，而是直接用的 cusdis 的官方服務，添加了 Webhook，有新的評論就可以在 Tg 上實時提醒。之前就搭建了 MTPROTO，也不需要擔心 Tg 收不到提醒。

由於 cusdis 是免登錄的評論服務，所以每一條匿名評論都需要管理員批准，看起來似乎有些繁瑣。不過測試的時候我發現可以直接在 Tg 中免登錄批准評論，跳轉也很方便。

修改#

部署完之後，我將 Notion 中原本在 Super.so 資料庫的文章都移動到了 Nobelium 的資料庫。然後刷新了一下博客頁面，發現對默認的導航欄、頁腳、代碼塊和字體都不是很滿意。於是，不懂代碼的我就在 ChatGPT 的幫助下開始了自定義。

導航欄#

首先修改的就是導航欄。在 components/Header.js 中，有這樣一段代碼：

const NavBar = () => {
  const BLOG = useConfig()
  const locale = useLocale()
  const links = [
    { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
    { id: 1, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout },
    { id: 2, name: locale.NAV.RSS, to: '/feed', show: true, external: true },
    { id: 3, name: locale.NAV.SEARCH, to: '/search', show: true }
  ]

其中 id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true 可以翻譯為 id: 顯示順序, name: local.NAV. 變量, to: '路徑', show: true。

簡單理解，變量就是在導航欄中需要顯示的名稱變量，路徑就是這個變量指向的 URL 是哪裡。比如 id: 0 這個鏈接的變量是 INDEX，路徑是博客地址。

既然存在變量，就需要先到申明變量為何物的文件中設置好變量的名稱。在 assets/i18n/basic 中可以看到 en-US.json 等 6 個文件，所對應的就是 blog.config.js 中設定好的語言。於是，我就在 zh-CN.json 中修改和增加了導航欄變量和顯示名稱。

// 修改之前
"NAV": {
    "INDEX": "博客",
    "RSS": "訂閱",
    "SEARCH": "搜索",
    "ABOUT": "關於"
  },

// 修改之後
"NAV": {
    "INDEX": "Blog",
    "RSS": "RSS",
    "SEARCH": "Search",
    "ABOUT": "About",
		"Page": "Page",
		"Newsletter":"Newsletter"
  },

考慮到我增加了 Newsletter，會跳轉我在小報童的付費專欄訂閱，那麼 RSS 再顯示為訂閱會產生語義歧義。所以乾脆把所有的變量顯示名稱全都改成了英文。

修改完 zh-CN.json 後，我就在 Header.js 中修改了導航欄中各條鏈接的顯示順序，並刪除了 About（內容移動到 Page 頁）。

以上的代碼內容修改完後，我回到了 Notion，在 Nobelium 的資料庫中增加了兩個 type 為 Page 的頁面，其中一個的 title 為 Newsletter，slug 留空（因為已經在代碼中添加）；另一個的 title 為 Page，slug 為 page。

頁腳#

Nobelium 的默認頁腳左邊為 © 昵称 博客起始年份 - 現在的年份，右邊為 ▲ Powered by Vercel。

我覺得這樣不美觀，就想著把左邊的 © 昵称 博客起始年份 - 現在的年份 移動到右邊，把 ▲ Powered by Vercel 移動到 Page 頁，左邊則顯示帶有 Copyright 頁面鏈接的 Creative Commons 圖標。

在 components/Footer.js 中看了半天，也不知道該怎麼修改。於是問了 ChatGPT，他直接幫我生成了代碼，複製粘貼進去之後，重新部署後美觀了許多。

代碼塊#

我發現在深色主題中，代碼塊的顏色依然是淺色，晚上看著十分扎眼。搜索了一番後，找到了 Leon 在《記錄新博客：nobelium, Vercel, Tailwind CSS 和域名》中也提到了這一點，他用了 Prism.js 提供的深色背景 prism-tomorrow.css，還修改了 notion.css 的代碼。我沒有那麼麻煩，直接到 pages/_app.js 中把原本引用的 prism.css 做了替換。

// 替換前
import "prismjs/themes/prism.css";

// 替換後
import "prismjs/themes/prism-tomorrow.css";

字體#

一直都很喜歡在 GitHub 上開源的霞婺字體，在之前還在用 Typecho 的時候就想着把字體換成霞婺文楷，但沒有成功。這一回怎麼著都得嘗試一下。

我看到 public/fonts 中有四個 woff2 的字體文件，於是找到了霞鹜文楷的 LXGW Bright GB 版本，下載並上傳了 LXGWBrightGB-Regular.woff2。

之後先是在 styles/globals.css 中聲明了字體。

@font-face {
  font-family: 'LXGWBrightGB-Regular';
  src: url('/fonts/LXGWBrightGB-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

然後在 tailwind.config.js 中添加了字體。

// 修改前
fontFamily: {
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

// 修改後
fontFamily: {
        lxgw: ['LXGWBrightGB-Regular', 'sans-serif'],
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

再到 components 文件夾中修改了 ****Container.js 和 NotionRenderer.js 兩個文件。

終於，我在博客上配置好了霞婺字體，實現了一個心願。

完善#

代碼部分的修改完成，接下來就是回到 Notion 中，在 Nobelium 資料庫中完善博客的內容了。

我首先完善的是 Page 頁面中的內容。我將 Page 頁面定義為博客的獨立頁面入口，它本應該只是一个不帶鏈接的菜單按鈕，其架構在理想狀態下是這樣的：

Page
├──── [Memos](https://memo.hhzz.plus/explore)
├──── [File Gallery](https://file.hhzz.love)
├──── [Monitor](https://monitor.hhzz.plus/status/public)
├──── [About](https://justgoidea.com/about)
├──── [Copyright](https://justgoidea.com/copyright)
└──── [Friend Link](https://justgoidea.com/links)

因為 Nobelium 目前還不支持二級菜單（submenu），為了保持導航欄的簡潔，只能將我的 Memos，File Gallery，Monitor 這三個獨立頁面，和原本應該在 About 和 Friend Link 中呈現的內容都放到 Page 頁面中。

Memos 是我利用 GitHub 上的仿 flomo 的開源項目 memos 自部署的一個快速備忘錄。這裡存放著一些目前不成熟的想法，也可以把它看作是我的私人「Twitter」。目前的分類包括 #閃念，#思考，#碎碎念，#吐槽，#推薦等。

File Gallery 是一個資源分享站，收集到好玩的、實用的資源會存放在裡面。

Monitor 是一個監控站點，用來監控我在網絡中部署的網站、服務和 VPS 的運行情況。

About 則分為了 About This Site 和 About Me 兩部分書寫。

在 About This Site 中列舉了博客的名稱（標題），網址，Logo，描述（副標題），版權聲明，技術建構，DNS 和 CDN 服務，以及使用的字體。因為將頁腳的 ▲ Powered by Vercel 移除了，所以在技術聲明中，進行了說明，同時也表達對 Vercel 的感謝。同樣的，我使用了 Cloudflare 做 DNS 和 CDN 服務，使用了霞婺字體，這兩者和 Vercel 一樣都提供了非常好用的免費服務，也理應說明並表示感謝。另外，還寫了一小段我一直堅持寫博客的初衷。

在 About Me 中，簡單描述了我的 MBTI 人格、身份和職業，寫了我的座右銘，留了我的 Email 和 Twitter。

完善 Page 頁面的內容後，我又製作了 Copyright 頁面並修改了 Footer.js ，使左側的 Creative Commons 圖標指向了這個頁面。

總結#

博客原本就應該純粹，用於記錄與分享。Notion 非常好用，Nobelium 非常簡潔，滿足了我對博客的全部需求。在這個過程中，我也學到了許多知識，比如關於 Tailwind CSS 和 Next.js，我依然不入門，但至少能看懂了，也知道該怎麼樣向 ChatGPT 提問以輸出我想要的代碼。接下來，就是認真梳理與思考該怎麼樣繼續提高文字的水準了。

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