Notion笔记搭建博客网站 - NotionNext
Notion笔记搭建博客网站 - NotionNext
Last edited 2022-6-17

NotionNext是什么?

NotionNext是我开源在Github博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站,从而专注于写作、不需要操心网站的维护。
 
只需几分钟的操作,您将获得和我一样的博客网站👇:
NotionNext-搭建博客
NotionNext-搭建博客

工作原理

NotionNext将您的Notion笔记渲染成静态博客、托管在Vercel云服务中。与Hexo静态博客相比较不同的是,NotionNext会自动同步您的笔记至博客站点,而无需每次写好文章都要推送到Github。
编写及发布都只在您的Notion笔记中完成依托于Notion强大的编辑功能,您可以随时随地撰写文章、记录你的创意与灵感。

一、功能简介

💡
折腾博客多年,尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统,个人认为对于博客系统选什么技术是次要的、更重要的是坚持内容输出的习惯。Notion笔记本的出现,让“坚持笔记”和“博客输出”得到了完美结合,何乐而不为呢。
NotionNext是基于craigaryNobelium项目二次开发,继承了Nobelium功能特点,例如快速秒开:
notion image
在此基础上,NotionNext增加了以下特性:

🙉 更多的功能

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

📶 更好的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' 字段即可。

二、快速开始

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

0.Fork此Github项目

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

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

notion image

2. 配置你的Notion数据

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

3.点击Deploy完成部署

不到两分钟时间即可部署完成。完成后点击Go to Dashboard访问控制台,点击控制台右上角Visit按钮访问你的站点。
notion image
Vercel控制台
Vercel控制台

4.一些小Tips

  • 站点信息修改:修改Notion页的icon,即可同步站点的作者头像;修改页面标题将同步修改站点标题,页面描述就是站点描述。
notion image
  • 页面安全:您共享的此Notion页面,他人只有查看权限,除非你手动开启了编辑和评论的支持。如果您不希望别人访问到你的Notion页面,可以关闭Noton页面共享,并通过Notion的access_token进行数据访问。
    • notion image

5.[可选]绑定自己的域名

我的域名是由CloudFlare托管的,将域名解析到Vercel服务,可以参考以下文章👇:

三、项目更新

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

四、赞助本项目

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

五、贡献代码

个人的力量很有限,欢迎提交代码,共同完善这个项目:

步骤

要为NotionNext做出贡献,请按照以下步骤操作:
  1. 将存储库fork到您的GitHub帐户。
  1. 将存储库clone到您的设备上(或使用Codespaces之类的东西)。
  1. 在存储库中创建一个新分支,分支名按照改动的内容命名,建议是feat_bugfix_开头。
  1. 进行修改。
  1. 提交修改并推送分支。
  1. 从fork中的分支创建到NotionNextmain分支的PR
 
该项目是用Next.jsyarn作为软件包管理器构建的。以下是您可以使用的一些命令:
  • yarn:安装依赖
  • yarn dev:开发,支持热加载
  • yarn build:为生产编译打包
  • yarn start:运行打包后的项目构建服务

创建新主题

如果您想创建一个新主题、并提交到NotionNext,请复制一个/themes/example文件夹在themes目录下,并修改文件夹的名称主题的名称。

添加本地化

如果您的语言尚未得到NotionNext的支持,欢迎贡献本地化!按照以下步骤添加新的本地化: 1. 在/lib/lang中复制一个en-US.js文件,并将文件命名为语言的代码(例如zh-CN.js)。 2. 开始翻译字符串。 3. 将您的语言配置添加到lang.js中。

提交代码

修复BUG、新的特性、新的主题,欢迎提交你的代码,为这个项目做贡献,期待你的PR

六、问题反馈

请在Git中提交Issue来反馈诸如部署问题、软件建议、BUG,新的功等想法。
欢迎在项目论坛区开帖讨论畅所欲言。另外,也欢迎你直接邮件联系我。
 
💡
博客系统只是一个工具,坚持写点东西才是最重要的。
  • Notion
  • Blog
  • 兵家至圣 —《孙子兵法》Notion笔记 | 改变生活的效率工具
    • Waline
    • Giscus
    • Cusdis