這個網站是怎麼建立起來的？ | 🐻‍❄️白熊的精神家園

❗

閲前提醒：本文的大部分內容為非專業操作，可能會有一定的風險，僅供娛樂和參考。如有需要搭建站點的意願，請查閱專業人士提供的教程或官方文檔。

🫠

這個網站從建立起來，到完善成現在這個樣子，花了我一整天的時間。

可能有的朋友看到這個標題覺得很疑惑：建站的動機你不是已經講過了嗎？怎麼還要講？

請別誤會，這次我們不說那些豪情壯志，而是在講述這個網站從零到有再到現在這樣的情況的一個過程，也就是網站搭建的過程。

起因：從「以notion為基礎寫部落格」到放棄該想法

❓從什麼時候開始想到用notion建網頁的？

我第一次接觸到notion這個平台，是從矛之酒館wiki開始的。

這是一款FVN（獸人視覺小說）+RPG類型的遊戲，為防止跑題，這裡不展開描述。改天我再細說這款遊戲好了（挖了一個坑）。

言歸正傳，我看到了這個頁面右上角的一個「免費試用」，然後帶著好奇心點了進去，才發現這個網站使用的是一款可以多人一起協作的平台完成的，而非傳統維基類網站常用的Mediawiki。所以我便開始註冊了帳號，然後試用了一下。

然後我在某天突然想到，自己好像並沒有寫過自我介紹的頁面。每次在和新獸友（尤其是台灣獸友）交流的時候，他們都會把自己的自介發出來給我看，然後會問我有沒有自介。我說我沒有，然後用鍵盤手敲了一段簡短的自我介紹⋯⋯經常發生這樣的事情其實令我很尷尬，於是建立自介的想法就萌生了出來。

其實我摸索了一下，就知道了這種網站的建造方法，真的非常簡單：

只需要註冊一個notion帳號，然後點擊已經寫好的頁面的右上角有一個「共享」的按鈕，然後點按「發布」即可自動生成一個公開的網站。

對於那個時候只想著製作一個自介頁面的我來說，這個東西真的已經夠用了。不需要簡短的域名，只需要通過連結樹（Linktree）在裡面做一個「個人自介」的按鈕讓粉絲們點進去即可。

我的連結樹圖片（2026年7月，因為過長這裡做了隱藏處理，可點開）

其實原本到這裡，故事就應該結束了。因為我的自介已經完成，並且之前就已經利用notion寫了兩篇文字委託資訊的頁面。我的目的其實已經達到了。

但我是一個喜歡折騰一些東西的人，雖然我對互聯網編程懂得不多，但我有時候很喜歡搗鼓這些東西無法自拔，哪怕這些東西根本無法變現（又在想著賺錢呢w）。

所以，一個念頭在我的心中萌生了起來。

我想做一個專門用來總結自己和分享用的部落格（博客），而且能夠利用起來，讓我的讀者朋友們能夠願意去訪問它，我也能夠將目前已有的平台和這個新站點串聯起來。

於是，我就按照製作自介的方法，製作了一個專門用來收集像本文這樣的文章的收集站點。

（不用問我有沒有當時做出來的圖了，因為已經被我改造成現在的後台了w）

💡創建「白熊的精神家園」文件夾

其實一開始，我只是想利用notion保存一些我的文章然後用一個頁面給他展示出來。選擇notion的原因是因為我之前寫自介和委託須知的時候用的就是它，並且我覺得他的設計風格我很喜歡。

所以我一開始就想著就乾脆利用notion的網頁發佈功能做一個網站，然後把文章匯總起來。

但很快我就意識到了一個問題：

首先notion他不是一個適合用來製作部落格的一個平台，他是一款協作型的筆記平台。

先不說只用這個平台製作出來的站點本身就很簡陋，很多的插件也是沒有辦法直接放進去。更重要的是：那個時候我看著那個簡陋的頁面，我有了一種很不好的預感：

一種三分鐘熱度，然後熱情很快消退，最後到放棄的那種非常熟悉的預感（笑）。

