NotionNext是什么？
技术分享
Post on: Dec 6, 2022
Last edited: 2022-12-6
Views
type
Post
status
Published
date
Dec 6, 2022
slug
NotionNext是什么？
summary
NotionNext是什么？
tags
思考
category
技术分享
icon
password
Property
Dec 6, 2022 05:30 PM
URL

NotionNext是什么？

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

效果

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

网友案例

点击以下链接查看其它网友们用NotionNext搭建的网站：
留言板 | TANGLY's BLOG本站文章是在我的Notion笔记本上编写、并实时同步在该博客。博客站点的搭建可参考 以下文章 ，只需几分钟的时间即可完全免费搭建。 欢迎在此页留言，或者直接留下你的站点地址，我会大家的站点收集起来，这样以便于互相窜门拜访😆。 我是 ...https://tangly1024.com/about
notion image
notion image

工作原理

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是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，拥有极快的打开速度：
notion image
NotionNext在Nobelium的基础上增加了以下特性：

🙉 更多的功能

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

📶 更好的SEO

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

👀 阅读体验优化

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

👭 交互优化

  • 文章分享💌

🎨 支持多主题切换

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

🖌️ 丰富便捷的字体

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

二、快速开始

💡
按照以下步骤将在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按钮访问你的站点。
notion image
Vercel控制台

4.一些小Tips

如何快速修改站点标题以及头像：
  • 每次修改代码文件、例如blog.config.js后,Vercel会自动重新部署你的站点。
Notion页面的安全：
您共享的Notion页面，他人只有查看权限，除非你手动开启编辑和评论。若您不希望别人访问到你的源Notion页面，可选择关闭Noton页面共享，然后通过Notion的access_token进行数据访问。
notion image
如何设置评论插件配置
如何在CloudFlarePage上部署
参考此大神的博文：感谢！
NotionNext建站-cloudflare版 | haixin's blog请务必先阅读仓库原作者的 这篇博客,在其中已经有建站指引. 这边只针对如何在Cloudflare部署NotionNext, 不会对其他内容做说明. fork对应仓库 NotionNext 部署到CloudFlare Page上 创建新的项目`Create a project`, 选择`Connect to Git`(没有关联Github账号的话需要关联上) 选择 NotionNext 仓库 因为 cf-support 才支持部署到`Cloudflare`, 生产分支需要选择 cf-support 分支 框架预设选项选择Next.js, 只需要填写正确构建命令即可 环境变量设置, 需要设置 NOTION_PAGE_ID={你的Notion Page ID} 这个填你自己的Notion PageID, 如果不清楚, 则去看 文档, 这里不赘述 NODE_VERSION=16 设置构建时使用NODE版本 VERCEL_ENV=production 这个环境变量决定是否把文章静态渲染出来, 如果没有则部署完无法查看文章内容, 会显示博客文章404 保存并部署, 等待部署成功 给Pages设置自己的域名, 这个自己去探索吧. 没什么可说的. 因为没解决`react-messenger-customer-chat`依赖无法正常安装的问题, 所以删掉了该依赖和相关的组件(FacebookMessenger), 因此部署后的博客将不支持这一扩展.https://www.haixin.io/article/notion-next-on-cf
notion image
notion image

5.绑定自己的域名

vercel有为你的站点提供一个 *.vercel.app 的域名，但vercel的官方域名在大陆被墙，所以需要绑定自己的域名。参考以下文章，您可以快速地将自己的域名解析到Vercel站点:
Vercel应用绑定自己的域名 | 小唐笔记📒首先需要在域名服务商处购买域名，可以选择Namesilo、Freenom、Godaddy、阿里云、腾讯云等任意平台。并在域名服务商后台添加一条CNAME转发进行解析，CNAME值为 cname.vervel-dns.com 。 CF具有Worker.js、全球无限CDN流量、网站防火墙、DDoS等特性，我个人比较喜欢将域名解析交给CloudFlare管理 。 ...https://tangly1024.com/article/vercel-domain
notion image
notion image

三、项目更新

项目不定期会修复bug、增加新特性，请参考此篇文章进行更新：
NotionNext更新指南 | TANGLY's BLOG本项目在长期维护更新中，不时将修复一些bug和增加新特性。 只要在您fork后的的NotionNext中点击 Fetch upstream 就能更新为最新的代码 有时这里显示的不是 Fetch and Merge 按钮，而是 Open pull request。原因是我和你的代码发生冲突（ confilcts），例如我修改了 blog.config.js 文件，你也修改了此文件，导致在更新时，Git需要人工确认要合并代码时保留的blog.config.js文件版本。https://tangly1024.com/article/how-to-update-notionnext
notion image
notion image

四、赞助本项目

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

五、贡献代码

个人的力量很有限，欢迎提交代码，共同完善这个项目，关于项目的开发，我写了一篇NotionNext二次开发手册，欢迎参阅，以便提交你的创意想法：
NotionNext二次开发手册 | TANGLY's BLOGNotionNext是一个在Github免费开源的博客生成器项目，项目自带了 blog.config.js 以及每个主题下都有一个配置文件 config_[theme].js ，以便用户配置自己的页面个性化。 除此之外，若你想要更大程度地自定义页面，就需要专业的开发，这时候你可以选择在github上向我提交issue，提出改进页面的建议。 本文便是针对小白的一篇开发手册，遵循此步骤你可以尝试自己修改网站的样式。 下载代码 安装Git 下载代码 在你想要存放代码的文件夹空白处，右键点选 Git GUI Here 输入 以下指令下载代码 git clone https://github.com/tangly1024/NotionNext.git 在vscode中调试项目 打开项目文件 安装项目依赖的组件 点击 菜单栏的终端，并选择 新建终端，然后在新建的终端窗口中输入安装启动脚本： 启动项目 只需一个命令 其他脚本说明 访问页面 浏览器打开 http://localhost:3000/ 即可访问你的本地博客 代码目录介绍 如果你是小白的话，这里基本只会改到 themes目录下的文件；以hexo 主题为例， component目录下是不同的组件，以 Layout 命名的文件是页面的样式布局。其他的目前可以不用关心。 项目使用TailwindCSS实现样式，上手很快：https://tangly1024.com/article/how-to-develop-with-notion-next
notion image
notion image

六、问题反馈

  • 请在Git中提交Issue来反馈诸如部署问题、软件建议、BUG以及新的功能需求等。
  • 我建了电报群和微信群，欢迎加入👏：
      • Telegram群组(点击展开)：
      微信群组二维码 (点击展开)：
💡
博客系统只是一个工具，坚持写东西却会让你受益无穷。
Relate Posts
2022-12-10
国家工作人员学法用法考试插件
2021-11-05
示例文章-3
2022-12-06
第八单元  课题2 金属的化学性质 （第一课时）
2021-11-05
示例文章 Test1
金属的化学性质2获取25TSharepoint空间教程
目录
0%
顺+仔
一个普通的老实人🍚