tags
Notion
Blog
type
Post
status
Published
slug
notion-next
date
Dec 4, 2021
summary
无需服务器、只需几分钟即可拥有自己的独立博客站~如果你在使用Notion这款神级笔记本的话,不妨来试试顺手建个网站🤣🤣🤣,这是一款基于NotionAPI的博客系统。
category
软件工具
icon
password

NotionNext是什么?

NotionNext是我开源在Github博客生成器,它帮助写作爱好者们无需购买服务器快速地搭建个人网站,从而让作者专注于写作、不需要操心网站的维护。

效果

只需几分钟的操作,您将获得和我一样的博客网站👇:
NotionNext-搭建博客
NotionNext-搭建博客
 

网友案例

点击以下链接查看其它网友们用NotionNext搭建的网站:
 

工作原理

NotionNext使用NextJs\TailwindCSS开发,借助Vercel云托管服务,将您的Notion笔记实时渲染成静态博客站点。
💡
除了Vercel云托管、您还可以选择在服务器本地部署、导出静态网页、Docker容器化、CloudFlare部署等方案。

为何使用NotionNext

相比于Hexo等类型的静态博客,您不需要学习Markdown语法,也不需要每次写完文章都提交推送到Git仓库。有了NotionNext,编写与发布都只在您的笔记中完成。借助Notion强大的编辑和写作功能,您可以随时随地撰写文章、记录你的创意与灵感。
💡
Notion是我极度推荐的一款笔记软件,相关介绍可以看这篇文章

如何发布博文

在Notion中将写好的文章的状态设置为Published 即可。NotionNext将自动从您的Notion笔记中实时抓取并展现您最新的文章改动。

一、功能简介

💡
折腾博客多年,尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统,我觉得在写作过程中应当把重心放在养成内容持续输出的习惯;博客系统只是一个辅助,反复折腾搭建系统、维护服务器显得本末倒置。 Notion笔记本的出现,让“坚持笔记”和“博客分享”得到了完美结合,何乐而不为呢。
 
NotionNext是基于craigaryNobelium项目二次开发,继承了Nobelium功能特点,拥有极快的打开速度:
notion image
 
NotionNext在Nobelium的基础上增加了以下特性:

🙉 更多的功能

  • 文章分类、标签、归档页面
  • 首页大图、问候语

📶 更好的SEO

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

👀 阅读体验优化

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

👭 交互优化

  • 文章分享💌

🎨 支持多主题切换

  • 修改代码中的 /blog.config.js文件即可实现多主题之间的切换。
    • const BLOG = {
          ...
          THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题, 支持 ['next','hexo',"fukasawa','medium']
          ...
      }
      // 可配置VERCEL环境变量NEXT_PUBLIC_THEME,或者修改上面的 'next' 字段即可。

🖌️ 丰富便捷的字体

  • 系统预设了GoogleNotoSans字体,您也可以在blog.config.js 中自定义字体:
    • // 自定义字体示例: 请先将 CUSTOM_FONT 改为 true, 并将 CUSTOM_FONT_URL 改为你的字体CSS地址,同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
      CUSTOM_FONT: true, // 是否使用自定义字体
      CUSTOM_FONT_URL: ['https://cdn.jsdelivr.net/npm/[email protected]/lxgwwenkaiscreen.css'], // 自定义字体的CSS
      CUSTOM_FONT_SANS: ['LXGW WenKai Screen'], // 自定义无衬线字体
      CUSTOM_FONT_SERIF: ['LXGW WenKai Screen'], // 自定义衬线字体
 

二、快速开始

💡
按照以下步骤将在Vercel平台部署你的网站。

0.Fork此Github项目

  • (可选) 用自己的图片替换 /public 文件夹里的 favicon.svg 和 favicon.ico
  • 在 blog.config.js 配置网站的相关信息,例如站点地址,作者信息。

1.在Vercel中导入你刚fork的项目

notion image

2. 配置你的Notion数据

  • 点击Environment Variables(环境变量),添加NOTION_PAGE_ID的值。
notion image

3.完成部署

💡
点击Deploy,并静候两分钟。
notion image
完成后点击Go to Dashboard访问控制台,点击控制台右上角Visit按钮访问你的站点。
Vercel控制台
Vercel控制台

4.一些小Tips

如何快速修改站点标题以及头像:
修改Notion页的icon,即可同步站点的作者头像;修改页面标题将同步修改站点标题,页面描述就是站点描述。
notion image
  • 每次修改代码文件、例如blog.config.js后,Vercel会自动重新部署你的站点。
Notion页面的安全:
您共享的Notion页面,他人只有查看权限,除非你手动开启编辑和评论。若您不希望别人访问到你的源Notion页面,可选择关闭Noton页面共享,然后通过Notion的access_token进行数据访问。
notion image
如何设置评论插件配置
  • giscus评论插件:访问Giscus插件主页,照着页面内的步骤操作就会给出该有的参数,再到blog.config.js設定好參數即可
如何在CloudFlarePage上部署
参考此大神的博文:感谢!

5.绑定自己的域名

vercel有为你的站点提供一个 *.vercel.app 的域名,但vercel的官方域名在大陆被墙,所以需要绑定自己的域名。参考以下文章,您可以快速地将自己的域名解析到Vercel站点:
 

三、项目更新

项目不定期会修复bug、增加新特性,请参考此篇文章进行更新:
 

四、赞助本项目

NotionNext是完全免费开源的🎉🎉!如果项目对你有帮助,欢迎进行赞助🙌🏻,赞助的每笔钱都将让NotionNext变得更好😁
点击展开支付二维码
notion image
notion image
 

五、贡献代码

个人的力量很有限,欢迎提交代码,共同完善这个项目,关于项目的开发,我写了一篇NotionNext二次开发手册,欢迎参阅,以便提交你的创意想法:

六、问题反馈

  • 请在Git中提交Issue来反馈诸如部署问题、软件建议、BUG以及新的功能需求等。
  • 我建了电报群和微信群,欢迎加入👏:
 
 
💡
博客系统只是一个工具,坚持写东西却会让你受益无穷。
 

  • Utterance
  • Cusdis