Leon

Leon

Live to the point of tears.
tg_channel
twitter
首頁封存NFT

記錄新博客：nobelium, Vercel, Tailwind CSS 和域名

#Apps#博客154
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
這篇文章介紹了如何使用nobelium、Vercel、Tailwind CSS和域名來搭建新的博客。作者分享了搭建過程和自定義的方法，包括使用Notion和Vercel來部署網站，以及使用Tailwind CSS來自定義樣式。文章還提到了如何設置Gravatar頭像和使用Cusdis來替代Gittalk作為評論系統。整篇文章內容豐富，值得一讀。

這篇文章有一些地方進行了修改，來 這裡 看最新版的文章吧。

長文預警（一不小心寫了一萬多字…… 真希望我寫論文有這動力）。這幾天可能是為了逃避一些現實的壓力，我瘋狂折騰了幾天。用 nobelium 搭建了一個新的博客，折騰了一下 Tailwind CSS，順便買了一個域名，給自己的博客都上了自己的域名。

其實去年的時候我就發現了 nobelium 這個項目，也成功搭建了，但是網站的排版樣式我一直想調整一下，但是當時不會也沒花時間折騰，這幾天我就集中現學現賣折騰了一下。

效果預覽

部署過程#

如何搭建在 nobelium 的 README 中已經描述得十分清楚，這裡簡單敘述一下。首先需要準備的是 GitHub 賬號，Notion 賬號和 Vercel 賬號（可以直接用 GitHub 登錄），Fork 一下 craigary/nobelium 這個倉庫。

image

然後 Duplicate 一下 craigary 提供的 Notion 模板（一個 database）到自己的 Notion 賬號，在自己的 Notion 中分享這個 database。

image

分享之後需要記錄一下自己的 Page ID，每個 database 都不一樣，craigary 的這張圖說明十分清楚。

image

再登錄 Vercel，選擇新建項目，從 GitHub 中導入剛剛 Fork 的倉庫，操作都比較符合直覺，這裡就不截圖了，然後選擇 Next.js 框架。然後，設置好環境變量，名稱為 NOTION_PAGE_ID ，內容為自己頁面的 Page ID，讓 Vercel 自動部署。

image

image

部署成功之後，訪問 Vercel 提供的網址，應該就可以看到內容了。這時候可以看看那個模板 database，裡面的每個屬性的含義應該都很清楚了

  • title: 文章的標題；
  • date: 文章發布的時間，如果留空默認是文章創建的時間；
  • slug: 文章 URL 尾部的字符，也就是 .com/xxx 中 xxx 的部分，建議使用英文，用 - 代替空格，如果使用中文或者空格、標點，會被 UrlEncode 變成一長串，鏈接會顯得很長；
  • summary: 文章簡介，會顯示在首頁標題的底部；
  • tags: 文章標籤，可以對文章進行分類；
  • status: 文章狀態，只有 Published 狀態的文章會在博客公開顯示；
  • type: Post 會直接顯示在首頁，Page 只有直接訪問 URL 會顯示，不會出現在首頁文章列表中。

我個人使用了 Notion 的 Group（分組）功能把這個 database 按照 status 進行了分組，這樣我能更方便集中管理已發布和未發布的內容。

image

之後，我找了幾篇以前寫的東西，粘貼到了 Notion 模板裡，再回到博客，直接刷新頁面就可以看到文章了。

開始自己折騰#

blog.config#

把自己 Fork 的倉庫 clone 到本地，就可以開始折騰了。

按照 README 中的介紹，可以修改 blog.config.js 文件對博客進行第一步的自定義。可以自定義的內容在文件中也有很詳細的註釋了，不要修改作者註釋了 do not change 的地方。這裡介紹兩個我覺得需要注意的地方。

  • 首先是 email 要記住自己填寫了什麼，因為和頭像有關，後面再詳細說明；
  • 其次 comment 我個人選擇了 Cusdis 而不是 Gitalk，後面也會詳細說明。

頭像：Gravatar#

默認狀態下，nobelium 的頭像是 這樣的：

image

十分眼熟，因為這是 Gravatar 的默認頭像。需要到 Gravatar 官網 註冊一個賬號（用 WordPress）賬號也可以，注意這裡要用剛才在 email 中填寫的郵箱註冊，然後按照提示上傳頭像，成功後等待一會，博客應該就會刷新出自己的頭像了。

