用Notion部署你的个人博客
date
Apr 11, 2022
slug
6
status
Published
tags
Tutorial
summary
用Notion搭建自己的静态博客
type
Post
Book
为什么要用Notion部署？
我们不能单单用笔记软件来形容日渐强大的Notion了，Notion提供了几乎所有平台的客户端。并且你在Notion记下的内容可以直接通过链接分享给任何一个能够通过浏览器访问的人，同时对方看到的内容和你想展现的内容是一模一样。我们要知道平时我们用某些编辑器写好内容，辛辛苦苦排好版，但因为对方的设备可能适配得没那么好，看到的内容总是千奇百怪。
由于Notion的便捷性，使得我总是在学习的过程中用它来做笔记。有时我也想在我的博客上分享一些有趣的东西，我尝试过用类似Wordpress的博客框架，但苦于只能通过博客后台区撰写更新，不能随心所欲地记录，所以把我劝退了。而通过Nobelium项目，你可以直接在Notion上编辑，然后会自动同步到你的博客上。
基础知识
Nobelium
一个通过Notion做内容管理的静态博客项目；基本原理是利用Notion公开分享的页面，获取页面内容、添加样式的方式来实现的静态博客。
Vercel
一项对开源项目免费的托管服务。集部署发布、服务托管、证书部署等等为一体的自动化托管服务器。简单来说：
- Vercel面向开源项目是免费的（意味着你不需要花费任何钱）
- Vercel能够自动降开发模式下的代码转变为可以对外提供服务的网页（意味着上手成本比较低）
总结来说，你不需要太多专业知识就可以通过Vercel部署独立域名、带安全证书的网站。
准备工作
- Github
开始部署
拷贝模板，并分享
- 打开Nobelium提供的Notion模板，拷贝这个模板到自己的Notion Workspace中。确保右上角显示的是自己的账户（说明已经登陆）。
- 将自己Workspace中的这个页面分享出去：
- 在这里我们要获取
NOTION_PAGE_ID，这个在后面部署的时候需要用到。点击 Share to web 按钮下面的 Copy 拷贝链接。
- 然后找一个地方粘贴我们刚刚拷贝的地址（可以用浏览器），然后找到
Page ID，复制保存好。
Fork Nobelium项目到自己的Github仓库中
- 打开Nobelium项目，点击一下Fork按钮。（确保已经登陆了自己的Github）
这里对不了解Github的用户解释一下，Fork其实就类似Notion的Duplicate，也就是将项目拷贝一份到自己的Github里面，这样你对这个项目的内容进行编辑的时候，也只会在自己的项目里生效，不会影响原作者的项目。拷贝后就能看到
你的ID/nobelium，这就表示这个项目在你的仓库中。
修改配置文件
- 找到blog.config.js文件，点击进入预览页面：
- 点击编辑按钮，进行编辑：
这里可以修改一些博客的基本信息：
title：填写你博客的名称
author：填写你的名称
email：你的邮箱地址（如果你觉得有必要的话）
link：你的博客地址
description：博客的描述
以及外观相关的
appearance、font、lightBackground、darkBackground配置可以进行修改。开发者的文档注释非常详细，可以参考文件内的注释进行修改。除了
blog.config.js外，你还可以替换项目的图标，图标文件存储在public这个文件夹中。点击Add File 按钮，可以将你的图标进行上传，只要把图标命名为对应的名称即可。建议先修改原来的图标的名称，再上传新图标并且命名。登陆到Vercel进行部署操作
- 打开 https://vercel.com/ ，然后点击 Sign up ，选中 Continue with Github 。
- 授权使用Github登陆到Vercel，接着弹出 Import Git Repository ，（如果没有就点击右上角的 New ）选择 Nobelium 这个项目，点击 Import ，选择个人账户，开始部署操作：
- 设置
环境变量，即点击Environment Variables展开：
NAME填写NOTION_PAGE_ID，VALUE填写对应的值（就是前面获取的PAGE_ID）：
- 填写好后点击 Add ，最后再点击 Deploy ，开始部署，右侧会显示部署的过程：
- 部署完成后，点击 Visit 就可以看到博客网站啦！
