type
status
date
slug
summary
tags
category
Property
Aug 29, 2022 01:44 PM
icon
password
属性
属性 1
描述
Origin
URL
文章来源说明
notion image
NotionNext是Tangly1024开源在Github博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站,从而专注于写作、不需要操心网站的维护。
只需要几分钟的时间,您就可以获得一个美观的博客界面👇:
notion image
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
👭 交互优化
  • 文章分享💌
🎨 支持多主题切换
  • 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
    1. notion image
      notion image

快速部署

  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)。
  1. 选择用Github方式创建仓库,然后点击create 确认部署。系统将自动部署完成,约2mins。
    1. notion image
      notion image
      notion image
  1. 进入到Vercelnotion-next项目中,选择Settings,点击Enviroment Variables,填入环境变量。NAME中输入NOTION_PAGE_IDVALUE中填写前期准备第二步中Notion页面分享链接中site/之后,?之前的三十二位编码(e.g https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4)。输入完后点击Add。
    1. notion image
  1. 进入到您的Github仓库,找到您自己的NotionNext项目,打开blog.config.js,按照文件中的注释开始编辑您的网站信息。
  1. 在Notion页面中更改您的页面标题、页面描述、页面图标,相对应的网站名称、网站描述、网站图标会自动修改。

自定义域名

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

修改Hexo主题封面文字

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

参考文章

 
致谢:
💡
欢迎您在底部评论区留言,一起交流~
 
 
男生穿搭技巧Notion数学公式使用
  • Twikoo
  • Waline
  • Giscus
  • Cusdis
  • Utterance
Conor
Conor
一个野生的技术宅
公告
type
status
date
slug
summary
tags
category
Property
Nov 25, 2023 06:32 AM
icon
password
属性
属性 1
描述
Origin
URL
🎉持续更新中🎉