將 Notion 作為 Blog 使用：Nobelium + Vercel

date
Jan 28, 2022
slug
nobelium_setup
status
Published
tags
👾 Low-Code Hacker
🛠️ Productivity
summary
手邊一直有些各處蒐集來的酷東西想試做，但因為自己也沒有任何程式語言的基礎，幾乎所有內容都靠爬疏各類文章和 trial and error 完成 (對，真的就是最沒有效率的方式)，不過工具何其多，但求會用、能用就好。
type
Post
 
notion image
手邊一直有些各處蒐集來的酷東西想試做，但因為自己也沒有任何程式語言的基礎，幾乎所有內容都靠爬疏各類文章和 trial and error 完成 (對，真的就是最沒有效率的方式)，不過工具何其多，只求會用跟能用就好😅

．Intro

關於個人品牌頁

個人&工作上使用 Notion 愈來愈頻繁，Notion 這個雲端筆記服務本身就可將頁面公開分享，隨時編輯一下頁面，就能有個漂亮的作品集 / 履歷頁成型。
而之前找了一些使用文章後受到啟發，發現原來還能掛上個人域名，用 Notion Page + 自己的 Domain 作為 個人頁面，完全是再適合不過。
 
將域名綁定到 Notion Page 教學，可參考這篇：
🌐 Using the Notion page as a personal website with your domain on Cloudflare
Hi, DEV people! 🙂 Today, I give you a handy step-by-step guide to help you set up a Notion page on your domain with free serve by Cloudflare reverse-proxy. A nice bonus out of the box is protection against DDoS attacks, secure access to resources, automatically renew a SSL cert by Cloudflare for your domain and DNS servers.
🌐 Using the Notion page as a personal website with your domain on Cloudflare
https://dev.to/koddr/using-the-notion-page-as-a-personal-website-with-your-domain-on-cloudflare-1pi7
🌐 Using the Notion page as a personal website with your domain on Cloudflare
 

另一個應用：用 Notion 架設 Blog

而後來更發現，原來還能透過 Netlify 這類的網頁託管平台，在 Notion 架設 Website 及 Blog，完全開啟一片新天地。不過參考了幾篇文章後，還是認為有些麻煩，仍然需要一點前端 coding 基礎來改樣式跟建置，所以遲遲沒有動手（我就懶/爛👍🏻）。
在持續地尋找替代方案後，發現了能更少 coding、佈署簡易，且樣式也喜歡的方案：
💡
Notion + Nobelium + Vercel = 10分鐘自建一個靜態 Blog！
Nobelium —— 透過 NextJS + Notion API 做出的 Blog 系統。作者將 code 放在 Github 上，可自行 Fork (複製) 運用。
Vercel —— 免費的網站託管平台，可透過 api 直接從 Github 取 code，輕鬆地佈署網頁。
建置起來還滿輕鬆（但我手賤去做了一些改動，所以多花上不少時間），而且能將 Notion 作為網誌的撰文載體，管理跟撰寫都簡單，參考了幾篇教學後就決定試試，結果也如你所見，至少讓我還蠻滿意的。
 

．開始建置

前置準備

這段就不贅述，有這些帳號後就能快速開始：
  1. Notion 帳號
  1. Github 帳號
  1. Vercel 帳號 (可用 Github 帳號註冊)
  1. 屬於你自己的 Domain name (非必須，Vercel 也會提供一串獨立網址使用，但 Blog 用自己域名當然更好囉)
 

Step 1：準備 Notion 樣板

  • 1-2. 此樣板可看作 Blog 的編輯後台
      • notion image
💡
Title - 可以新增一行開立 page 作為文章
💡
Slug - 文章的網址名，接在 https://<Blog名稱>/<這串是Slug>
💡
Date - 網站發布日期
💡
Summary - 顯示在 Blog 外層的文章描述
💡
Tags - 顧名思義，可自行新增
💡
Status - 管理文章狀態，標注「Published」就會發佈文章
💡
Type - 可將該 Page 當作 文章 或是 頁面
  • 1-3. 將樣板設為公開，並點選「分享」找到此樣板的「Page ID」(Step 3會用到)
 

Step 2：Fork Nobelium 並進行調整

  • 登入 Github，並到 Nobelium 頁點選 Fork，自己取個專案名 (建議不動)
  • 回到自己的儲存庫 (Repositories)，進到剛剛所 Fork 的 Nobelium 專案
  • 找到「blog.config.js」進行編輯，Blog 的基礎設定都從這裡調整
  • 將「Public」資料夾中的圖片換成自己 Blog 想使用的
 

Step 3：佈署至 Vercel

  • 登入 Vercel，建立新專案
  • 新增 Environment Variables： NOTION_PAGE_ID，並貼上 Step 1-3 所找到的 Page ID
  • Deploy佈屬，等待完成。
至此就告一段落，完成後就會看到一串由 Vercel 提供的網址，並可以看到由 Notion 建置的 Blog 囉，只要 Notion 上有任何改動，在網頁上重新整理一下就能立即看到
 

Step 4：綁定自有域名

  • 在 Vercel 中點開建置項目的 「Setting」，並選擇其中的「Domains」，將欲綁定的域名加上
  • 添加後，會看到 Vercel 提供的「CNAME」設定值，請先留好此資訊
  • 至自己申請域名的平台，打開「DNS設定」界面，並依 Vercel 提供的設定值進行驗證。
  • 設定完後，就可以直接由該網域連結到 Blog 囉！
 

．補充：Nobelium 延伸設定

如果你也喜歡 Nobelium 的簡約風格，在完成上述的設定後，已經有一個很不錯的界面可以使用，而 Nobelium 還可以自行做一些延伸調整。

1. 網頁統計功能

可選擇使用 Google Analytics / Ackee，由 「blog.config.js」進行設定。

2. 留言區

可選擇使用 Gitalk / Utterances / Cusdis，同樣由「blog.config.js」設定。

3. 新增頁面 & 變更選單顯示

(a) 於 Notion 中建立一行，將「type」選擇為「page」，並填妥slug，即新增出一個頁面。 (b) 變更 lib 資料夾中的 lang.js 檔案，在每一個語言項目中（如en, es等，可自行增加zh-tw）的 NAV增加你希望放上的Menu名稱，可以填多個。 (c) 最後打開 components 資料夾中的 Header.js 檔案，調整順序、以及欲顯示的頁面 /slug。(外連連結也可以！) (d) 於 Github Push後即調整完成。
 
 
如未來有機會，再把更詳細的調整項目補充上來，有程式基礎的人也可以自行搜尋並做調整囉。
 
 

© Xians

Powered byVercel