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

NotionNext是什么?

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

工作原理

NotionNext将您的Notion笔记渲染成静态博客、托管在Vercel云服务中,您不需要购买一台服务器。
使用过Hexo的朋友应该知道,hexo需要用markdown语法编辑,并且每次写完文章都需要提交并推送到Git仓库。
而我简化了编辑和发布的步骤,依托于Notion强大的编辑功能,编写与发布都只在您的笔记中完成,您可以随时随地撰写文章、记录你的创意与灵感。
借助NotionNext,您的Notion笔记将被全自动地、实时地同步至博客站点,在Notion中写好文章后,只要将文章的状态设置为publish ,即可在您的站点中实时查看到最新的文章与改动。(页面会有静态缓存,所以要多刷新几次)

一、功能简介

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

🙉 更多的功能

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

📶 更好的SEO

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

👀 阅读体验优化

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

👭 交互优化

  • 文章分享💌
  • 支持自定义你的notion属性名-V3.4.5特性

🎨 支持多主题切换

  • 修改代码中的 /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
  • 兵家至圣 —《孙子兵法》Linux命令行编辑快捷键
    • Waline
    • Giscus
    • Cusdis