跳到主要内容

利用 NotionNext 快速部署博客系统

以下部分内容可能已过期。

NotionNext是Tangly1024开源在 GitHub博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站,从而专注于写作、不需要操心网站的维护。

只需要几分钟的时间,您就可以获得一个美观的博客界面👇:

Tangly1024一直在对这个开源项目进行维护,从2021年下半年截至本篇发稿时已经至少维护了35个版本,可见作者的用心。

NotionNext是什么 #

NotionNext将您的 Notion笔记渲染成静态博客、托管在 Vercel云服务中。与 Hexo静态博客相比较不同的是,NotionNext会自动同步您的笔记至博客站点,而无需每次写好文章都要推送到GitHub。

所有的博文和页面的编写及发布都只在您的Notion笔记中完成**。** 依托于Notion强大的编辑功能,您可以随时随地撰写文章、记录创意与灵感。

NotionNext是基于 craigaryNobelium项目二次开发,继承了 Nobelium功能特点,例如快速秒开、设备全配适等。

NotionNext的特色 #

🚀 秒开,设备全适配

  • 快速的页面渲染和响应式设计
  • 高效编译器的快速静态页面生成

🤖 自动,无需重新部署

  • 部署在免费、高速的 Vercel 平台
  • 支持增量式更新,更新文章后无需重复部署

🚙 全功能,完全不操心

  • 评论、搜索、标签、分类
  • 订阅、网站统计
  • 本地化多语言
  • 服务端渲染、优秀的SEO

🎨 美观,轻松自定义

  • 丰富的配置项,更支持多语言
  • 使用 Tailwind CSS,轻松实现二次开发

🙉 更多的功能

👀 阅读体验优化

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

📶 更好的SEO

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

👭 交互优化

🎨 支持多主题切换

开始部署 #

NotionNext的部署方式有很多,在这里我推荐通过Vercel一键部署的方式,简便易行。

前期准备 #

  1. 注册 GitHub 账号

  2. 打开 这个 Notion 模板后点击页面右上方的 Duplicate 将这个页面拷贝到您的Notion中,并打开 Share to web

快速部署 #

  1. 点击 快速部署链接

  2. 选择用 GitHub 方式创建仓库,然后点击 create 确认部署。系统将自动部署完成,约 2 mins。

  3. 进入到 Vercelnotion-next 项目中,选择 Settings,点击 Enviroment Variables,填入环境变量。NAME 中输入 NOTION_PAGE_IDVALUE 中填写前期准备第二步中 Notion 页面分享链接中 site/ 之后,? 之前的三十二位编码(e.g https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4)。输入完后点击 Add。

  4. 进入到您的 GitHub 仓库,找到您自己的 NotionNext 项目,打开 blog.config.js,按照文件中的注释开始编辑您的网站信息。

  5. 在Notion页面中更改您的页面标题、页面描述、页面图标,相对应的网站名称、网站描述、网站图标会自动修改。

自定义域名 #

  1. 如果您还没有购买域名,推荐您到 腾讯云购买,如果您是第一次注册域名还可以享受新手福利。
  2. 在腾讯云 DNSPod中为您的域名添加解析:
    1. 主机记录 @,记录类型 A,记录值 76.76.21.21
    2. 主机记录 www,记录类型 CNAME,记录值 cname.vercel-dns.com
  3. 进入到 Vercel 中的 notion-next 项目,点击 Setting,选择 Domains,将您的域名输入后添加即可。
  4. 进入到您的 GitHub 仓库,找到您自己的 NotionNext 项目,打开 blog.config.js,将第 5 行的域名改为您自己的域名。

修改 Hexo 主题封面文字 #

进入到您的 GitHub 仓库,找到您自己的 NotionNext 项目,在 themes 文件夹中打开 config_hexo.js,进行修改即可。