原理應該就是 nobelium 會自動使用 Gravatar 生成的頭像 URL 獲取頭像，只需要在 https://gravatar.com/avatar/ 後加上註冊郵箱的 md5 值，就可以直接獲取頭像了，在 layout.js Ln45 可以看到。

評論：Cusdis#

以前在 Gridea 使用的評論系統是 Gittalk，和倉庫綁定後，就可以通過 issue 實現評論功能，可以支持 Markdown，只要有 GitHub 賬號就可以評論。但是體驗上還是有點沉重，在國內的互聯網環境更是經常加載不出來，也有人認為這是對 GitHub 的 issue 功能的誤用。但對我來說最難受的部分還是自定義樣式比較難。

所以這次在 nobelium 發現 Cusdis 之後就試了試，結果很驚喜。按照官網的介紹，Cusdis 是 Disqus 的輕量開源替代，大小只有 5kb，設置成功後基本上是和網頁同步加載成功，而且不需要註冊任何賬號就可以評論。

image

Cusdis 可以選擇自己部署，也可以使用官方提供的服務器。只需要在官網註冊賬號，添加一個網站，記住 data-app-id，並填寫到 blog.config.js 對應的位置，如果使用官方提供的服務器，可以直接按照這樣填寫：

cusdisConfig: {
  appId: '替換自己的 data-app-id', // data-app-id
  host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
  scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
}

完成後就可以把所有的更改 push 到 GitHub，等待 Vercel 部署完成，就可以刷新查看成果了！

Tailwind CSS#

以上是最基本的自定義，但對於我這種折騰的人肯定不能滿足，我還是喜歡折騰 CSS。

第一天剛剛搭建好 nobelium 的時候我其實就已經折騰了一下樣式，但是由於沒有仔細看文檔，上來我就修改了倉庫裡比較明顯的 global.css  和 notion.css  兩個文件，不管裡面本來看不懂的內容，直接配合檢查工具直接把自己想用的樣式用 CSS 硬寫了一些，然後野蠻地加上 !important ，強制生效。然而第二天的時候我仔細看了看 nobelium 的文檔，發現 nobelium 在介紹中也說自己使用的是 Tailwind CSS / JIT 框架，方便自定義，於是我就查了一下這個似曾相識的名字，發現我錯過了太多，之前的自定義基本也就是野路子，實在不算優雅。

我說說我簡單的理解，nobelium 的兩個 CSS 文件其實是負責兩個部分 global.css 主要負責整體的框架，包括導航欄、首頁、footer、文章作者等部分；notion.css 主要負責文章正文部分。可以理解為 nobelium 是為 Notion 中的內容提供了一個展示的框架，正文外的其他內容由 nobelium 生成，然後從 Notion 中取正文內容再通過指定的樣式渲染，最終展現一個完整的博客。

回到 Tailwind CSS 上，根據我的理解，Tailwind CSS 提供的是一種快速在 HTML 文件中指定樣式的框架，只需要在 HTML 元素中指定一些特定的 class，就可以自動生成對應的 CSS 屬性，從而達到不離開 HTML 文件快速實現樣式自定義的效果。因此再回到兩個 CSS 文件中，其中的內容便似乎可以看得懂了。

舉個例子，在 notion.css 文件中我自定義了這些：

.notion-h1, .notion-h2, .notion-h3 {
  @apply mb-2;
  @apply text-left;
}

由於是在 CSS 中使用 Tailwind，所以選擇器的規則和 CSS 一樣，然後在 @apply 後的內容就是 Tailwind CSS 的「語法」了。 mb-2 是代表 margin-bottom: 0.5rem; /* 8px */ ，text-left 代表 text-align: left; 。

然而並不是所有的樣式都在這兩個 CSS 中被指定，前面說 Tailwind CSS 最主要的功能是在 HTML 文件中快速指定樣式，因此我們還可以在生成 HTML 文件的幾個 js 文件中找到 Tailwind CSS 的痕跡。

再舉個例子，BlogPost.js 我修改成了這樣：

