NEXT |
WEBB BLOG
這是一個由NotionNext生成的站點
Search
部落格上線啦謝謝你 NotionNext
date
Mar 15, 2022
slug
hello-blog-notion-next
status
Published
tags
Blog
summary
本站由 NotionNext 驅動，部署在 Vercel 上。 這篇文章記錄部署過程中遇到的一些細節。
type
Post
category
技術分享
icon
🍅 of writing

文件

如果你習慣 Gitbook 式的閱讀體驗

NotionNext: 基于Next.js 的Notion博客站点生成器
点击以下链接，开始创建你自己的Notion博客、并部署到Vercel托管平台 Vercel将会创建一个NotionNext仓库，并且只需要点击几个简单的配置就能为你部署这个网站。一旦配置完成，你在代码仓库中的每个改动都会被自动地部署。 复制这个模板到你的notion中 Write Templates 并将复制后的页面id粘贴在 github项目中的 NOTION_PAGE_ID 参数中， 例如 https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=cc5e82f4097741d7ba9e3d58f7bf7b15 上面这个notion页面的ID是 02ab3b8678004aa69e9e415905ef32a5 NotionNext是基于 Next.js 开发的，在本地开发也十分简单，首先在Github上Clone项目 NotionNext 。 本地安装 Next.js : yarn install 开发调试预览 : yarn run dev 编译打包 : yarn run build 运行打包项目 ： yarn run start 本地安装 Vercel ： yarn add vercel 预览到线上 : vercel 生产版本发布线上 ： vercel --prod
NotionNext: 基于Next.js 的Notion博客站点生成器
https://docs.tangly1024.com/zh/get-started#%E9%80%9A%E8%BF%87vercel%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
NotionNext: 基于Next.js 的Notion博客站点生成器

NotionNext Repo 的 README

NotionNext/README.md at main · tangly1024/NotionNext
一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为Notion和所有创作者设计。 - NotionNext/README.md at main · tangly1024/NotionNext
NotionNext/README.md at main · tangly1024/NotionNext
https://github.com/tangly1024/NotionNext/blob/main/README.md
NotionNext/README.md at main · tangly1024/NotionNext

作者部落格對 NotionNext 的介紹

Notion笔记变博客😝 - [NotionNext博客系统] | 小唐笔记📒
完全免费、2分钟即可拥有自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。源码地址 https://github.com/tangly1024/NotionNext
Notion笔记变博客😝 - [NotionNext博客系统] | 小唐笔记📒
https://tangly1024.com/article/notion-next
Notion笔记变博客😝 - [NotionNext博客系统] | 小唐笔记📒
💡
樣板的部分可以選擇 NotionNext 提供的 Notion 博客Notion 博客 或是上游專案 craigary/nobelium 的 若選擇 NotionNext 樣板，請將 Last edited time 欄位刪除， 否則在編譯過程中會遭遇時間格式錯誤 Mar 15, 2022

快速部署

先註冊 Vercel 與 github 帳號後，你可以...
💡
1. 點擊連結從 Vercel 快速部署，先看到成果後再調整 git repo 中的 config 2. 先 fork 專案到自己的 git repo 後，拉回地端並在地端調整與測試後，再部署到 vercel
則一即可；老闆/專案管理應該會喜歡 1，工程師應該會喜歡 2 😂

配置

  • blog.config.js 最重要的是取得 NOTION_PAGE_ID
      • Notion URL format: https://notion.so/{DOMAIN}/{NOTION_PAGE_ID}
  • themes/index.js 選擇主題

Todo