只能說，它可以把你寫的那些東西都收集起來，但如果想要展示出來吸引更多的人來看，就需要一個成熟的部落格型網站來「撐門面」。

雖然說我本身（至少現在）並不靠寫部落格賺錢，但我自己看著簡陋的notion公開頁面，我自己其實都沒有想打開它的興趣，更別說能堅持下去了。

於是我就決定：尋找辦法看能不能和其他一些朋友一樣創建博客站點。

一開始我試著去問了一下Gemini，想從它那裡尋找辦法。我也在詢問的時候有意把notion放進去，看能不能有什麼辦法將notion作為一個輸入文字的工具，然後再另尋一個平台來將它展示出來。

說真的，無論是Gemini還是ChatGPT，他們的回覆基本上都是往那些看著很不好用的付費方式推薦給我的。我也試著體驗了一下，真的很不好。所以我就決定：

放棄使用notion寫部落格的想法，尋找合適的部落格平台。

🤔wordpress和Wix：替代notion的備選項？

一開始我去找了YouTube上各類部落格的搭建方法，他們都建議我去選擇Wordpress或者是Wix這兩個平台。不過大多數都是推薦我選擇Wordpress。

但後來，我從其中的一位YouTuber的視頻（影片）裡有提到：Wordpress有兩種，一個是Wordpress.com，另一個是Wordpress.org。前者是免費建站但是有各種束縛，甚至可能會導致站點的內容因為違規（或者說不符合他們的要求規範）而消失。然後Wordpress.org則是和許多自行搭建的部落格站點一樣，需要花錢買域名然後就自己想怎麼寫就怎麼寫。

所以，我覺得大家推薦Wordpress的原因都是因為剛才提到的org方案了。

但我當時的想法只是自己做一個站點，然後收集自己的文章，並沒有考慮太多。所以當時最後就決定還是用Wordpress.com好了。當時我連帳號都註冊了，就等著要把新寫的文章放進去了。

至於Wix⋯⋯從來就沒想過，畢竟我就沒見過身邊做部落格的朋友用這玩意，我就不要反其道而行之，去當那個「最美逆行者」了（笑）。

轉機：notion從放棄再到拾起

😄NotionNext：及時雨

雖然話是這麼說，但我在一邊不甘心地在wordpress.com裡填資料的同時，又去問ChatGPT：「notion真的沒有辦法用來搭建部落格站點了嗎？」

是的，依舊同樣的回答：「不能」。

然後我就去嗶哩嗶哩（bilibili）繼續去查資料，結果就發現了這個視頻：

視頻標題：「利用Notion和Vercel搭建个人博客|NotionNext|vercel部署|一键部署！」視頻BV號：BV1aK42187hF Up主：Marklin_BL

ChatGPT和Gemini，你們真的太遜了，都不如人家嗶哩嗶哩（畫外音：就是你自己懶得去搜全部問AI啊，怪AI幹什麼？😅）。

看完之後，我便果斷放棄使用Wordpress的念頭，儘管後面的程序再複雜，我也要用notion把這個站點給搭建起來。

我的操作基本上和視頻裡的是一樣的，所以我就不做過多的贅述了（懶）。簡單點說就是把他提供的模板塞進我的notion工作台裡，這樣就會形成一個十分系統完備的後台。

我為了讓這個模板導入進來，我特地註冊了一個GitHub帳號，專門用來放置我的站點的底層代碼。然後我又按照視頻裡的操作，註冊了一個vercel帳號。至於域名，我當時也只是抱著試試看的態度，因此就沒有跟著視頻裡的去準備。

大概左側會出現這樣的東西：

然後就是先把一些基礎的信息修改好，然後再去按照之前提到的notion發佈站點的方法一樣，將這個頁面發佈出去，形成一個不規則的鏈接。這裡為了保護我自己的站點就不公布具體的截圖和notion鏈接了。

然後登錄了vercel之後，新建一個項目和我的GitHub帳號連結起來。大概花了幾分鐘以後，就看到了英文的「congratulations！」了，說明我的站點已經搭建的差不多了。