const BlogPost = ({ post }) => {
  return (
    <Link href={`${BLOG.path}/${post.slug}`}>
      <a>
        <article key={post.id} className="mb-6 md:mb-8">
          <header className="flex flex-col justify-between md:flex-row md:items-baseline">
            <h2 className="text-lg md:text-xl font-bold mb-2 cursor-pointer text-black dark:text-gray-200">
              {post.title}
            </h2>
            <time className="flex-shrink-0 text-gray-600 dark:text-gray-500">
              {formatDate(post?.date?.start_date || post.createdTime, BLOG.lang)}
            </time>
          </header>
          <main>
            <p className="hidden md:block leading-7 text-gray-700 dark:text-gray-400">
              {post.summary}
            </p>
          </main>
        </article>
      </a>
    </Link>
  )
}

這個文件其實就是首頁的顯示效果，我想把簡介的文字調暗一點，讓文章標題文字更加突出，於是將最後一個 <p> 元素的 className 修改為 text-gray-700 和 dark:text-gray-400，查閱文檔可知 text-color-### 代表字體顏色為指定的顏色，其中 gray-700 是 Tailwind CSS 默認調色盤中的一種灰色，而 dark: 前綴代表在系統深色模式下適用，所以代表在深色模式下，這裡文字顏色使用 gray-400 顏色，比原來的更暗一些，可以實現我的效果。

如此類推，詳細的對應關係可以在 Tailwind CSS 的 官方文檔 中找到，文檔有很方便的搜索功能，作為純業餘的我折騰體驗也不錯。另外網上還有 中文翻譯版的文檔 可供參考。

之後，可以再對一些元素進行進一步的修改，例如我給 footer 加上了 CC BY-NC-SA 的圖標，並超鏈接到博客的版權頁，拿掉了原來 Vercel 的徽章（放到了關於頁裡）。

深色模式下的 Notion 顏色#

在默認的情況下，由於我的背景色設置就是全黑色，默認的調色盤顯示 Notion 顏色（包括但不限於字體顏色、高亮顏色、背景色等）十分不明顯，因此我手動吸取了 Notion 官方在深色模式下的各種色彩，並寫到了 notion.css 中。

這裡的顏色在 0 飽和度的各種深色背景下應該都可以使用（Notion 官方的深色背景色是 #191919，各位如果需要，在 notion.css 文件任意位置加入以下內容即可：

@media (prefers-color-scheme:dark) {
  :root {
    --fg-color-0: #6b728080;
    --notion-red: #DF5452;
    --notion-pink: #D15796;
    --notion-blue: #5E87C9;
    --notion-purple: #9D68D3;
    --notion-teal: #529E72;
    --notion-yellow: #CA9849;
    --notion-orange: #C77D48;
    --notion-brown: #BA856F;
    --notion-gray: #9B9B9B;
    --notion-red_background: #522E2A;
    --notion-pink_background: #4E2C3C;
    --notion-blue_background: #143A4E;
    --notion-purple_background: #3C2D49;
    --notion-teal_background: #243D30;
    --notion-yellow_background: #564328;
    --notion-orange_background: #5C3B23;
    --notion-brown_background: #4A3228;
    --notion-gray_background: #2F2F2F;
    --notion-red_background_co: #362422;
    --notion-pink_background_co: #302228;
    --notion-blue_background_co: #1D282E;
    --notion-purple_background_co: #2B2431;
    --notion-teal_background_co: #222B26;
    --notion-yellow_background_co: #392E1E;
    --notion-orange_background_co: #38281E;
    --notion-brown_background_co: #2F2723;
    --notion-gray_background_co: #191919;
  }
}

OG image#

折騰完以上的部分之後休息了一天，今天又心癢了看了看項目文件，發現在 blog.config.js 文件中的 ogImageGenerateURL 。這也是 nobelium 的一個 feature 之一，自帶 Open Graph，但我折騰之後又發現了一些問題。

在原來的文件中，填寫的是 craigary 自己部署的一個域名，在 Container.js 文件中 Ln39 被引用：

<meta
  property="og:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png？theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

也就是說會將 OG image 指向一個域名，這個域名包含了被 UrlEncode 的文章標題和一些其他內容，可以推測應該也和 Gravatar 差不多，是可以通過 URL 直接提供 OG image 的。

於是我在 GitHub 找到了原來的倉庫，也是 Vercel 的一個項目：Open Graph Image as a Service。簡言之就是可以直接通過 URL 快速生成帶有文字的圖片，從而實現不用每張 OG image 都手動製作的效果。既可以直接訪問網頁在網頁上制作，也可以直接使用特定的 URL 就會返回特定的圖像。可以說和平常轉換機場訂閱節點的 API 很像了。

