Notion笔记搭建博客

By | 2022-12-04

无需服务器、只需几分钟即可拥有自己的独立博客站～如果你在使用 Notion 这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于 NotionAPI 的博客系统。

NotionNext 是什么？

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

效果

只需几分钟的操作，您将获得和我一样的博客网站👇：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 是基于 craigary 的 Nobelium 项目二次开发，继承了 Nobelium 功能特点，拥有极快的打开速度： NotionNext 在 Nobelium 的基础上增加了以下特性：

🙉 更多的功能

📶 更好的 SEO

  • 文章关联推荐

  • 文章版权声明 ©️

  • 网站 h1、h2 标题优化

  • 自动生成 sitemap.xml

👀 阅读体验优化

  • 文章目录、字数统计、阅读时间统计

  • 阅读量访客量展示

  • 手动切换夜间模式

👭 交互优化

🎨 支持多主题切换

Next 预览 NextMedium 预览 MediumHexo 预览 HexoFukasawa 预览 FukasawaExample 预览 Example

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

JavaScriptCopy

🖌️ 丰富便捷的字体

  • 系统预设了 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/lxgw-wenkai-screen-webfont@1.6.0/lxgwwenkaiscreen.css'], // 自定义字体的CSS
CUSTOM_FONT_SANS: ['LXGW WenKai Screen'], // 自定义无衬线字体
CUSTOM_FONT_SERIF: ['LXGW WenKai Screen'], // 自定义衬线字体

JavaScriptCopy

二、快速开始

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

0.Fork 此 Github 项目：

  • (可选) 用自己的图片替换 /public 文件夹里的 favicon.svg 和 favicon.ico

  • 在 blog.config.js 配置网站的相关信息，例如站点地址，作者信息。

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

2. 配置你的 Notion 数据

  • 点击Environment Variables（环境变量），添加NOTION_PAGE_ID的值。

  • _**NOTION_PAGE_ID**_ 这个参数从何而来？(点击下方内容可展开详情)
  1. 打开以下 Notion 页面，并复制到你的 notion 空间： (点击右上角Duplicate即可) 点击右上角的 Duplicate2. 分享你的页面：点击 Share 开启 Share to web 选项 3. 在页面链接中取得PAGE_ID：ctrl或cmd+L可以快速复制当前页面链接，PAGE_ID就是以下页面链接中的标红部分：💡示例： https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

3. 完成部署

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

4. 一些小 Tips

如何快速修改站点标题以及头像：修改 Notion 页的 icon，即可同步站点的作者头像；修改页面标题将同步修改站点标题，页面描述就是站点描述。

  • 每次修改代码文件、例如 blog.config.js 后, Vercel 会自动重新部署你的站点。

Notion 页面的安全：您共享的 Notion 页面，他人只有查看权限，除非你手动开启编辑和评论。若您不希望别人访问到你的源 Notion 页面，可选择关闭 Noton 页面共享，然后通过 Notion 的 access_token 进行数据访问。如何设置评论插件配置

  • giscus 评论插件：访问 Giscus 插件主页，照着页面内的步骤操作就会给出该有的参数，再到 blog.config.js 設定好參數即可

  • valine/walin 评论插件：参考以下文档进行配置

[NotionNext 配置 Valine/Waline 评论插件 | TANGLY’s BLOGValine 插件需要 LeanCloud 后端提供数据库存储功能，请按照以下步骤配置。 而 Waline 的前置步骤和 Valine 基本一致，只是多了一个部署 Waline 的 Vercel 服务步骤。由于 Waline 配置了完善的后台管理功能，所以使用 Waline 就不需要再配合 Admin-Valine 项目运行。 应用创建好以后，进入刚刚创建的应用，选择左下角的 设置 > 应用 Key，然后就能看到你的 APP ID 和 APP Key 了： 为了你的数据安全，请设置自己的 安全域名 ：只有以下设置的域名，才允许访问你的 valine 数据 支持的 Valine 配置在 NotionNext 项目的 blog.config.js 中，请在 Vercel 后台的环境变量中配置： serverURLs 在应用内部会尝试自动获取，如果发现获取失败，请手动提供 刚刚创建的应用，选择左下角的 设置 > 应用 Key，找到 Request 域名 第一行 需要在 akismet 中注册账号并获取免费的 key： https://akismet.com/account ，并在 LeanCloud 中配置 AKISMET_KEY 变量 参考官方文档，在你的 Vercel 上部署一个 valine 应用。而后在你的 NotionNext 环境变量中添加你的 waline 服务地址环境变量： NEXT_PUBLIC_WALINE_SERVER_URL 即可生效。

如何在 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), 因此部署后的博客将不支持这一扩展.

5. 绑定自己的域名

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

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