今日複今日,今日何其少。
今日又不爲,此事何時了。

利用Notion配合Vercel和GitHub搭建個人博客

Notion是一款具有真正潛力的筆記應用程序,成立於2016年,總部位於美國加利福尼亞州三藩市,可為用戶提供個人筆記的記錄、管理、搜索以及團隊工作所需的多人協作、項目管理、數據整理功能,滿足用戶多場景下的使用需求,而且創作的文章等內容可通過登陸賬戶來實現多平臺無縫過渡,讓移動端的便攜性得以最大發揮,將日常工作、應用融為一體,是一個集筆記、任務管理和項目於一身的工作空間。

官方網站https://www.notion.so

登陸Notion,由於Notion不支持中文版,首先需要進行漢化。Chrome應用商店搜索安裝“NotionCn”插件,刷新重新加載頁面即可完成漢化。插件的翻譯是經過開發者人工校對,翻譯結果比較準確。打開Notion Blog模版,然後點擊右上角的「Duplicate」複製,將Notion Blog模版克隆到您的賬號之後,點擊右上角的「Share」分享➠「Publish」發佈➠「Publish to Web」發佈到網絡,複製網頁鏈接,互聯網上的用戶就能使用這個鏈接來訪問您的個人頁面了。而這個頁面就是您個人網站的內容編輯頁面,先不要修改,等部署之後再慢慢修改。
登陸GitHub,打開NotionNext項目鏈接。

NotionNext項目https://github.com/tangly1024/NotionNext

點擊右上角「Fork」➠「Create Fork」克隆NotionNext項目到您的GitHub賬戶下。NotionNext調用了Notion的API來展示Notion的頁面,同時提供了一些主題和特效,可以定製化網站效果,是搭建個人網站的關鍵。唯一需要關注的就是blog.config.js文件,所有主題特效的修改都只需要修改這個配置文件即可。
使用GitHub賬號登陸Vercel新建項目,在倉庫列表裡面選擇NotionNext,點擊「Import」配置您的NotionNext,點擊「Environment Variables」配置環境變量,Name填寫:NOTION_PAGE_ID,Value(Will Be Encrypted):填寫您個人主頁的值,例如:您之前複製的個人網頁鏈接是:https://marvelous-sociology-622.notion.site/84de40ebce954bd095aca9f20bed5c92?v=d0dec5a568ce4b259a2a7eeaae68780c&pvs=4,您的個人主頁的值就是:84de40ebce954bd095aca9f20bed5c92,點擊「Deploy」部署,等待兩分鐘左右部署成功。點擊圖片自動跳轉到Vercel自動分配給您的域名訪問您的個人網站。
總所周知,由於Vercel中國大陸專屬域名的汙染,自動分配的域名可能無法訪問,需要自定義綁定域名。直接在「Setting」設置➠「Domain」配置域名,添加域名後需要在您的域名解析商添加兩條A記錄和CNAME記錄。
網站部署成功之後就可以配置主題以及內容來定製化您的個人網站了,先修改主題和展示效果,在GitHub的NotionNext倉庫的blog.config.js裡面可以看到,有兩種方式可以修改:

一. 直接修改blog.config.js文件,修改之後會自動觸發Vercel部署。
二. 使用Vercel項目的環境變量Environment Variables修改,這裡的修改會覆蓋掉blog.config.js的內容。
文件裡面每一行的作用都有詳細的註釋,您可以根據需求修改。在GitHub上的修改,無需重新部署,Vercel會監聽GitHub的修改,自動部署。
所有帶有process.env前綴的變量,都可以在Notion裡面添加環境變量配置來覆蓋,同NOTION_PAGE_ID一樣,意味著如果您不想修改NotionNext代碼倉庫,是完全可行的。
同時NotionNext代碼倉庫還有著其它非常豐富的配置可以修改,甚至可以顯示主題選項,一鍵切換主題,顯示鼠標點擊特效、動態特效、寵物掛件、音樂播放插件等等。
返回Notion,可以看到Notion Blog模版。模版是一個表格,表格的每一行是一篇博客,您可以在表格上面進行編輯,最終會反饋到您的個人網站上。

解釋一下表格各個列的意義
type – Post:博客,Page:菜單(歸檔,留言,友鏈等),Notice:公告
status – Published: 已發佈,Invisible:不可見,Draft:草稿
title – 具體的博客內容,點擊Open即可打開編輯
slug – 鏈接後綴,不填就是默認的notion的隨機字符串,可讀性不好,建議填寫

點擊+New可以添加新的一行,也就是新的一篇博客,點擊文檔圖標打開具體的博客內容進行編輯,Notion文檔支持MarkDown語法。輸入/就可以編輯特定格式的文本,比如添加頁面、待辦列表、標題、表格、有序列表、無序列表,甚至還能添加媒體,比如圖片、視頻、音頻、代碼、文件等等,所以說Notion是非常強大的。當您需要寫一篇文章的時候,只需要在複製後的模版裡面添加一行,然後編輯那個頁面就可以了。編輯完之後,鏈接可以分享給其他用戶,他們可以通過鏈接訪問您的個人主頁。這也是Notion的協作工作所支持的,可以支持頁面分享。分享的頁面跟您編輯的頁面是一樣的,並沒有主題展示效果,也不支持域名自定義。
修改之後等待一段時間就會自動部署到個人網站。如果想要儘快生效,可以在Vercel手動部署。點擊項目➠「Build Logs」➠「Redeploy」重新部署。

演示https://www.365tol.eu.org

赞(0)
未經允許不得轉載:365t在線 » 利用Notion配合Vercel和GitHub搭建個人博客

評論 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址