[建站相关] 使用Notion搭建个人网站系列二、把Notion页面托管到Vercel平台
作者:CC下载站 日期:2023-02-16 01:00:56 浏览:6 分类:站长帮
这个系列适合所有零基础的电脑小白用户,轻轻松松搭建属于自己的个人网站
如果对怎么使用Notion创建一个网站页面不了解,可以看我上一篇教程:使用Notion搭建个人网站系列一、使用Notion创建个人主页
按惯例先看下我的个人网站展示效果。我是非常喜欢这种主题的,也计划要把个人网站全部迁移到Notion上。
搭建这样效果的个人网站只需要两个账号即可。
一、Github账号
1. 创建账号
如果你还没有Github账号,先使用email地址注册一个,非常简单。
2. 克隆项目
Fork NotionNext
到你的Github账号
可以在Github的搜索框直接搜索NotionNext
,也可以直接点击链接:https://github.com/tangly1024/NotionNext
然后点击点击右上角的Fork
按钮:
然后就会弹出如下界面,点击Create Fork
,就会在你的Github账号里面拷贝一份代码。
这份代码就是我们搭建个人网站的关键,这个NotionNext
调用了Notion的API来展示Notion的页面,同时提供了一些主题和特效,可以定制化我们的网站效果。
对于这个仓库,我们唯一需要关注的就是blog.config.js
文件,我们的所有主题特效修改都只需要改这个配置文件即可,后面我会详细介绍。
二、Vercel账号
如果你还没有 Vercel 账号,先创建一个Vercel账号,直接使用刚才的github账号注册,同时方便从Github
导入NotionNext
。
1. New Project
第一步是新建项目
2. Import Git Repository
导入Git仓库,可以选择导入所有仓库,也可以选择导入指定仓库NotionNext
3. 选择NotionNext并Import
在仓库列表里面 NotionNext
然后点击Import
4. 部署
配置你的notionnext
点击Environment Variables
Name: NOTION_PAGE_ID
Value: e4bc192eb3ac47b18c0a547fc127f542
注:Value是你的Notion个人主页的值,我们从我们之前的那个Notion模版里面点击Share
->Share to web
->Copy web link
可以看到我们的link
https://mulberry-table-1ab.notion.site/6280b79464184604bc6872e627e9b6a3?v=2cd07ed47d834c89bc60fbfee0973b6b
那么中间这个部分就是你的value,填到环境变量里面。
点击 Deploy,然后等两分钟,就可以部署成功了。
然后点击Vercel分配给你的域名直接访问,就可以访问到你的个人网站了。由于网络限制的原因,可能访问不成功,没关系,我们下一步申请域名来绑定到个人网站来访问。
网站配置
我们刚才说过blog.config.js
文件是Notion个人网站的一些配置,我们可以直接修改这个配置文件来修改展示效果。
文件里面每一行的作用都有详细的注释,你可以根据需求修改。我们在Github上的修改,无需重新部署,Vercel会监听Github的修改,自动部署。
1
2
3
AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || '小编', // 您的昵称 例如 techxiaofei
BIO: process.env.NEXT_PUBLIC_BIO || '小编的个人网站', // 作者简介
LINK: process.env.NEXT_PUBLIC_LINK || 'https://techxiaofei.com', // 网站地址
所有带有process.env
前缀的变量,都可以在Notion
里面添加环境变量配置来覆盖,同NOTION_PAGE_ID
一样,意味着如果你不想修改NotionNext
代码仓库,是完全可行的。
同时NotionNext代码仓库还有着其它非常丰富的配置可以修改,甚至可以显示主题选项,随时一键切换主题,显示鼠标点击特效,动态特效,宠物挂件,音乐播放插件,等等。
这些都等着你探索。
后记
可以看到我们搭建一个个人网站根本不需要任何编程基础或者执行指令。
到现在我们算是成功了80%,还有一步就是申请免费域名就绑定到个人网站。 下一篇我会讲如何申请免费域名并绑定到个人网站,到这一步,你的个人网站才算完整。
<全文完>
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[课程] 极客时间-从 0 开发一款 iOS App
[网赚相关] 最新网易云梯计划网页版,单机月收入5000+!!
[游戏娱乐] 《永恒空间2》v1.1.39656中文版
[摄影] 玩转手机摄影 | 滤镜手机支架
[美食] 春天最不能忘记吃的菜,脆甜爽口营养高,减肥、控糖都很合适
[美食] “湿气”最怕这种菜,三天两头吃一次!祛湿健脾一身轻,别不懂吃
[影视资讯] 2023-2025年所有“漫威电影和剧集”上映播出时间整理
[经验] 摆地摊的八大禁忌
[游戏娱乐] 《驱灵者:新伊甸的幽灵》v1.4.1中文版
[游戏娱乐] 《诅咒村庄》v1.0.0中文版
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长,三大队任务完成了 2023 三大队 6.7G
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[影视] 涉过愤怒的海 WEB-DL版下载/怒海 / Across the Furious Sea 2023 涉过愤怒的海 26.3G
- 最新评论
-
我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14
- 热门tag