使用 Notion 搭建自己的部落格

Notion 部落格

Notion 部落格 - 優點

• 十分鐘即可搭建 ( 僅需照著步驟做，沒有太多需要調整的地方 )

• 輕鬆調整排版位置與新增頁面 ( Using Notion Block & Notion Page )

• 輕鬆一鍵發佈文章 ( 勾選 Notion Table - Checkbox 欄位，即可一鍵 Publish，發佈文章 )

• 隨時撰寫部落格文章 ( Notion 支援 Web、APP，只要有網路就能撰寫文章 )

• 輕鬆添加 Tag 屬性 ( 有 Notion Table - Multi Select 欄位可以添加/新增 tag 欄位 )

• 圖片可直接從 Unsplash 搜尋 & 引用 ( Notion /image 內鍵功能 )

• 不用重新調整文章格式 ( Notion 輸出的 Markdown 格式不支援 Block 間距、Callout 功能 )

• 將 Notion 作為文章發布的後台管理工具 ( CMS )

• 文章、筆記統一在 Notion 中管理

Notion 部落格 - 缺點

• 目前尚未出現如 Hugo、Hexo 的社群，因此沒有眾多模板可以選擇、沒有眾多功能可以使用，均需自行開發。

• 客製化功能 難度較高，需熟悉前端最新技術 Next.js、TypeScript、React-Notion-X

• 無法使用 Git 對文章進行版本管理

• 由於要建立 Notion Blog 需將 Notion Page 公開分享，因此連未點選 Pulbic 的草稿，實際上也算是公開狀態。( 草稿不會出現在 Notion Blog 上，但會出現在 Notion Public Page 上 )

Notion Public Page vs Notion Blog

• Public Page：將 Notion Page 文章公開分享。 舉例: 蝦米's Blog Public Page

• Notion Blog：將 Notion Public Page 重新渲染成客製化網站。 舉例: 蝦米's Blog

1. 更快的網頁文章顯示速度，採用 Sever Side Render (SSR) 技術。

2. 更好的 SEO ，可自動為網站添加 Meta Description。

3. 更優美的連結分享，分享時能顯示出 圖、標題 ( Title )、自訂描述 ( Description )。

4. 絕佳的手機閱讀介面 ( RWD )。

5. 允許添加個人域名 Domain。

6. 隨文章標題調整的網頁 URL。

7. 隨頁面滾動的大綱模式 ( Table of Content )。

1. 允許更換網站圖示 Favicon。

2. 允許客製化調整 CSS 樣式。

3. 允許客製化添加網站功能，例如：RSS、文章觀看次數、討論串 ...

部落格架設教學

使用Notion搭建自己的博客(nextjs-notion-starter-kit)

2. 将原先的项目 fork 一份到自己的仓库，我们才能对项目进行编辑，点击 site.config.js 进入配置文件页面 3. 登录之后，我们需要从 GitHub 中导入前面配置好的仓库，点击左侧的下拉框，选择(Add GitHub Org Account) 4. 从自己的 GitHub 中选择刚配置好的仓库，仓库的名称应为「nextjs-notion-starter-kit」，接着点击右侧蓝色的导入按钮「Import」 5. 应该就开始部署了,时间较长,请耐心等待,部署后就可以看到下面的按钮 6. 点击就可以打开已经部署好的网站,在你的notion页面添加信息后,刷新几遍看看是否已经有了变化 到此为止,已经同步自己的notion到博客了,要想和作者一样的页面样式,只能按照这样添加table,直接把页面建成table,会导致页面变形

https://www.biglight.cc/notionnextjs-notion-starter-kit

客製化調整教學

• Favicon： /favicon 調整網頁頁籤的圖標、favicon製作

• 顯示屬性：針對文章頁面，將不需要的屬性 Hide Properties。