005.搭建一个基于notion的个人网站(保姆级）

前言

上一篇的韩国老哥的库在支持notion自动更新上有问题，奈何代码知识不足，不知如何下手，遂重新布置了原作者的库。

不需要频繁更新可继续参考上一篇：

👨🏻‍💻

004.搭建一个基于notion的个人网站2.0

原作者库在此：

添加的内容：知乎链接（侧边与底部）

不需要自定义的话直接fork我的库：

直接修改site.config.ts文件就可以了。

部署vercel

部署前说明(非常重要）：为了提高效率，建议fork完库后直接部署，成功后再修改下面的几处文件。

部署使用vercel.com/网站，可直接用github账号登录，网速慢可使用这个推广链接注册VPN：点我。

登陆后，添加一个新项目

选择刚fork的库

等待导入成功。

绑定域名

蓝框内预览域名可绑定自己的独立域名，红框内为自动生成的域名。

红框内填写你的独立域名，生成两条dns规则，去到购买域名的服务商后台添加这两条dns规则：

💡

有两条

💡

A @ xx.xx.xx.xx

💡

CNAME www xxxx.xxxx.xxxx.xxxx

vercel上会自动验证

成功后你的独立域名就可以访问了！

部署区域

可以把vercel的部署区域换成香港。

文件1：site.config.ts

此文件位于主目录下，信息都存在于此文件下。

页面地址修改

红框内是notion分享页面链接的最后一部分下图红框内容（实测页面标题可以随意改）

主页面点击分享，打开分享按钮才可部署成功

notionspaceid 填写你notion里自己定义的域名，即图内蓝框内容

可以自己定义或自动生成。

名字，域名，作者自己替换即可

twitter、github、知乎填写用户名（知乎每180天可以修改一次用户名记得同步）

导航栏

安卓：

导航栏此次在site.config.ts文件内

最底部的这几行

注意中间有个逗号相隔，

pageid即notion分享页面链接的最后一部分。

实测手机端体验良好导航栏标题不要超过三个。

tips：如果有几个独立域名分别部署更新，即使在不同的主分享页面内导航栏标题不要有相同字段。

例子：A-页面内有about子页面，则B页面内子页面about需加字符或别的名字，可更换为：关于\about me。如相同字段，则第二次部署的主页面的相同标题子页面更新会有问题。

文件2：public文件夹

此文件夹内为网页预览图标，需替换四个文件，manifest.json文件为配置文件，可直接替换原文件，或者上传新文件修改json文件内容。

manifest.json打开可看到：

红框内三处png文件需修改替换。

蓝框内ico需转换，可使用网页在线转换：http://damotou.com/

文件3：GitHubShareButton.tsx

此文件在components文件夹内，是网页版右上角github的按钮编辑，可更改颜色与链接。

红框内容可修改为自己的github地址，或自定义库的地址。

蓝框内为按钮颜色

最底下黑框内为github的图标svg代码。

改了以上三处就完成了。

下面讲讲自己学到的内容，就是黑框的部分。

SVG教程

自定义ico可参照这篇文章：

🖼️

006.SVG 2 path

知乎ico的代码：


<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<svg viewBox="0 0 64 30" fill="#0066FF" width="64" height="30" class="css-1hlrcxk"><path d="M29.05 4.582H16.733V25.94h3.018l.403 2.572 4.081-2.572h4.815V4.582zm-5.207 18.69l-2.396 1.509-.235-1.508h-1.724V7.233h6.78v16.04h-2.425zM14.46 14.191H9.982c0-.471.033-.954.039-1.458v-5.5h5.106V5.935a1.352 1.352 0 0 0-.404-.957 1.378 1.378 0 0 0-.968-.396H5.783c.028-.088.056-.177.084-.255.274-.82 1.153-3.326 1.153-3.326a4.262 4.262 0 0 0-2.413.698c-.57.4-.912.682-1.371 1.946-.532 1.453-.997 2.856-1.31 3.693C1.444 8.674.28 11.025.28 11.025a5.85 5.85 0 0 0 2.52-.61c1.119-.593 1.679-1.502 2.054-2.883l.09-.3h2.334v5.5c0 .5-.045.982-.073 1.46h-4.12c-.71 0-1.39.278-1.893.775a2.638 2.638 0 0 0-.783 1.874h6.527a17.717 17.717 0 0 1-.778 3.649 16.796 16.796 0 0 1-3.012 5.273A33.104 33.104 0 0 1 0 28.74s3.13 1.175 5.425-.954c1.388-1.292 2.631-3.814 3.23-5.727a28.09 28.09 0 0 0 1.12-5.229h5.967v-1.37a1.254 1.254 0 0 0-.373-.899 1.279 1.279 0 0 0-.909-.37z"></path><path d="M11.27 19.675l-2.312 1.491 5.038 7.458a6.905 6.905 0 0 0 .672-2.218 3.15 3.15 0 0 0-.28-2.168l-3.118-4.563zM51.449 15.195V5.842c4.181-.205 7.988-.405 9.438-.483l.851-.05c.387-.399.885-2.395.689-3.021-.073-.25-.213-.666-.638-.555a33.279 33.279 0 0 1-4.277.727c-2.766.321-3.97.404-7.804.682-6.718.487-12.709.72-12.709.72a2.518 2.518 0 0 0 .788 1.834 2.567 2.567 0 0 0 1.883.706c2.278-.095 5.598-.25 8.996-.41v9.203h-12.78c0 .703.281 1.377.783 1.874a2.69 2.69 0 0 0 1.892.777h10.105v7.075c0 .887-.464 1.192-1.231 1.214h-3.92a4.15 4.15 0 0 0 .837 1.544 4.2 4.2 0 0 0 1.403 1.067 6.215 6.215 0 0 0 2.71.277c1.36-.066 2.967-.826 2.967-3.57v-7.607h11.28c.342 0 .67-.135.91-.374.242-.239.378-.563.378-.902v-1.375H51.449z"></path><path d="M42.614 8.873a2.304 2.304 0 0 0-1.508-.926 2.334 2.334 0 0 0-1.727.405l-.376.272 4.255 5.85 2.24-1.62-2.884-3.98zM57.35 8.68l-3.125 4.097 2.24 1.663 4.517-5.927-.375-.277a2.32 2.32 0 0 0-1.722-.452 2.327 2.327 0 0 0-1.536.896z"></path>
</svg>
 
</body>
</html>

其中预览box尺寸为 0 0 64 30

颜色为：#0066ff

pach d=为logo描绘路径