文章来源说明

NotionNext是什么

NotionNext的特色

• 快速的页面渲染和响应式设计

• 高效编译器的快速静态页面生成

• 部署在免费、高速的 Vercel 平台

• 支持增量式更新，更新文章后无需重复部署

• 评论、搜索、标签、分类

• 订阅、网站统计

• 本地化多语言

• 服务端渲染、优秀的SEO

• 丰富的配置项，更支持多语言

• 使用 Tailwind CSS，轻松实现二次开发

• 文章分类、标签、归档页面

• 首页大图、问候语

• 支持快速添加单页栏目

• 在Notion中换头像、换背景

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

• 阅读量访客量展示

• 手动切换夜间模式

• 文章关联推荐

• 文章版权声明©️

• 网站h1、h2标题优化

• 自动生成sitemap.xml

• 文章支持加锁🔏,示例文章

• 文章分享💌

• 看板宠物😾

• 支持waline、valine、giscus等6种评论插件

• Next主题（点击图片可查看展示页面）

• Medium主题（点击图片可预览展示页面）

• Hexo主题（点击图片可预览展示页面）

• Fukasawa主题（点击图片可预览展示页面）

• Example主题（点击图片可预览展示页面）

开始部署

前期准备

1. 注册Github账号

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

快速部署

1. 点击[快速部署链接](https://vercel.com/new/clone?demo-description=Notion powered site Built with Next.js.&demo-image=https%3A%2F%2Fdocs.tangly1024.com%2Ftheme-medium.png&demo-title=Notion Next Blog&demo-url=https%3A%2F%2Fblog.tangly1024.com%2F&project-name=notion-next-blog&repository-name=NotionNext&s=https%3A%2F%2Fgithub.com%2Ftangly1024%2FNotionNext)。

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

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

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

1. 在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主题封面文字

参考文章