但是 craigary 提供的網址沒有 nobelium 的 logo，只顯示文字。猜測是指定的 logo URL 失效了吧。

image

訪問 Vercel 官方的鏈接，可以顯示並自定義 Logo，但是沒有支持中文的字體：

這些方塊都是中文……

於是自己折騰的機會又到了！

翻了翻 官方倉庫 的 issue，發現 #108 提到韓語顯示問題，果不其然是因為缺少字體。在這條下有 hoosan 的回覆 詳細說明了他對於同樣的日文字體的解決方法。看起來對於中文也是可以適用的。於是我就打算動手自己部署一個，然後修改一下應該就可以解決問題了。

首先我們要自己部署一個原版的 vercel/og-image 項目，同樣的還是首先 Fork 一下官方倉庫，然後按照 README 的指引修改 vercel.json 文件中的內容，我直接刪掉了架構、區域兩行，然後調低了一點 memory，rewrite 保持不變，最後文件看起來是這樣：

{
  "functions": {
  "api/**": {
    "memory": 1024
  }
},
"rewrites": [
    { "source": "/(.+)", "destination": "/api" }
  ]
}

現在應該就可以到 Vercel 網站開始部署了，步驟和以前一樣，還是從 GitHub 導入，框架選擇其他，然後就可以讓 Vercel 自動部署了。部署成功後可以打開網頁看看，然後就可以開始進一步的修改了。

首先是添加字體文件。

Google Fonts 網站有提供各種 Noto 字體，那種由於字體缺失顯示不出來的方框被大家叫做 tofu（豆腐），這套字體之所以叫 Noto，就是想要解決 tofu 問題，這裡用這種字體感覺挺合適的。看到項目中其他字體文件都是 woff2 格式的，而 Google Fonts 網站本身不支持 woff2 格式的下載，所以我進行了一些搜索，發現了 google-webfonts-helper 這個網站，可以直接下載 woff2 格式的字體文件。

我選擇下載了 Noto Sans SC medium 字體，勾選中文字符集和 500 字重，滾到頁面底部可以直接下載所有字體文件。下載成功後解压，將 woff2 格式的文件保留備用。

image

為了方便，我將字體文件更名為 noto-sans-sc-medium.woff2 ，並將該文件添加到自己項目的 api/_fonts 文件夾。

然後打開 api/_lib 文件夾下的 template.ts 文件，聲明一個新的 const 讀取剛剛的字體文件：

const noto = readFileSync(`${__dirname}/../_fonts/noto-sans-sc-medium.woff2`).toString('base64');

image

同一個文件向下翻，再添加如下一段 CSS 代碼在下圖位置：

@font-face {
  font-family: 'Noto Sans SC';
  font-style:normal;
  font-weight: medium;
  src: url(data:font/woff2;charset=utf-8;base64,${noto}) format('woff2');
}

image

接著再向下翻，在 heading class 的 CSS 中添加剛剛的字體：

image

保存結束以上的修改，再將以上的修改推到 GitHub，Vercel 應該又會自動開始部署了，等到部署完成再打開網頁，雖然外觀沒有變化，輸入中文試試吧。

image

大功告成，又有圖片又有中文支持的自動生成 OG image 網站就完成了。接下來進行一些小調整，使用暗色背景，增加了一個 nobelium 圖標，字體大小增大了一點點，大概看起來就是這樣：

image

但是只在前端操作不是我們的目標，我們做一個可以自動根據文章標題生成對應 OG image 的鏈接。所以我們點擊右側的圖片複製地址，得到了這樣的一個 URL

https://og-image-l3on.vercel.app/**Hello**%20World%20%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200

可以看到，**Hello**%20World%20%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95 這一段應該就是我們的標題經過 UrlEncode 的文本，.png 是選定的文件類型，而 theme=dark md=1 fontSize=125px 等內容就是我們其他的自定義設定了。因此我們現在要做的就是在之前提到的 blog.config.js 和 Container.js 文件中修改使用我們自己的域名和設置就好。

首先將 blog.config.js 文件中的 ogImageGenerateURL 修改為自己部署的 og-image 的域名（Vercel 會自動分配的），然後再到 Container.js 文件中，找到 <meta> 標籤下 property 為 og:image 的內容，將包括 .png?theme= 在內後面的內容選中，替換為剛才的那個 URL 中對應的內容即可。下面的 Twitter Card 設置也可以進行一樣的修改。我的設置如下：

