type
status
date
slug
summary
tags
category
icon
password
前言:本篇文章教你搭建个人博客,无需任何代码上的编写,不需要购买服务器!
1.注册Notion账号并添加Notion blog模板
1.1注册notion账号
首先,打开notion网站,长这个样子~

接着,去注册notion账号,注册需要用自己的邮箱,什么邮箱都可以,注册过程很简单,就省略了哦,注册完成,会出现以下页面。

1.2 添加Notion blog模板
首先,我们访问一个网站,网站链接:
点击右上角的复制

点击之后,会弹出如下页面,点击添加到私人分区

添加完成之后,会弹出如下页面,可以看到Notion Blog模板已经添加到了我们的私人分区里了。

以上,我们的创建Notion账号和添加Notion Blog模板工作就做完了,这个网站之后会作为我们写博客的后台
2.克隆Notion博客到自己的github
该步骤很简单,就是fork写这个博客大佬的博客项目到自己的github仓库里
首先,进入自己的github账号(如果没有,则需要注册),然后搜索NotionNext这个项目,如图,第一个即是我们需要的博客项目。

我们点击这个项目,进入项目,点击右上角的fork

之后,继续点击Create fork

本节就是去fork这个博客项目。
3.创建Vercel账号,让Vercel来托管我们的github项目
简单介绍一下vercel是干嘛的的无缝集成而闻名。它支持从多种版本控制系统(如GitHub、GitLab和Bitbucket)部署项目,简化了部署网站和网络应用程序的过程。
3.1创建vercel账号和github做连接
vercel网站如下

创建账号,出现如下页面,我们选择个人使用,填写自己的用户名

这里,我们把vercel和自己github联系

继续下一步,点击Authorize Vercel

这里需要我们的手机号,vercel是可以用我们国内手机号注册的,之后会发送四位验证码。验证之后,我们就成功创建vercel账号了。

3.2 将我们刚fork的NotionNext项目交给Vercel来托管
这里我们按如下图需要下载一下github仓库,点击Install

继续点击Install

下载之后,我们需要导入我们刚刚fork的NotionNext项目

导入的时候需要我们的环境,其中key填写NOTION_PAGE_ID,value填什么呢??继续看下面的操作

value怎么填?
再次访问我们的notion博客后台网站,如下图进行步骤操作。
- 点击分享
- 点击发布
- 点击发布

之后,会给出以下信息,这其中一部分就是value值。点击复制连接,我们粘贴到新打开的网址中,只需要问号之前斜杠之后的字符串。


再回填到我们刚才那个vercel填写value值的地方。填写之后,点击Deloy。等待大约两分钟之后,我们就可以看到我们的博客部署成功了

4.添加自己的域名
成功部署,但是现在的域名是notion提供的域名,需要我们添加自己的域名
部署成功之后,我们点击Add Domain(如果不着急添加自己的域名,想要之后添加,那么之后添加时点击该项目的settings,之后点击Domains也能找到添加域名)
点击Add Domain,之后,我们添加自己的域名。


这时候,我们还需要域名解析,这里就需要我们申请的域名提供商是什么了,我是在阿里云买的域名,这个教程就按阿里云域名解析来做。

把这里的A和CNAME添加到域名解析里面,如下图

填写之后,我们会看到这爆红(需要域名解析)也就不爆红了,域名成功解析!

5.修改博客主题和一些配置项
成功解析域名之后,我们可以通过自己的域名来访问自己的博客了。

但是,现在我们想修改博客主题,该怎么做呢?
我们只需要去github修改这个项目的blog.config.js的其中配置项即可

修改完成之后点击Commit change…

继续点击Commite changes,这时候vercel会自动帮我们重新去部署这个博客项目

等待一会后,我们重新访问,就跟刚才的不一样咯。

6.如果编写自己的博客文章并上传呢?
在文章最开始,我们提到过会通过Notion来编写博客文章,相当于博客后台。
首先,打开Notion网站,点击我们的Notoin Blog模板,往下拉,我们可以看到添加新页面的按钮,我们可以选择我们需要归档的分类,选择文章的标签,选择文章为published,具体文章内容我们点击文章本体去编写

这里支持makedown语法以及ai问答写文章等便捷功能

编写完成之后,我们只需要cltl+S 进行保存即可,再次访问我们的页面,我们就可以看到文章上传成功了。

有关Notion搭建个人网站或者使用上的问题,欢迎您在底部评论区留言,一起交流~