最最最轻松搭建个人博客

date
May 30, 2021
slug
blog
status
Published
tags
web应用
summary
最最简单的个人博客搭建方法,快进来看!
type
Post
今天了解到Github上一个项目,通过使用Next.js+Notion API在Vercel上部署静态博客系统。项目的用户手册写的很棒,我根据自己的搭建步骤和理解写了这篇大白话教程,可与项目手册搭配食用。若文章中有错误之处,欢迎在评论区指正。

第一步

首先,我们需要进行notion的注册与登录,notion注册推荐优先使用google账号。接下来,我们需要注册一个Github账户
notion是一款将笔记、任务管理及知识库相结合的协作工具,使用本方法搭建静态博客后,可直接在notion中更新文章,网站会同步进行更新

第二步

  • 点击进入模板,点击右上角的duplicate,保存副本后分享给所有人
notion image
  • 点击进入Github项目,点击右上角的fork将项目fork到自己的github仓库

第三步

配置自己Github中刚刚fork项目中的blog.config.js文件,进入文件后点击右边的✏图标进入编辑模式
其中需要注意的是:
  1. 将link中的nobelium进行修改,如本站域名为dino.vercel.app
  1. 依个人喜好将lang的值改为'zh-CN'或者不改
  1. 加上// 注销掉socialLink或自行更改

第四步

  • 进入Vercel官网,使用Github账号登录,在Import Git Repository下添加自己Github中的nobelium项目
 
notion image
  • 点击Import后进入项目配置界面,添加环境变量,名称为NOTION_PAGE_ID,它的值是你刚刚分享出去的Notion页面网址中的页面 ID,通常是网址中工作区地址后的 32 位字符串,具体见图
notion image
notion image
设置好环境变量后点击deploy进行部署,出现congratulations表示已经部署完毕,这样个人博客就搭建好啦,是不是很简单!

第五步

我们在自己notion的NOBELIUM Template区进行个人博客的文章更新,因为是拷贝来的副本,在对整体布局进行一定了解后便可删除原本的文章。下面进行一些解释说明:
  1. slug:本页面网址为https://dino.vercel.app/个人博客,结合下图,懂了吧
  1. summary:在博客主页时,点进文章前你看到的文章总结
  1. tags:对文章进行分类,在搜索时可以选择特定的tag
  1. status:文章的状态,设为idea、draft或revise时不会更新到个人博客
  1. type:目前来说,about是page,平时发动态选post就行啦
notion image

第六步

当然是写个hello world然后再写个搭建教程发一发啦

© Dino 2021 - 2022