Notion 免費搭建個人網站，使用 Notion 的理由又多了一個。

Hello 大家好，這裏是工具狂人。

我是安哥。

相比我之前用 Hexo 搭建博客，這個方法完全免費，不需要購買服務器，還可以不租用域名，可以隨時隨地發佈內容，不侷限於安裝了 Git 的電腦，折騰起來也相對比較容易。

簡要說說這三個工具承擔的角色：

Notion：用作博客內容管理工具，Notion 在這裏承擔服務器或數據庫的角色。
Next.js：一個框架，一種在服務器端渲染的技術，弄不懂也沒關係，因爲我也不懂🤦‍♂️，但即便不懂，我也順利地用 Notion 搭建出博客了。
Vercel：一個免費的前端部署平臺，支持增量式更新，更新文章後無需重複部署。

使用這個方法搭建博客之前，請先確保你分別註冊了 GitHub 和 Notion 賬號。

01. fork GitHub 項目

我搭建的 Notion 博客是在一個 GitHub 項目「nextjs-notion-starter-kit」上二次改造而來的，這個項目用到了前面說到的兩個工具：Notion 和 Next.js。

這位作者搭建的博客效果如下圖：

博客頂部的封面圖是動態的，可用鼠標進行交互，感興趣的可以前往他的博客參觀：
_https://transitivebullsh.it/  _

GitHub 項目「nextjs-notion-starter-kit」地址：

h__ttps://github.com/transitive-bullshit/nextjs-notion-starter-kit

先打開這個項目的 GitHub 頁面，點擊右上角的「fork」，將其複製到自己的倉庫中。

02. 編輯配置文件

將原先的項目 fork（複製） 一份到自己的倉庫，我們才能對項目進行編輯，點擊 site.config.js 進入配置文件頁面。

這個配置頁面是從之前的項目複製過來的，因此它的配置還是之前的作者留下的信息。

點擊右上角的編輯按鈕，進入編輯狀態，這裏我們需要修改的信息有：

03. Notion 頁面 Id

下圖是我想用於呈現博客所有內容的 Notion 頁面，需要先點擊頁面右上角的 Share，將頁面啓用「Share to web」，即頁面的內容對所有人都可見，這樣別人纔可以在你的博客上看到你發佈的所有內容。

瀏覽器地址欄的 https://www.notion.so/phh95/064603b9235642ed9a42e86c1d4af186 就是這個 Notion 頁面的原始鏈接，末尾的一長串字母和數字的組合 064603b9235642ed9a42e86c1d4af186 就是 Notion 頁面的 Id。

將這些信息替換掉前面的配置文件中原有的信息，這裏只說 Notion 頁面 Id 和 Notion 頁面原始鏈接這兩項信息，其他的自行填寫啦。

完成修改之後，滑動到頁面下方，點擊「Commit changes」確認修改。

04. 將 GitHub 倉庫添加到部署平臺 Vercel

在地址欄輸入 https://vercel.com/ 打開部署平臺 Vercel，點擊右上角的 Sign up 按鈕註冊賬號。

Vercel 支持使用 GitHub 快速登錄，這樣我們就不用多註冊一個賬號啦。

登錄之後，我們需要從 GitHub 中導入前面配置好的倉庫，點擊左側的下拉框，選擇「Add GitHub Org Account」。

接下來的操作我在測試的時候忘記保留截圖了，但應該不影響博客在 Vercel 的部署，按照頁面提示，不需要修改配置信息。

點擊下一步，等待 Vercel 自動運行設定好的程序，直至頁面返回「Successful」的提示，說明我們的博客順利部署好了。

在返回的 Successful 頁面，會有一個「Visit」的按鈕，點擊按鈕就可以前往 Vercel 部署好的頁面。

我的 Notion 頁面部署在 Vercel 的效果如下圖，平平無奇，頁面樣式和 Notion 原本的頁面還是挺像的，可能只是用 CSS 稍微調整了一下頁面的樣式：

頁面頂部的浮世繪圖片來自 Notion 內置的圖庫，當你在 Notion 中更改了頁面頂部的圖片，博客頂部的圖片也會發生相應的變化。

對頂部的圖片是這樣，對博客的內容也一樣：只要你在 Notion 中修改了內容，刷新一下瀏覽器的博客頁面，它同樣會很快地同步過去（增量更新）。

這意味只要你有網，就可以隨時往自己的博客更新內容，隨時隨地、自由自在，寫博客就是要有這樣的感覺，這可能就是 Next.js 搭配 Vercel 的威力吧。

想參觀我用 Notion 搭建的博客的朋友，可以在瀏覽器中粘貼這個鏈接：

https://nextjs-notion-starter-kit-delta-peach.vercel.app/

以上，就是本次想和你分享的內容。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Est96N4T1_Yg3R5EW5uPuw

猜你喜歡