<meta
  property="og:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

<meta
  name="twitter:image"
  content={`${BLOG.ogImageGenerateURL}/${encodeURIComponent(
    meta.title
  )}.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-white.svg&images=https%3A%2F%2Fgithub.com%2FLeonWong0609%2Fnobelium%2Fraw%2Fmain%2FNobelium-Logo.svg&widths=200&widths=200&heights=undefined&heights=200`}
/>

可見這裡的內容就是先取剛才的 blog.config.js 中的 ogImageGenerateURL 內容，加上斜杠，再加上 UrlEncode 後的文章標題，再加上一串自己代表特定樣式的字符串，拼成了一整個動態生成 OG image 的 URL。

保存修改，再推到 GitHub，等待 Vercel 部署完成，再打開博客，使用檢視工具就可以看到 OG image 鏈接了。再使用 Telegram 和 Twitter 測試一下，完美符合預期！

image

優勢#

打開 nobelium 的網頁，第一個感覺就是快。比起以前搭建在 GitHub Page 的靜態博客，這可快多了，基本看不到加載，點擊一個鏈接後立刻就會有內容顯示。

image

作為對比，這裡也展示一下原來的 Gridea 靜態博客的 Lighthouse 分數：

image

其次，使用 Notion 作為 CMS 也比以往 Gridea 中編輯 Markdown 文件更加方便。以往寫一篇博客雖然也可以先在別的地方寫，然後在移動到 Gridea 中，但是最後一步的發布還是要在電腦上操作。而且如果博文有圖片，還要解決圖片問題，要麼使用圖床，要麼就要一個個圖片文件導入到 Gridea 中。並且我的 Gridea 可能是因為網絡問題，長期無法在客戶端 push 成功，我每次都要在客戶端點擊同步，然後退出，檢查 output 文件夾中的靜態頁面文件是否更新成功，最後再用 Git 手動 Push 一下。比起在 Notion 中編輯完成，把標籤直接改成 Published 就能實現發布，實在稱不上方便。

image

但 nobelium 的方案也稱不上完美，還是有幾個地方讓我懷念 Gridea 的 Markdown 文件。

首先是靈活性收到了一定程度上的限制。Markdown 文件可以直接向上（下？）兼容 HTML，所以有時候一些個別的、需要自定義的元素（比如一些 badge 或者居中的文字什麼的）可以直接用 HTML 寫出來，但是在 nobelium 下，博文的內容其實就是 Notion 頁面的內容，而且也並非支持 Notion 中全部的 block 種類（例如新推出的簡單表格、可折疊的標題就還沒有支持），文字也無法居中等。可以說對於簡單的圖文博客，偶爾插個視頻那是完全夠用，但是如果對於控制博客頁面有更高的要求，nobelium 使用 Notion 的方法可能比不上直接使用 Markdown 靈活。

image

此外，nobelium 還要從 Notion 中取內容，所以一般會選擇公開一個 Notion database，如果選擇真的使用 Notion 當作博客的內容管理系統（使用標籤區分發布和草稿的內容），那麼公開的 database 可能會讓一些沒有準備好發布的內容公布在互聯網上。我個人是完全沒有這方面的顧慮，因為我很少直接在 Notion 中寫作。nobelium 還提供了一種使用 NOTION_ACCESS_TOKEN 來獲取內容的方法，可以不用共享 nobelium 的 Notion database，看起來就是攜帶 Token 訪問 Notion 內容，一個 Token 有效期是 180 天，對於我這種金魚腦，我自然不會選用這種方法。根據作者 craigary 的 roadmap，nobelium 未來應該會支持從 Notion 官方的 API 獲取內容，最近 Notion API 也正式結束 beta 階段了，對 craigary 更新表示期待！

最後，我原來的 Gridea 站點已經斷斷續續打磨了很久，很多細節已經符合我的喜好，這可能算是一次性遷移到 nobelium 的「沉沒成本」吧，我無法捨棄原來的 Wonder Space 那快兩年的修補、自已加的一堆的樣式、Telegram 即時預覽模板、OG 屬性、還有以前網友的評論。

域名#

折騰完上面的東西，已經過去兩天了，但是當時我完全沒有停下的意思。有一天看網鄰羅二德的 博客，發現他原來的 GitHub Page 有了自己的域名，我就想起來我一直想要有個域名。那天其實已經是凌晨兩三點了，但我還是說幹就幹開始搜索有關購買域名的信息。