因為本身vercel就有給我的新站點提供了域名（雖然我後來講前面的前綴改成了「blog-kirinice」了），所以我就暫時不打算去花錢買域名了，畢竟只要notion還在，NotionNext還能正常用，我的這些文章就還會保存，這就夠了。等我以後有能力花錢去買域名了再說（其實就是害怕自己三分鐘熱度做著做著放棄了還花了錢進去⋯⋯或者說就是懶啊！）

在我看到自己的站點搭建出來的效果展示在我的眼前時，瞬間感覺自己似乎做了什麼很了不起的事情，很有成就感。

裝修：完善我的部落格站點

❤️主題：Hexo

之所以最後選擇了使用這個主題，是因為它可以把我的資料完整地展示出來，而且作為部落格網站，他的分布也很合理（其實也是因為大家都有用這個或者衍生的主題啦w）

我看了一下換主題的方法也很簡單（應該吧），只需要將需要的配置文件導入進我的站點項目中，然後在底層代碼裡修改一下訪客們打開的時候默認的主題即可。相對來說還是很方便的。

不過或許等以後某天看到更好看的主題，我會考慮換一下的。然後到時候就又可以水一篇折騰筆記了（喂）。

😨評論區：折騰站點的惡夢（對我來說）

然後看了一圈之後發現，NotionNext本身並沒有自帶評論區，需要自己安裝評論區插件才行。

我安裝了三個評論區插件，其中最讓我感到頭疼的就是Waline和Twikoo。

Cusdis很好安裝，只花了幾分鐘的時間就部署好了，但Twikoo和Waline真的花了我整整一個下午的時間，不斷地調試、失敗、再調試、再失敗⋯⋯我就覺得很奇怪，自己明明是按照官方文檔裡做的步驟來的啊？怎麼就是顯示不出來插件呢？

然後結果就是：我從白天折騰到晚上，誤打誤撞地就弄好了。

對，我不知道是什麼原因，就弄好了。而且是兩個插件同時弄好了的。

我：？？？？？什麼意思？算了能弄好就行了。

😅修改資料：一個編程零基礎小白反復嘗試修改底層代碼

其實NotionNext本身是可以通過自身的配置文檔去修改一些配置的。而且它的描述也說了：它的優先級最高。

所以不到萬不得已的情況下，我一般是不會擅自去碰底層代碼的。因為我除了在大學裡學過一點兒Python（現在也都全部還給老師了）以外，基本上對編程可以說是一無所知。而且我建立這個部落格的目的並不是為了擴展編程業務（救命我寫作和繪畫技能還沒賺到多少錢呢就要再點開科技樹😆），所以我也不想把我的網站搞出一堆bug出來。

但發現有些地方真的不得不必須要觸碰底層代碼，所以我就怎麼辦呢？嘗試，如果出現報錯就退回到修改前的狀態分析原因，然後再次嘗試。

這種反覆在網站死掉的邊緣來回試探的行為，應用在了我的站點字體顯示、黑夜白天模式還有個人資料的圖標：

其中修改白天黑夜模式需要修改底層代碼才能生效，自行添加是沒有用的。測試的效果除了Mac系統網頁版的Safari總是在抽風以外，Chrome還有其他的一些不同設備的瀏覽器打開都是沒有問題的。

但很神奇的是，我的頁面的「社交鏈接」這一塊，他不走這個底層的源代碼，而是我在NotionNext的「配置中心」文檔裡添加了這幾個配置，然後輸入了對應的內容，它才給我顯示了出來。但最後總算是把鏈接弄出來了。

其中連結樹（Linktree）的圖標是我按照NotionNext官方的教程文檔裡提供的網站下載的svg文件，然後將這個svg文件上傳進我的Github文檔裡，然後通過複製小紅書圖標的代碼再進行修改，添加匹配Linktree的代碼，然後再在配置中心填寫對應的鏈接，就能形成上圖的樣子了。（哇感覺我都要被我自己給繞暈了）

這部分的底層代碼是在這裡：