notion to notionnext blog format testing
update basic page
config: Utterance, Cusdis
config: GA
Google Analytics跟GA4差別在哪裡?從安裝到詳解一次告訴你 - awoo 阿物科技
行銷人必定會操作過的工具 Google Analytics，從 2005 年出生至今有 15 年有餘，簡單明瞭的報表及詳盡的數據，讓我們行銷人能夠透追蹤報表，一探使用者對於我們的網頁有什麼樣的了解，根據各種測試及優化，創造出最適合我們目標客群的網站。 如今，在 2019 年 10 月時 Google 則又推出了新一代分析工具「GA4」，將 app 與網頁上的資訊統整後，不用再像過往的 Google Analytics (通用) 需要分成兩種資源觀看外，GA4 的自動化追蹤功能，更是降低行銷人收集數據上的困難。今天帶著讀者從 GA4 的實際安裝步驟，並探討 Google Analytics (通用) 與 GA4 兩者間的差別，最後再跟各位分析是否有必要安裝 GA4。 為了研究 GA4，我們先來談談安裝的步驟。 如果你尚未擁有任何 Google Analytics 的資料，現在只要建立新的資料時，Google Analytics 都會默認幫你安裝 GA4，可以直接跳過步驟 1 從步驟 2 開始看起。 如果你已經有 Google Analytics (通用) 的資料，那只需要幾個步驟，就可以建立新的 GA4。 首先，你需要點選「管理」，上方就會出現「Google
Google Analytics跟GA4差別在哪裡?從安裝到詳解一次告訴你 - awoo 阿物科技
https://awoo.ai/zh-hant/blog/what-is-ga4/
Google Analytics跟GA4差別在哪裡?從安裝到詳解一次告訴你 - awoo 阿物科技
https://gitbook.tw/chapters/github/syncing-a-fork
i18n zh-TW && contribute
Fonts adjust
live2d model config

Domain

  • Freenom 註冊
      • 💡
      freenom 改過版，沒有 DNS record 可以選了，現在只能 1. 直接做轉址 cloaking or 301 Redirect 2. {sub}.domain.suffix to IP address; 不允許萬用字元
      但沒關係，因為 freenom 允許使用自訂的 DNS，所以可以無痛 SSL

演示

預設站點 with Next Theme
notion image
子網域 with Medium Theme
notion image

參考資料

🗒️NotionNext-小白轻松建站

live2d

domain

GoDaddy - 網域轉址和遮罩有什麼差別？
網域轉址 (有時也稱連線、指向或重新導向) 可以讓您自動將網域訪客導向到其他網路位置。如果您的網域是透過 GoDaddy 註冊，而您也使用我們的名稱伺服器，即可將您的 GoDaddy 網域轉指到您用 Wix、WordPress 建立的網站，或其他任何網址皆可。 網域轉址有兩種選擇：僅有轉址及轉址加遮罩。這兩種選擇都可以重新導向訪客，不過轉址加遮罩還有其他您可以利用的功能。 重新將訪客導向至您指定的目標網址 在瀏覽器網址列中保留目標網址 範例：將 coolexample.com 透過僅有轉址重新導向至 coolwebsite.net。如果有訪客在瀏覽器網址列中輸入 coolexample.com，對方將會被系統重新導向至 coolwebsite.net。瀏覽器的網址列將會更新為 coolwebsite.net 。 重新將訪客導向至您指定的目標網址 在瀏覽器網址列中保留網域名稱 可以讓您輸入搜尋引擎資訊的中繼標籤 範例：將 coolexample.com 透過轉址加遮罩重新導向至 coolwebsite.net。如果有訪客在瀏覽器網址列中輸入 coolexample.com，對方將會被系統重新導向至 coolwebsite.net。瀏覽器的網址列會繼續顯示 coolexample.com，實際上 遮蓋 了目標網址。
GoDaddy - 網域轉址和遮罩有什麼差別？
https://tw.godaddy.com/help/whats-the-difference-between-domain-forwarding-and-masking-32147
GoDaddy - 網域轉址和遮罩有什麼差別？
  • Blog
    • Android 遠端操控 Scrcpy | QtScrcpy | SndcpyZsh 看起來很酷炫
    • Utterance
    • Cusdis
    Catalog
    0%