👣教程梳理 | 从0开始搭建个人Notion博客
00 分钟
2023-7-25
2023-8-8
type
status
date
slug
summary
tags
category
icon
password
谨以此文梳理回顾自己的的搭建过程。
💡
本文推荐的个人博客搭建工具为:Notion+GitHub+Vercel

为什么用Notion搭建个人博客

之前尝试过用hexo+node.js+git这套广泛使用的组合拳来搭建一个个人博客,整个过程下来,其实说难也不难,就是对于代码0基础的小白(本人就是)来说,可能一个小小的空格被忽略都会导致部署失败,而且当遇到node版本不适配的时候,你需要重新删除再下载更旧的版本——这个推翻重来的过程以及可能无法一次性解决的问题未免让人有点心情烦躁。就算搭建完成了,修改模板的前提是你也需要有一定的前端知识输入,后续写文排版上你也得对md语法有些了解,所以,兜兜转转我还是回到了Notion。
 
相对于其他静态部署工具,Notion提供了一个干净和用户友好的界面,基于块的系统允许更大的灵活性,包括文本、图像、视频、代码片段等等,当我了解到Github上notionnext这个项目时,我心里想着,这不就是我想找的最简便的搭个人blog的最简便方式了吗?
 
如果你也对此感兴趣,我相信Notion Blog是一个很能节省精力搭建博客的优选!下面就跟着我一步步搭建吧😀
 

如何搭建你的第一个Notion Blog

1. 注册账号(国内外邮箱均可)

创建账号推荐顺序:NotionGitHubVercel(以下为官网跳转链接,点击就可以开始注册)
 
常见问题备注🧐
 
 

2. 复制模板

2.1 复制notion模板

  • 打开此模板链接,点击右上角的 Duplicate(创建副本)
 点击右上角的 Duplicate(创建副本)
点击右上角的 Duplicate(创建副本)
  • 创建完副本将跳转到此界面——你自己的notion页面的菜单栏将出现notion blog,页面ID也可先复制起来
页面ID在“site/“后,“?v”之前,一共32位的纯数字!
页面ID在“site/“后,“?v”之前,一共32位的纯数字!
  • 点击右上角的 share(分享)→Publish发布)→Publish to web(网页发布)
以后此页面中就能同步你写的任何内容,别人也能看到你分享出来的内容
notion image

2.2 复制Github项目——NotionNext

复制以下GitHub项目——notionnext到自己的GitHub里,点击下方链接,跳即可跳转。
 
点击 fork ,再点 Create Fork此时这个NotionNext的项目就会复制到你自己的repository(仓库)里面
notion image
 

3. Vercel部署

点击下方链接,在这个Import Git Repository(仓库)中点击 import(导入)NotionNext
notion image
 
点击 Environment Variables(环境变量),添加属性名称为 NOTION_PAGE_ID,把步骤2.1Notion Blog的页面ID粘贴到这里
前3步完成后,最后才点击Deploy(ps:我前后花了不到5min完成部署)
前3步完成后,最后才点击Deploy(ps:我前后花了不到5min完成部署)
 
在部署完成页面,点击 Go to Dashboard 访问控制台,然后再点击右上角的 Visit 即可访问你的专属博客啦
点击Go to Dashboard~
点击Go to Dashboard~
点击visit即可跳转到个人博客~
点击visit即可跳转到个人博客~
 
至此你就完成个人站点搭建的第一步啦,接下来就是内容的撰写和博客主题的修修改改啦 ✅
关于主题的修改,NotionNext的作者写得非常详细,感谢这位互联网菩萨~
 
如果你需要自定义域名,本人再强烈推荐以下的搭配:
Namesilo:一个买域名最性价比的地方
Cloudfare:为网站提供DNS保护,因为国内vercel.app打不开需要cname也是用这个搞的
 

参考教程

以下是阿森在搭建过程中看过的教程,这里分成了图文、视频的教程,大家按需选择👇
教程主题
形式
链接
作者
NotionNext的所有配置,包括后续插入评论等其他配置
图文
tangly1024
账号注册至部署,简易版教程
视频(2min)
tangly1024
比较详细的搭建全过程,免费域名也有提供教程
视频(12min)
科技小飞哥
namesilo平台,怎么买域名
视频

评论
  • Giscus
  • Cusdis