使用Notion搭建个人博客

23 年 4 月 25 日 星期二
923 字
5 分钟

前言

在2023年初,我决定更换博客的托管方式,想找一个更加方便的方式。由于我是Notion的重度用户,于是我找到了NotionNext

首先介绍一下 NotionNext。它是一个使用 NextJS + Notion API 实现的静态博客,支持多种部署方案。它无需服务器,搭建网站也非常容易。

我们将使用 Notion 作为存储文章的数据库,使用 Github + Vercel 作为管理和部署的工具,并使用 NotionNext 的代码渲染来展示我们的文章,创建一个博客网站。

那么,让我们开始吧!

📝 部署

前期准备

1、Fork NotionNext代码

先准备Github+Vercel的账号,先去往NotionNext在Github的库fork到自己的账户上

202304251333863

https://github.com/tangly1024/NotionNext

2、Notion复制模版

前往下方的模版页面,点击复制副本按钮,把页面保存到自己的Notion

模版:https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d&pvs=4

202304251358159

在保存页面的右上角,点击分享按钮,开启分享到网络,并复制网页链接贴到游览器地址窗口

202304251400967

在游览器地址窗口找到页面ID,具体参考下图:

202304251402932

这张图片是从官方教程复制的

开始部署

等待Github fork完,前往Vercel,添加新项目

Dashboard – Vercel

202304251351445

找到NotionNext项目,点击Import按钮进行部署

202304251352510

点击Environment Variables(环境变量),并添加一个属性名称为NOTION_PAGE_ID,值为步骤一获取到的页面ID。

202304251427618

把之前准备步骤里的页面ID复制到Value上,点击Deploy进行部署

部署完成

当出现这个页面时候,整个部署已经完成了。点击Go to Dashboard前往网站的控制台

202304251430344

其他配置

绑定域名

在网站的控制台页面,找到Settings页面

202304251432042

点击切换到 Domains 页面,输入域名并点击 add 按钮进行添加。添加成功后会出现域名解析所需的 IP 和服务器。前往域名管理页面,解析到指定地址即可。所有配置完成后,请耐心等待域名商进行解析。解析时间一般在 24 小时内生效,速度快慢不一。

202304251435279

所有步骤都已经完成,现在可以快速访问自己的博客了!

配置中心(6月6号更新)

如果你的版本是 V4.1.0 之后的版本,支持该配置页面,有一些网站的基本配置在这里直接修改,而不用像之前需要去改 blog.config.js 才能生效

Untitled

新建一个页面,去模型网页,照着把模型页面里的配置参数全部复制过来即可!

模版:https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d&pvs=4

qKcIrX

更新 (2024/11/30)

更新项目建议Fork原项目之后,在自己的项目中,新建分支进行更新操作。这样在后续更新发生冲突时候,可以不影响主干项目的更新,只修改网站项目。也可以建立多个分支去管理多个网站。

新建分支

在原项目中,新建分支,点击View all branches进入分支管理界面

2024-11-30 at 16.48.14

进入分支管理界面后,点击New branch按钮,输入分支名称后,分支建立成功

2024-11-30 at 16.49.13

版本更新

在上游项目有更新之后,可以在github上看到有更新的提示(如: 2 commits behind),这时可以点击:Sync fork按钮,再点击Update branch按钮,即可自动更新上游版本内容

2024-11-30 at 16.47.04

点击更新之后,可以在Vercel后台看到正在编译这次更新的操作,等待编译完成即可。

💡 感谢您的观看!欢迎分享文章,或是来信与我交流。

文章标题:使用Notion搭建个人博客

文章作者:CHACAT

文章链接:https://blog.chawfoo.com/posts/blog1[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。