利用 NotionNext 快速部署博客系统

slug
2022-005
status
Published
tags
tech
summary
NotionNext是一个开源的博客生成器，可以将Notion笔记渲染成静态博客并托管在Vercel云服务中。它具有快速秒开、自动增量式更新、全功能、美观自定义、多主题切换等特点，同时支持自定义域名和Hexo主题封面文字修改。NotionNext的部署方式简便易行，只需要通过Vercel一键部署即可。
type
Post
date
Jul 17, 2022
NotionNext是Tangly1024开源在Github的博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站，从而专注于写作、不需要操心网站的维护。
 
只需要几分钟的时间，您就可以获得一个美观的博客界面👇：
 
notion image
 
Tangly1024一直在对这个开源项目进行维护，从2021年下半年截至本篇发稿时已经至少维护了35个版本，可见作者的用心。
 

NotionNext是什么

NotionNext将您的Notion笔记渲染成静态博客、托管在Vercel云服务中。与Hexo静态博客相比较不同的是，NotionNext会自动同步您的笔记至博客站点，而无需每次写好文章都要推送到Github。
 
所有的博文和页面的编写及发布都只在您的Notion笔记中完成**。**依托于Notion强大的编辑功能，您可以随时随地撰写文章、记录创意与灵感。
 
NotionNext是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，例如快速秒开、设备全配适等。
 

NotionNext的特色

🚀 秒开，设备全适配
  • 快速的页面渲染和响应式设计
  • 高效编译器的快速静态页面生成
 
🤖 自动，无需重新部署
  • 部署在免费、高速的 Vercel 平台
  • 支持增量式更新，更新文章后无需重复部署
 
🚙 全功能，完全不操心
  • 评论、搜索、标签、分类
  • 订阅、网站统计
  • 本地化多语言
  • 服务端渲染、优秀的SEO
 
🎨 美观，轻松自定义
  • 丰富的配置项，更支持多语言
  • 使用 Tailwind CSS，轻松实现二次开发
 
🙉 更多的功能
  • 文章分类、标签、归档页面
  • 首页大图、问候语
 
👀 阅读体验优化
  • 文章目录、字数统计、阅读时间统计
  • 阅读量访客量展示
  • 手动切换夜间模式
 
📶 更好的SEO
  • 文章关联推荐
  • 文章版权声明©️
  • 网站 h1、h2 标题优化
  • 自动生成 sitemap.xml
 
👭 交互优化
  • 文章分享💌
 
🎨 支持多主题切换
Next 主题
notion image
Medium 主题
notion image
Hexo 主题
notion image
Fukasawa 主题
notion image
Example 主题
notion image

开始部署

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

前期准备

  1. 注册Github账号
  1. 打开这个 Notion 模板后点击页面右上方的Duplicate将这个页面拷贝到您的Notion中，并打开Share to web。
      2. notion image
      notion image

快速部署

  1. 点击快速部署链接
  1. 选择用Github方式创建仓库，然后点击create 确认部署。系统将自动部署完成，约2mins。
      2. notion image
      notion image
      notion image
  1. 进入到Vercel的notion-next项目中，选择Settings，点击Enviroment Variables，填入环境变量。NAME中输入NOTION_PAGE_ID，VALUE中填写前期准备第二步中Notion页面分享链接中site/之后，?之前的三十二位编码（e.g https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4）。输入完后点击Add。
      2. notion image
  1. 进入到您的Github仓库，找到您自己的NotionNext项目，打开blog.config.js，按照文件中的注释开始编辑您的网站信息。
      2. ⚠️
      第5行，网站地址先使用您在准备工作第二步中的Notion页面地址
      ⚠️
      第20行，可以修改主题
      ⚠️
      第62-79行，需要到https://giscus.app/中设定，设定完成后把数值相应填写即可
  1. 在Notion页面中更改您的页面标题、页面描述、页面图标，相对应的网站名称、网站描述、网站图标会自动修改。

自定义域名

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

修改Hexo主题封面文字

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

© 樹程Leslie 2019 - 2023