我以前看的購買域名之類的內容多是在 GoDaddy 之類的網站購買，需要外幣支付手段，當時看到我就被勸退了。那天搜索之後發現其實國內各種雲就可以直接購買域名，因此我就在阿里雲的萬網搜索了一下。不看不知道，我之前一直以為域名一年至少是幾頓飯的支出，但我搜了一下我想要的 L3ON 前綴，發現 l3on.site 這個看起來還挺酷的域名一年竟然只要 6 元…… 我一邊後悔怎麼沒早点動手，一邊下單了一年。

在萬網購買只需要支付寶賬號就可以登錄，也可以直接用支付寶綁定的手機號做實名認證。我接受了這種隱私換來的方便（反正我博客內容還是挺陽光的吧），上傳身份信息，不到半個小時就搞定了實名認證，當時已經凌晨四點多了，系統提示實名認證可能要 24-48 小時，我就想着睡覺了，過幾天再折騰。

結果第二天醒來就看到了收件箱的郵件，當天早上 6:50 我就收到了實名認證通過的消息，希望是機器識別的，不然阿里員工上班時間有點過早了。

Vercel 的域名綁定其實很簡單，只需要進入項目的設置，填寫自己的域名，然後再在域名的 DNS 設置中加入一條 CNAME 記錄就可以了，我出於折騰的本性，還把域名的 DNS 改成了 Cloudflare 的，添加了 CNAME 後，不到五分鐘 blog.l3on.site 域名就生效了。記得當時我就對著屏幕，看著瀏覽器地址欄中這一串在浩瀚互聯網世界中代表我的角落的一串字符，一次次刷新頁面，覺得一點一點變開心。

原來的 GitHub Page 也可以自定義域名，和 Vercel 一樣簡單，只需要在倉庫的根目錄新建一個 CNAME 文件，內容為自己的域名，我選了 ws.l3on.site，或者直接在 Gridea 的遠程設置中填寫自己的域名，再把變動 push 到遠端就可以了。之後再在 Cloudflare 增加一條 CNAME 記錄，指向原來的 github.io 域名即可。現在，我在互聯網有兩個差不多的角落了。

總結#

所以這兩個博客我該留一個放弃一個嗎，我暫時覺得我可以一個都不放棄。Gridea 更像一個完整的博客網站，自定義程度更高，但是對應的管理也會相對複雜；nobelium 強大而快捷，讓我體驗了一把一些相對先進的技術，也給我帶來了幾個晚上學到新東西的快樂。所以我覺得沒必要要求自己二選一。因為博客對我來說，不是我的工作也不是我的負擔，更多是我的玩具，連小孩子都不會拒絕兩個玩具，我當然兩個都要。

但是我也不想只專注於這些東西而忘記了內容。技術對我有一種莫名的吸引力，總想讓我去嘗試新的東西，但是真的遇到難對付的問題時，我又往往懶於進行深度系統的學習，可能這也是我為什麼長期三腳貓功夫的原因吧。這次整理博客的時候又看了一下我的第一篇博文，我想起我的初心還是想有個自己能寫下自己所學所想的東西的地方，之前的兩篇隨感類的博客比較符合想象中的博客的樣子，就是和自己、也和一群看不見的讀者分享一些自己最想說的話。

所以前幾天折騰完博客，筋疲力盡，開心中又夾雜著一點點負罪感，我怕我又是在玩物喪志，正事不做只知道瞎折騰，雖然有做了很多事情的成就感，但是又覺得如果我什麼都不記錄下來，就算我當時以為我會了的東西我也會慢慢遺忘，然後這些花費我大量時間的事情似乎沒有意義。所以我很慶幸我今天一時衝動就開始打字了，從上午到深夜，一口氣寫了一萬多字，我也被自己驚訝到。未來的一段時間，我可能要從愛好中抽身，轉移更多的精力到生活中一些現實的問題上了，所以這篇長文也有點像收心前最後的狂歡吧。

最後的最後，如果你看到了這裡，謝謝你。如果文章對你有那麼一點點的信息增量甚至是幫助，那是我的榮幸，不論你是在我的哪個角落看到這篇文章，歡迎留言交流，也歡迎你到我另一個角落玩。

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