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

最新推荐文章于 2024-08-29 09:00:31 发布
最新推荐文章于 2024-08-29 09:00:31 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： notion
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aosky/article/details/117733462
版权
说明

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搭建博客方法一：notion简单操作说明
aosky的专栏
05-06 4577
简介 notion搭建博客的方法有很多种，今天介绍最基础的、原汁原味的方法。 步骤 注册一个notion账号，使用邮箱就可以很快注册，免费账号除了附件大小、共享用户数等有部分限制其他基本都不影响使用。 新建一个Page，输入 / 然后table - Inline，或者打开notion博客模板复制模板即可。 修改table里面的properties根据自己的写作习惯进行修改。 对于有常用写作规范的也可以设置templates。 博文的展现形式可以列表、表格等，有图片的也可以设置为画廊
搭建博客网站最简单的方式：Notion + Vercel实现个人博客搭建
weixin_39514020的博客
01-17 2017
现在这个页面就是我们博客网站的主页面，我们需要将页面与我们的项目配置进行绑定，也就是将页面的PageId填入到步骤1的配置文件当中去。如果你有自己写博客的习惯，需要一个网站来展示自己的博客，同时，你又不想要进行复杂的开发工作，那么本篇文章将教给你一个最简单的博客搭建方式，仅需要一些配置修改即可以搭建好你的个人博客网站。项目部署成功后，可以在我们的Dashboard页面上查看到我们的项目，在我们绑定自己的域名之前，使用的是Vercel给我们的默认域名，我们可以进入项目，购买并且绑定我们自己的域名。
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 4185
NotionNext是什么？ NotionNext是我在Github上开源的基于Next.js框架开发的博客生成器。目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站，从而专注于写作、而不需要操心网站的维护。 它将您的Notion笔记渲染成静态的博客页、并托管在Vercel云服务中。与Hexo静态博客相比较不同的是，您无需每次写好的文章都要推送到Github，编写与发布只在您的Notion笔记中完成。 依托于Notion强大的编辑功能，您可以随时随地撰写文章、记录你的创意与灵感，笔记会被自动
Next.js Notion Starter Kit：构建现代网站的完美起点
最新发布
gitblog_00491的博客
08-29 428
Next.js Notion Starter Kit：构建现代网站的完美起点 nextjs-notion-starter-kitDeploy your own Notion-powered website in minutes with Next.js and Vercel.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-notion-starter-...
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作为CMS搭建自己的Web网站
qq_45430571的博客
05-29 3617
这篇博客提供了一个快速搭建个人网站的指南，使用了Notion作为内容管理工具，并结合了nextjs-notion-starter-kit项目来将Notion页面转换成个人网站。整个过程分为准备环境、创建Notion页面、开放页面外部访问、克隆项目、填入NotionPageId、在本地测试和部署到服务器等步骤。同时也介绍了如何配置自定义域名以及后续更新的一些建议。
快速构建并部署支持Notion的Next.js网站
6. 压缩包子文件的文件名称列表：由于列表中只有一个文件名称"nextjs-notion-starter-kit-main"，可以推断这是整个项目的主要入口文件或主目录。通过这个入口文件，用户可以访问和操作整个项目的所有功能和代码。
搭建自己的博客-NotionWeb
Doubletree.lin的博客
03-23 2158
技术改变生活-搭建自己的博客-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 821
Next.js Notion Starter Kit 使用教程 nextjs-notion-starter-kitDeploy your own Notion-powered website in minutes with Next.js and Vercel.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-notion-starter-kit 项目介...
基于 Notion + CloudFlare + 域名搭建博客(详细图文教程)
_
01-10 4817
假如我们拥有一个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...
基于NotionNext的个人网站|博客搭建与部署实例教程
C_JackForme的博客
07-09 2843
📕Notion是一个多功能的笔记软件，其功能具有极高的可玩性（可以在页面中加入代码、视频、链接...简直就是博客神器），UI设计人性化，支持用户进行自编辑与根据官方API进行二次开发，大家可以先进入Notion的官网进行了解（由于作者之前做笔记都是使用幕布，现在使用Notion实在是越级的体验🤦‍），本文介绍的NotionNext就是基于NotionAPI开发的开源项目。
探索未来知识管理：NotionNext，一个强大的Notion增强工具
gitblog_00006的博客
03-21 623
探索未来知识管理：NotionNext，一个强大的Notion增强工具 去发现同类优质开源项目:https://gitcode.com/ 是一款旨在提升Notion效率和功能的开源项目，由开发者Tangly1024创建并维护。如果你是Notion的忠实用户，或者正寻找一种更高效的知识管理和协作工具，那么NotionNext绝对值得你一试。 项目简介 NotionNext是一个基于Notion AP...
Notion做个人博客
weixin_46960323的博客
04-21 5308
Notion做个人博客的两种实现方式 Notion做个人博客其实也是个不错的idea，看看我是如何实践的吧～ 我的个人主页：https://wangyurui.top/ 1. 直接用Notion的page ，绑定域名。 https://wangyurui.life/ 直接利用Notion页面，主需要完成内容的填充和设计工作就OK了。 图1.wangyurui.life 绑定教程网址：https:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值