🌊如何用Notion+Vercel+Github搭建一个属于自己的个人博客?
2025-4-15
| 2025-4-15
Words 1671Read Time 5 min
type
status
date
slug
summary
tags
category
icon
password
😀
前言:本篇文章教你搭建个人博客,无需任何代码上的编写,不需要购买服务器!

1.注册Notion账号并添加Notion blog模板

1.1注册notion账号

首先,打开notion网站,长这个样子~
notion image
接着,去注册notion账号,注册需要用自己的邮箱,什么邮箱都可以,注册过程很简单,就省略了哦,注册完成,会出现以下页面。
notion image

1.2 添加Notion blog模板

首先,我们访问一个网站,网站链接:
点击右上角的复制
notion image
点击之后,会弹出如下页面,点击添加到私人分区
notion image
添加完成之后,会弹出如下页面,可以看到Notion Blog模板已经添加到了我们的私人分区里了。
notion image
以上,我们的创建Notion账号和添加Notion Blog模板工作就做完了,这个网站之后会作为我们写博客的后台

2.克隆Notion博客到自己的github

该步骤很简单,就是fork写这个博客大佬的博客项目到自己的github仓库里
首先,进入自己的github账号(如果没有,则需要注册),然后搜索NotionNext这个项目,如图,第一个即是我们需要的博客项目。
notion image
我们点击这个项目,进入项目,点击右上角的fork
notion image
之后,继续点击Create fork
notion image
本节就是去fork这个博客项目。

3.创建Vercel账号,让Vercel来托管我们的github项目

简单介绍一下vercel是干嘛的
Vercel是一个用于静态站点和无服务器函数的云平台,特别以与JavaScript框架Next.js
的无缝集成而闻名。它支持从多种版本控制系统(如GitHub、GitLab和Bitbucket)部署项目,简化了部署网站和网络应用程序的过程‌。

3.1创建vercel账号和github做连接

vercel网站如下
notion image
创建账号,出现如下页面,我们选择个人使用填写自己的用户名
notion image
这里,我们把vercel和自己github联系
notion image
继续下一步,点击Authorize Vercel
notion image
这里需要我们的手机号,vercel是可以用我们国内手机号注册的,之后会发送四位验证码。验证之后,我们就成功创建vercel账号了。
notion image

3.2 将我们刚fork的NotionNext项目交给Vercel来托管

这里我们按如下图需要下载一下github仓库,点击Install
notion image
继续点击Install
notion image
下载之后,我们需要导入我们刚刚fork的NotionNext项目
notion image
导入的时候需要我们的环境,其中key填写NOTION_PAGE_ID,value填什么呢??继续看下面的操作
notion image
value怎么填?
再次访问我们的notion博客后台网站,如下图进行步骤操作。
  • 点击分享
  • 点击发布
  • 点击发布
notion image
之后,会给出以下信息,这其中一部分就是value值。点击复制连接,我们粘贴到新打开的网址中,只需要问号之前斜杠之后的字符串
notion image
notion image
再回填到我们刚才那个vercel填写value值的地方。填写之后,点击Deloy。等待大约两分钟之后,我们就可以看到我们的博客部署成功了
notion image

4.添加自己的域名

成功部署,但是现在的域名是notion提供的域名,需要我们添加自己的域名
部署成功之后,我们点击Add Domain(如果不着急添加自己的域名,想要之后添加,那么之后添加时点击该项目的settings,之后点击Domains也能找到添加域名)
 
点击Add Domain,之后,我们添加自己的域名。
notion image
notion image
这时候,我们还需要域名解析,这里就需要我们申请的域名提供商是什么了,我是在阿里云买的域名,这个教程就按阿里云域名解析来做。
notion image
把这里的A和CNAME添加到域名解析里面,如下图
notion image
填写之后,我们会看到这爆红(需要域名解析)也就不爆红了,域名成功解析!
notion image

5.修改博客主题和一些配置项

成功解析域名之后,我们可以通过自己的域名来访问自己的博客了。
notion image
 
但是,现在我们想修改博客主题,该怎么做呢?
我们只需要去github修改这个项目的blog.config.js的其中配置项即可
notion image
修改完成之后点击Commit change…
notion image
继续点击Commite changes,这时候vercel会自动帮我们重新去部署这个博客项目
notion image
等待一会后,我们重新访问,就跟刚才的不一样咯。
notion image

6.如果编写自己的博客文章并上传呢?

在文章最开始,我们提到过会通过Notion来编写博客文章,相当于博客后台。
首先,打开Notion网站点击我们的Notoin Blog模板往下拉,我们可以看到添加新页面的按钮,我们可以选择我们需要归档的分类,选择文章的标签,选择文章为published,具体文章内容我们点击文章本体去编写
notion image
这里支持makedown语法以及ai问答写文章等便捷功能
notion image
编写完成之后,我们只需要cltl+S 进行保存即可,再次访问我们的页面,我们就可以看到文章上传成功了。
notion image
 
💡
有关Notion搭建个人网站或者使用上的问题,欢迎您在底部评论区留言,一起交流~
 
  • 文字
  • 推荐
  • Java - 集合Spring - Transaction
    Loading...