notion搭建博客方法二：nextjs-notion-starter-kit搭建博客教程

最新推荐文章于 2025-11-10 02:00:14 发布
原创 最新推荐文章于 2025-11-10 02:00:14 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

说明

notion搭建博客的方法很多，今天介绍一个Notion+Vercel+Next.js搭建博客的方法，作者的Github。

演示

演示地址: Sky’s Blog

搭建方法

  1. 首先注册一个GitHub账号。

  2. 注册一个Notion账号，创建一个页面，选择右上角Share，选择Share to web，选择Copy link，找到此页面的PageID，就是下图中Blog后面的一串字符dd7771e27af143dbacbc90223337a142。

    image-20210609101228904

  3. 打开此仓库 Fork一份，根据自己的情况修改**site.config.js**的相关内容。

    module.exports = {
最低0.47元/天 解锁文章
低成本、低代码，三十分钟教会你使用Notion作为CMS搭建自己的Web网站
qq_45430571的博客
05-29 4712
这篇博客提供了一个快速搭建个人网站的指南，使用了Notion作为内容管理工具，并结合了nextjs-notion-starter-kit项目来将Notion页面转换成个人网站。整个过程分为准备环境、创建Notion页面、开放页面外部访问、克隆项目、填入NotionPageId、在本地测试和部署到服务器等步骤。同时也介绍了如何配置自定义域名以及后续更新的一些建议。
notion + nextjs搭建博客
weixin_30230009的博客
09-29 2214
SaaS可以通过博客来获得SEO流量，之前我自己在nextjs上，基于MarkDown + Cloudfare来构建博客，很快我就了解到更优雅的方案：notion + nextjs搭建博客，之前搭建了过，没有记录，这次刚好又要弄，打算记录一下。notion + nextjs有很多解决方案：https://github.com/tangly1024/NotionNexthttps://github....
nextjs-notion-starter-kit:使用Next.js和Vercel在数分钟内部署您自己的支持Notion的网站
03-07
Next.js概念入门套件 使用Next.js和Notion构建网站的完美入门工具包。 介绍 这个仓库是我用来驱动我的个人博客/投资组合网站。 它使用Notion作为CMS，从Notion获取内容，然后使用和呈现所有内容。 然后将该站点部署到 。 特征 安装程序只需几分钟（） :flexed_biceps: 通过对Notion内容的强大支持 Next.js / TS / React /概念 出色的页面速度 性感的LQIP图像预览 嵌入式GitHub注释 自动打开图形图像 自动漂亮的网址 自动目录 完全支持黑暗模式 就像在Noion中一样，通过CMD + P快速搜索 响应桌面/平板电脑/手机 针对Next.js和Vercel进行了优化 设置 所有配置都在定义。 分叉/克隆此仓库 更改的一些值 npm install npm run dev人员进行本地测试 npm run deploy部署到vercel :flexed_biceps:
Notion笔记搭建博客网站 - NotionNext
划下句点
05-16 4537
NotionNext是什么？ NotionNext是我在Github上开源的基于Next.js框架开发的博客生成器。目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站，从而专注于写作、而不需要操心网站的维护。 它将您的Notion笔记渲染成静态的博客页、并托管在Vercel云服务中。与Hexo静态博客相比较不同的是，您无需每次写好的文章都要推送到Github，编写与发布只在您的Notion笔记中完成。 依托于Notion强大的编辑功能，您可以随时随地撰写文章、记录你的创意与灵感，笔记会被自动
10分钟上线Notion网站：Next.js Notion Starter Kit全流程指南
最新发布
gitblog_01080的博客
11-10 259
你是否曾想拥有一个个人网站却被技术门槛劝退？还在为内容管理系统（CMS）的复杂设置头疼？本文将带你使用[Next.js Notion Starter Kit](https://link.gitcode.com/i/3bfe57829a93c6f605533434828ac262)，通过Notion作为内容源，快速搭建专业网站。无需复杂编程知识，全程可视化操作，10分钟即可完成部署。 ## 项目概
如果没有人读博客，为什么要写呢？
qq_24520119的博客
02-28 141
不，他们不会来，网上有几十亿篇博客，好像浩浩荡荡的飓风一样，你的博客只是风里的一片叶子，谁会注意呢。当你思考得更好时，你会做出更好的成果。此外，未来也许有一天，某个真正需要你文章的人，会找到它。你看到一个场景----一个充满光、影、人性的瞬间，就拍下了它。你写博客不是为了别人的掌声，而是因为你自己的需要。让我们坦率一点吧，你写了一篇博客，根本就没有人读。，你的文章会让你看到自己思想的演变。
Next.js Notion Starter Kit：构建现代网站的完美起点
gitblog_00491的博客
08-29 463
在数字化时代，拥有一个高效、美观且易于维护的网站是每个个人和企业的追求。今天，我要向大家推荐一个开源项目——**Next.js Notion Starter Kit**，它结合了Next.js、Notion和Vercel的强大功能，为开发者提供了一个快速搭建个人博客和作品集网站的完美解决方案。 ## 项目介绍 **Next.js Notion Starter Kit** 是一个集成了Notio...
Notion-CMS-Blog：以Notion为内容管理系统的博客。 从概念导入内容并发布
02-15
概念CMS博客 以Notion作为内容管理系统的博客。 从概念导入内容并发布。 安装 :warning_selector: 低于3.6的Python版本可能无法正常工作 使用venv创建虚拟环境。 对于使用apt系统： sudo apt install python3-venv python3 -m venv .env 采购虚拟环境并从requirements.txt安装依赖项 source .env/bin/activate pip3 install -r requirements.txt 您需要创建一个具有以下内容的.secrets文件： #!/bin/bash export TOKEN_V2="<YOUR>" export SPACE_ID="<WORKSPACE>" 登录Notion后，可以从cookie中以token_v2形式获取令牌。 要获取工作区ID，请登录到Notion，然
搭建博客网站最简单的方式：Notion + Vercel实现个人博客搭建
weixin_39514020的博客
01-17 2214
现在这个页面就是我们博客网站的主页面，我们需要将页面与我们的项目配置进行绑定，也就是将页面的PageId填入到步骤1的配置文件当中去。如果你有自己写博客的习惯，需要一个网站来展示自己的博客，同时，你又不想要进行复杂的开发工作，那么本篇文章将教给你一个最简单的博客搭建方式，仅需要一些配置修改即可以搭建好你的个人博客网站。项目部署成功后，可以在我们的Dashboard页面上查看到我们的项目，在我们绑定自己的域名之前，使用的是Vercel给我们的默认域名，我们可以进入项目，购买并且绑定我们自己的域名。
notion搭建博客方法一：notion简单操作说明
aosky的专栏
05-06 4741
简介 notion搭建博客的方法有很多种，今天介绍最基础的、原汁原味的方法。 步骤 注册一个notion账号，使用邮箱就可以很快注册，免费账号除了附件大小、共享用户数等有部分限制其他基本都不影响使用。 新建一个Page，输入 / 然后table - Inline，或者打开notion博客模板复制模板即可。 修改table里面的properties根据自己的写作习惯进行修改。 对于有常用写作规范的也可以设置templates。 博文的展现形式可以列表、表格等，有图片的也可以设置为画廊
搭建自己的博客-NotionWeb
Doubletree.lin的博客
03-23 2361
技术改变生活-搭建自己的博客-NotionWeb
next.js-starter-kit：适用于基于React的现代应用程序的Next.js入门套件（Next.js，React，Redux，TypeScript，Ant Design，Styled-jsx，PostCSS，Normalize.css，Storybook，Jest＆Enzyme，SEO和分析）
02-04
Next.js入门套件 适用于基于React的现代应用程序的Next.js入门套件。 主库 Next.js React Redux 打字稿 蚂蚁设计 样式的jsx PostCSS Normalize.css 故事书 笑话与酵素 SEO和分析 开始吧 npm install 开发构建 # Development build with hot reloading npm run start:dev 生产建立 与服务器一起使用 # Build app for production npm install npm run build npm start 导出静态HTML # Export
nextjs-starter
02-16
NextJS +打字稿+ Eslint +故事书+开玩笑
notion-blog：一个Next.js站点，该站点使用新的SSG支持以及一个Notion支持的博客
02-06
概念博客 这是一个Next.js项目示例，该项目展示了使用Notion的私有API作为后端的Next.js即将推出的SSG（静态站点生成）支持。 注意：此示例使用仅在Next.js canary分支中可用的实验性SSG挂钩！ 本示例中使用的API会随着时间而变化。 由于它使用私有API和实验性功能，因此使用风险自负，因为这些情况随时可能发生变化。 实时示例托管在Vercel上： : 入门 要查看将Notion设置为与本示例配合使用的步骤，查看位于的帖子，或按照以下步骤操作。 自行部署 使用Vercel部署您自己的Notion博客。 要么 克隆此仓库git clone https://
nextjs-starter：具有身份验证的Next.js的入门项目
02-04
:police_car_light: 该项目现已存档 我很高兴有很多人发现该项目很有用，但是它已经过时了，并且该Starter项目的许多功能现在都是多余的，因为Next.js在过去几年中已经有了很大的发展，并且现在已经对诸如作为CSS和SASS以及API路由，而无需自定义服务器。 因此，我要退出此项目并将其置于存档模式。 感谢在过去三年中为该项目做出贡献的所有人！ 在哪里寻找例子 您可以在找到有关如何使用Next.js的最新示例。 有关如何向Next.js项目添加身份验证的示例，请在查看NextAuth.js。 在有一个带有实时演示的NextAuth.js示例项目。 Next.js入门项目 这是使用Next.js的R
notionblog:我的个人博客使用notion.so api开发
05-22
弃用： : 更好。 该博客是使用 API构建的。
Next.js Notion Starter Kit 使用教程
gitblog_00914的博客
08-27 898
Next.js Notion Starter Kit 是一个用于构建基于 Next.js 和 Notion 的网站的启动工具包。该项目利用 Notion 作为内容管理系统（CMS），结合 Next.js 和 Vercel 进行快速部署。主要特点包括： - 快速设置（仅需一个配置文件） - 强大的 Notion 内容支持 - 使用 Next.js、TypeScript 和 React 构建 - 优...
基于 Notion + CloudFlare + 域名搭建博客(详细图文教程)
_
01-10 5059
假如我们拥有一个helloworld.com这样的域名，我们期望使用 Notion 笔记来搭建自己的博客站点，那么我们可以使用 Notion + CloudFlare 来组合完成。 1.将helloworld.com的域名 DNS 解析服务器替换为 CloudFlare 的DNS解析服务 rayne.ns.cloudflare.com cosmin.ns.cloudflare.com 2. CloudFlare 配置 CNAME 记录( helloworld.com → notion.s...
开发人员专属的CMS博客平台：primitive-notion
资源摘要信息:"primitive-notion是一个基于CMS风格的博客网站应用，它为开发人员提供了一个平台，让他们能够发布技术相关的博客文章，并且允许用户在其他开发者的文章下进行评论。该网站采用了MVC（模型-视图-控制器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值