password
created time
Apr 9, 2022 07:51 AM
type
Post
status
Published
date
Apr 9, 2022
slug
summary
本文口味：青椒炒肉 🥗
用notion搭建个人博客其实很简单，只需要简单的配置几步就能完成，快来动手试一试。
tags
Notion
博客
Vercel
教程
category
实用教程
icon
🔵 一、前言1.通过本文你可以收获什么？2.为什么选择用 Notion？3.Notion Vs Hugo/Hexo4.效果演示🥦 二、材料准备1.注册 Notion 账号2.注册 GitHub 账号3.使用 GitHub 账号注册 Vercel🏈 三、搭建博客Step 1、复制 Notion 模版Step 2、克隆仓库Step 3、配置 Vercel 项目🍯 四、修改配置📜 五、添加内容
🔵 一、前言
1.通过本文你可以收获什么？
免费获得一个属于自己、基于 notion 、方便进行内容管理的个人博客。
2.为什么选择用 Notion？
- Notion 支持全平台内容同步（网页、Windows、Mac、IOS、安卓）
- 页面简洁，功能强大，
- 尤其是数据库功能，可以使用同一个数据库支持多种 View 展示
- 支持分享，支持评论，可以邀请多人协作
3.Notion Vs Hugo/Hexo
- 内容编辑
- Notion 支持全平台，内容编辑更方便
- Hugo/Hexo 文章仅支持在电脑端编辑
- 内容管理
- Notion 可以很方便的随时随地管理和修改内容，新内容的增删改可以很快在网页端看到
- Hugo/Hexo 对内容的修改需要把文章从本地 Push 到 GitHub，触发重新部署流水线才能在网页端看到最新内容
4.效果演示
试例站点：
🥦 二、材料准备
本文使用的部署方式是 Notion + GitHub + Vercel ，因此需要先准备好账号和环境。
以下材料如果已经具备，可以跳过相应内容。
1.注册 Notion 账号
2.注册 GitHub 账号
3.使用 GitHub 账号注册 Vercel
🏈 三、搭建博客
如果前面的材料都已经准备好了，那就可以开始正式进入搭建环节。
Step 1、复制 Notion 模版
打开下面链接，点击右上角的 Duplicate。即可将该页面复制到自己的 Notion 中。
选择这个页面，复制出页面的 URL
https://www.notion.so/d614706b02f944949762ab54f3460205?v=5f115fea5d0e422eac097d4da5be4dc4
在notion.so/后面跟的一串字符串即是当前页面的 PageID，这里对应的就是`d614706b02f944949762ab54f3460205`，这里先记下来备用。
点击右上角的 Share，开启 Share to web 按钮。
Step 2、克隆仓库
tangly1024/NotionNext
点击右上角的 Fork 按钮，即可把这个项目克隆到自己自己的仓库下。
完成克隆后，左上角的项目目录会变成以你的名称开头，并显示 “forked from xxxx”。
Step 3、配置 Vercel 项目
登陆 Vercel。
点击 New Project 来新建一个项目。
点击搜索框后，会出现下拉列表，选择 Add GitHub Account。
会跳到一个授权页面，如果你是新手或者不想后续再配置，建议直接选择 All repositories，这样在 Vercel 就能直接读取你仓库下所有项目。
如果你喜欢折腾，可以选择 Only select repositories，这样 Vercel 里只能看到你授权的项目，点击 Select repositories 后，在搜索框中输入 NotoinNext 即可找到前面我们 fork 出来的项目。
点击 Install 后会跳转到二次确认页，输入密码即可完成授权
授权完成之后，在 Vercel 里便会多出一个可以选择的 GitHub 账号。
选中这个账号之后，列表中便会出现已授权的项目列表，然后点击 NotionNext 项目 Import 即可导入该项目。
点击 Environment Variables ，添加一个环境变量。
NAME 为 NOTION_PAGE_ID。
VALUE 为上面提到的 PageID。
点击 Add 即可完成添加。
添加完环境变量后，点击 Deploy 即可开始部署。
耐心等待几分钟，即可完成。
🍯 四、修改配置
在 GitHub 中打开我们 fork 出来的项目，找到 blog.config.js 文件。
点击该文件，点击右边的编辑按钮，即可进入编辑模式。
每一个配置背后都有注释说明，修改你感兴趣的内容即可。
这个地方换成上面的 PageID。
修改完成之后，点击下面的 Commit changes 即可完成改动。
我们再会到 Vercel 页面。
会发现新的部署已经自动触发了。
耐心等待两分钟，当状态变为 Ready 时，代表已经部署完成。切到 Overview 页面。
点击 Visit 即可访问我们刚才部署的页面。点击左下角的切换主题即可更改当前主题，如果你想更改默认主题，再重复上述修改 blog.config.js 的操作即可。
📜 五、添加内容
至此，你已经拥有了自己的博客，但还需要了解一些信息才能知道如何使用它。
进入 Notion，打开前面我们复制的页面。
这个页面就是一个数据库，里面的每一行记录代表着一片文章或者一个页面。
里面有很多字段，点开示例普通文章，即可查看模版的使用说明。
点击表格的 New 按钮，即可添加数据。
修改一些字段内容，这里是创建文章，所以第一个选项里类型要设置为 Post。
打开这篇文章，然后随便添加一点内容。
耐心等待几分钟，刷新页面，即可看到最新的改动。
至此，你就拥有了一个免费且漂亮的个人博客！🎉🎉🎉
剩下的内容，就留给你自己探索了，如果什么问题，欢迎和我联系！
有关安装或者使用上的问题，欢迎留言，一起交流~
- Author:弗兰克的猫
- URL:https://notion-next-1fuawgwji-mfrank2016.vercel.app//article/80c5456d-fc2c-4f37-8ee5-3b98552d4321
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
