搭建自己的博客-NotionWeb

写在前面

唠叨两句

作为一个技术开发人员，没有一个自己的博客，人生注定缺少点什么东西，是不是？最近研究了一些博客搭建，本文是使用开源项目”NotionWeb“进行搭建。

推荐等级

所需技术难度：2星
后续自定义程度：1星
美观度：5星
使用技术：NextJS
优点：页面非常时尚，模式也很多，可以随意切换
缺点：后期自定义较难，且Notion无国内服务器，有时候会有点卡

所需工具

内容	备注
Notion	一个笔记软件
GitHub	代码托管软件（最大的同性交友平台doge）

开始搭建

github地址：https://github.com/tangly1024/NotionNext

官方演示地址（多主题）：
https://preview.tangly1024.com/?theme=hexo
https://preview.tangly1024.com/?theme=next
https://preview.tangly1024.com/?theme=medium
https://preview.tangly1024.com/?theme=fukasawa
https://blog.doubletree.fun/

前端： NextJS + Notion API

首先登录github地址，如果没有github账户的，需要注册。然后点击Starred（哈哈哈，好项目需要你我的点赞），然后再点击Fork拉去到自己的私有仓库中

Notion

Notion使用

Notion是一个很好用的笔记本软件，但是因为服务器在国外，使用会有一定的卡顿延迟性。如果能科学上网，Notion还是一个非常棒的软件。被网友吹捧为笔记本软件的最终形态。具体如何使用我就不多说了，请看下面的链接，写的非常的全

https://zhuanlan.zhihu.com/p/614078488

Notion准备

准备Notion模板

先注册并登录Notion，然后点击下面的链接，点击右上角的Duplicate复制模板

https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

准备NOTION_PAGE_ID

在你自己的Notion模板页面，右上角会有Share的按钮，点击

页面ID在您的共享链接中、域名中间的一串32位字母与数字，如下图所示：

以下我的共享链接，其中标红加粗下划线部分才是页面ID！要忽略?v=后面的英文数字。
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
我的页面ID 是
02ab3b8678004aa69e9e415905ef32a5

NotionNext的参数配置

复制的模板配置

首先，红框部分的标题和图标，都会显示在对应的页面上

蓝框里面就是具体的数据内容了

type

当前行的类型，分为以下几种

Post：可以认为就是我们文章页面，会显示在列表中Page：一个文章页面，不会显示在列表中，可以作为一些描述页面使用Notice：公告页面，会显示在公告栏，但是不会显示在文章列表中Menu：菜单栏配置SubMenu：子菜单栏配置，注意子菜单都是跟着Menu主菜单的Config：配置文件，这个不用管，别删就行。里面有具体的配置，详情可以进入查看

title

文章标题，然后鼠标移动到这一列，点击打开，就能编辑文章详情，比如

summary

摘要，此处根据具体类型，有不同的作用

status

类型

Published：已发版Invisible：不可见的Draft：草稿

category

分类，文章会进入到具体的分类中

tags

标签，会联动一些查询

其他

category：分类，文章会进入到具体的分类中tags：标签，会联动一些查询slug：链接地址，会指定对应的链接date：创建时间，后面排序会用到password：密码，输入密码才能访问icon：图标

Notion的blog.config.js配置

这里面是系统的主要配置，都是很重要的，页面的一些文字，跳转啥的。并且作者备注的特别详细。

Notion中，你使用的对应模板的config.js配置

在代码的themes文件夹下，会有模板的文件夹，找到你喜欢的模板后，可以调整对应的config.js，上面有对应模板的特殊配置内容，备注的也特别详细

多方案部署

Vercel托管

介绍

Vercel是一个来自国外的在线脚本托管平台，对于个人使用，其免费版已经完全足够，因此您无需购买服务器即可搭建自己的网站。不过因为是国外的平台，这个网站时不时被墙，会影响使用。

价格

使用

登录官网https://vercel.com/，点击登录，并点击start deploying，然后登陆你的github账号

选择对应代码仓库，比如我选择NotionNext仓库，点击import，下一步之后，environment variables填写如下数据

然后点击deploy，等待几分钟就完成了呢

点击continue to dashboard，进入控制台，下免得domains就是访问地址

点击visit或者直接点击domains，就可以访问网站了，比如

绑定域名

进入Settings，找到Domails，输入域名，点击add即可。在输入前，记得这个域名已经进行解析了。解析成功，就可以通过域名进行访问了，如下所示：

Zeabur托管

国人开发的托管平台，不过需要github的账号，你的项目也需要传到github上。

Zeabur 是一个可以帮助你部署服务的平台，无论你使用什么编程语言或开发框架，你都只需要通过几个简单的按钮进行部署。

官网：https://zeabur.com/docs/zh-CN

此托管平台有一定的价格

但是对于个人开发者，有一定的免费额度

安装方式详见

https://docs.tangly1024.com/article/deploy-notion-next-with-zeabur

云服务器部署

这就是一个纯Node项目了，按照Node项目进行部署即可，如下所示：

需要一个云服务器，此处我们用Centos7举例子

下载代码

首先需要下载代码，在云服务器上下载或者在本地下载后上传服务器上都可以，本地下载就不多说了，如果在云服务器上下载的话，需要先安装git

yum install git -y

然后从github上拉去代码

# 进入用户主目录cd ~ # 拉取代码注意此处的地址最好改成自己fork后的地址git clone https://github.com/tangly1024/NotionNext && cd NotionNext

安装Node环境

官网推荐使用nvm进行安装，NVM（Node version manager）是nodejs的专用版本管理器，可以快速方便地安装并切换nodejs的版本，方便以后升级NodeJS环境。

用git从github下载nvm源码。

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

如果出现网络受限，可以使用gitee下载nvm源码

git clone https://gitee.com/koalakit/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

使用nvm安装Nodejs

# 1. 将nvm设置为系统环境变量echo "source ~/.nvm/nvm.sh" >> ~/.bashrc# 2. 更新变量环境source ~/.bashrc# 3. 安装 nodejs ， 这里举例使用v16.14.0版本，其它更新的版本也可以用nvm install v16.14.0

然后安装yarn环境

# 1.【可选步骤】 NPM切换国内淘宝网镜像，便于加速安装。npm config set registry http://registry.npm.taobao.org# 2. npm 全局安装 yarn npm install -g yarn

运行NotionNext

在NotionNext的项目下，运行如下命令安装项目所有依赖的脚本和库

yarn 

然后进行项目编译（注意，如果你修改代码后，都要重新进行编译）

# 2.打包编译yarn build# 3.将你的notion_page_id设为环境变量，例如：NOAGE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

然后就可以启动命令了

cd NotionNextnohup yarn start >/dev/null 2>&1 &

启动完，就可以访问“域名:3000”端口进行访问了

展示

HEO模式

首页

文章详情

NEXT模式

首页

文章详情

MEDIUM模式

首页

文章详情

HEXO模式

首页

文章详情

FUKASAWA模式

首页

文章详情

--------END--------

天行健，君子以自强不息；地势坤，君子以厚德载物

欢迎关注

blog：http://myblog.doubletree.fun
公众号：Doubletree的杂七杂八
csdn：https://blog.csdn.net/qq_27808011

本文链接：https://www.kjpai.cn/news/2024-04-08/155454.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！