category
tags
type
status
slug
date
summary
icon
password
前言
你是否想搭建一个属于自己的独立博客,碍于不懂得如何建站和网页开发?或者你不希望耗费精力处理网页设计、SEO优化、数据库设计维护等麻烦事。
试试这套成熟的解决方案,可以快速帮助你搭建一个属于自己的独立网站,免去大量开发维护的麻烦。几分钟就能把你的笔记本软件变成一个网站~
工具说明
Nextjs-Notion-Starter-Kit : 这是作者自己开发、用于支撑个人博客/文件网站的开源项目。它使用 Notion 作为 CMS,从 Notion 获取内容数据,然后使用Next.js和react-notion-x来静态渲染所有内容。然后将该站点部署到Vercel。
特点
- 界面风格
- 首页是一个Notion的页面,完全在你的笔记中设计板面
- 使用reaction-notion-x库渲染Notion笔记的元素样式,与Notion软件中的样式基本一致,你也可以进行自定义
- 支持侧边Table Contents文章目录
- 支持Collection、Database等复杂Block的展示
- 支持手动日间、夜间模式
- 支持调用NotionAPI搜索文章
- 默认使用 https://utteranc.es/ Github评论插件
- 支持Fathom 统计,类似GoogleAnalystics
不足之处:
- 文章url不能自定义,默认读取notion的笔记标题,只支持英文,中文会被忽略
演示地址
这篇文章将介绍如何用Nextjs-Notion-Starter-Kit 这套方案搭建一个独立博客网站
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F373ce119-432d-45c9-86a6-0e9ba1f9e1cf%2FUntitled.png?table=block&id=cef8aa05-b83d-40d7-8f6f-0da4202e3888&t=cef8aa05-b83d-40d7-8f6f-0da4202e3888&width=3048&cache=v2)
快速搭建
熟悉开源github项目的话,可以直接移步官方README文档,步骤说明已经十分想尽! Nextjs-Notion-Starter-Kit
1. 复制项目
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2b6d96c7-a462-47b8-bbb9-8b7e9f069275%2FUntitled.png?table=block&id=72cdbb98-f9d4-4214-a03c-148df66221e2&t=72cdbb98-f9d4-4214-a03c-148df66221e2&width=3144&cache=v2)
2.修改配置
编辑 site.config.js
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff3ecca5d-79cd-4fb5-9b1a-8f3cd89d9986%2FUntitled.png?table=block&id=7406c1d8-2327-4f2f-8df2-6a1c0383e4ec&t=7406c1d8-2327-4f2f-8df2-6a1c0383e4ec&width=2586&cache=v2)
配置说明
唯一必要做的就是编辑
rootNotionPageId
。这个值用来指定要呈现在网站上的首个页面;- 您需要先公开Share您的Notion 页面,然后将链接复制到剪贴板。然后提取看起来像 的 URL 的最后一部分
d1b5dcf8b9ff425b8aef5ce6f0730202
,这是您页面的 Notion iD。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F49c7d91e-52a6-47fa-b3d7-7283eb77c29a%2FUntitled.png?table=block&id=160e9f6e-d61e-45d9-b85c-8117d95d8110&t=160e9f6e-d61e-45d9-b85c-8117d95d8110&width=2470&cache=v2)
- 建议是在首页上设置一个集合(可选),其中包含您的所有文章/项目/内容。然而,你的 Notion 工作区没有任何结构限制,因此可以像通常在 Notion 中一样随意添加内容。
部署
注册并登录Vercel后台(建议是用Github登录),点击部署新项目【New Project】
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5e813ce5-d1f0-4f29-bb54-a88a64207bed%2FUntitled.png?table=block&id=c3f21fa4-f4ad-4e2b-926a-fd46ab4b9c75&t=c3f21fa4-f4ad-4e2b-926a-fd46ab4b9c75&width=2062&cache=v2)
点击从github仓库导入项目:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1817ae57-b45a-4fce-9e36-597b3d31e79e%2FUntitled.png?table=block&id=060a1848-3400-4d43-9870-c72651a80b2b&t=060a1848-3400-4d43-9870-c72651a80b2b&width=2124&cache=v2)
在项目配置中找到deploy,直接点击部署
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F068e0848-a5ca-446c-8a7d-02706bc25a48%2FUntitled.png?table=block&id=45f4f7f5-1116-4786-8e66-629ea1d0b70b&t=45f4f7f5-1116-4786-8e66-629ea1d0b70b&width=2108&cache=v2)
部署完成后,点击Visit按钮访问你的站点。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd16d7d8a-f01b-4dda-bdca-6715e2034ebf%2FUntitled.png?table=block&id=f77864f2-7c17-43c8-8489-29160d8314e1&t=f77864f2-7c17-43c8-8489-29160d8314e1&width=2112&cache=v2)
域名映射
1.在项目面板中找到 Settings→Domains ; 输入你的域名,并点击Add。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9b3a3d1f-efab-452f-afb2-edd182a203e4%2FUntitled.png?table=block&id=143e1078-42eb-4e30-a683-49f568ebe34f&t=143e1078-42eb-4e30-a683-49f568ebe34f&width=2182&cache=v2)
2.根据提示,在域名服务商后台配置Verccel的Cname,这里我距离用CloudFlare的域名解析服务;
添加一个A类型,名称是你的域名,指向Vercel服务器 76.223.126.88
添加一个CNAME类型,名称为www,指向 cname-china.vercel-dns.com
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fafee8d1f-d74f-4292-a46f-a10924ad2c9a%2FUntitled.png?table=block&id=c96ee483-5bf4-4f92-9eaa-fc4fc9e43ba5&t=c96ee483-5bf4-4f92-9eaa-fc4fc9e43ba5&width=2154&cache=v2)
总结
至此,你可以通过自己的域名打开你的Notion网站了。关于Notion搭建博客的另一个方案Nobelium可以参考这篇文章:
行动建议
你的notion博客网站搭建成功了吗,不妨在评论区,留下你的博客地址,让我看看吧~
- 作者:Tangly
- 链接:https://blog.tangly1024.com/article/nextjs-notion-starter-kit
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。