头图©️樹程Leslie

NotionNext是Tangly1024开源在Github博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站,从而专注于写作、不需要操心网站的维护。

只需要几分钟的时间,您就可以获得一个美观的博客界面👇:

Tangly1024一直在对这个开源项目进行维护,从2021年下半年截至本篇发稿时已经至少维护了35个版本,可见作者的用心。

NotionNext是什么

NotionNext将您的Notion笔记渲染成静态博客、托管在Vercel云服务中。与Hexo静态博客相比较不同的是,NotionNext会自动同步您的笔记至博客站点,而无需每次写好文章都要推送到Github。

所有的博文和页面的编写及发布都只在您的Notion笔记中完成依托于Notion强大的编辑功能,您可以随时随地撰写文章、记录创意与灵感。

NotionNext是基于craigaryNobelium项目二次开发,继承了Nobelium功能特点,例如快速秒开、设备全配适等。

NotionNext的特色

🚀 秒开,设备全适配

  • 快速的页面渲染和响应式设计
  • 高效编译器的快速静态页面生成

🤖 自动,无需重新部署

  • 部署在免费、高速的 Vercel 平台
  • 支持增量式更新,更新文章后无需重复部署

🚙 全功能,完全不操心

  • 评论、搜索、标签、分类
  • 订阅、网站统计
  • 本地化多语言
  • 服务端渲染、优秀的SEO

🎨 美观,轻松自定义

  • 丰富的配置项,更支持多语言
  • 使用 Tailwind CSS,轻松实现二次开发

🙉 更多的功能

👀 阅读体验优化

  • 文章目录、字数统计、阅读时间统计
  • 阅读量访客量展示
  • 手动切换夜间模式

📶 更好的SEO

  • 文章关联推荐
  • 文章版权声明©️
  • 网站h1、h2标题优化
  • 自动生成sitemap.xml

👭 交互优化

🎨 支持多主题切换

  • Next主题(点击图片可查看展示页面)

  • Medium主题(点击图片可预览展示页面)

  • Hexo主题(点击图片可预览展示页面)

  • Fukasawa主题(点击图片可预览展示页面)

  • Example主题(点击图片可预览展示页面)

开始部署

NotionNext的部署方式有很多,在这里我推荐通过Vercel一键部署的方式,简便易行。

前期准备

  1. 注册Github账号
  2. 打开这个 Notion 模板后点击页面右上方的Duplicate将这个页面拷贝到您的Notion中,并打开Share to web

快速部署

  1. 点击快速部署链接
  2. 选择用Github方式创建仓库,然后点击create 确认部署。系统将自动部署完成,约2mins。

  3. 进入到Vercelnotion-next项目中,选择Settings,点击Enviroment Variables,填入环境变量。NAME中输入NOTION_PAGE_IDVALUE中填写前期准备第二步中Notion页面分享链接中site/之后,?之前的三十二位编码(e.g https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4)。输入完后点击Add。

  4. 进入到您的Github仓库,找到您自己的NotionNext项目,打开blog.config.js,按照文件中的注释开始编辑您的网站信息。
第5行,网站地址先使用您在准备工作第二步中的Notion页面地址
第20行,可以修改主题
第62-79行,需要到https://giscus.app/中设定,设定完成后把数值相应填写即可
  1. 在Notion页面中更改您的页面标题、页面描述、页面图标,相对应的网站名称、网站描述、网站图标会自动修改。

自定义域名

  1. 如果您还没有购买域名,推荐您到腾讯云购买,如果您是第一次注册域名还可以享受新手福利。
  2. 在腾讯云DNSPod中为您的域名添加解析:

    1. 主机记录@,记录类型A,记录值76.76.21.21
    2. 主机记录www,记录类型CNAME,记录值cname.vercel-dns.com
  3. 进入到Vercel中的notion-next项目,点击Setting,选择Domains,将您的域名输入后添加即可。

  4. 进入到您的Github仓库,找到您自己的NotionNext项目,打开blog.config.js,将第5行的域名改为您自己的域名。

修改Hexo主题封面文字

进入到您的Github仓库,找到您自己的NotionNext项目,在themes文件夹中打开config_hexo.js,进行修改即可。


应政策要求,本站关闭评论。您可以跳转至我的 Notion 站点 MemoChain 进行评论、互动。

给您带来不便,我深表歉意!

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
最后修改:2022 年 11 月 12 日
如果您觉得这篇文章对您有用,请点赞让我知道,谢谢