设计师如何用Notion 打造个人网站 - 知乎专栏

一.前言大家好，我是设计师啵啵，一名UX设计师，近期上线了自己的个人网站1.关于网站网站的内容主要是我的设计笔记中的部分内容，通过设计开源的方式 ... 首发于啵言啵语无障碍写文章登录/注册一.前言大家好，我是设计师啵啵，一名UX设计师，近期上线了自己的个人网站1.关于网站网站的内容主要是我的设计笔记中的部分内容，通过设计开源的方式进行了分享，主要包括以下内容大厂复盘主要包括设计团队的官网以及设计团队复盘文章汇总，把各大互联网好的文章全部聚合了，这样就规避免零散的碎片，可以沉下心来看一看，慢慢对其中的一篇详细解读，做好笔记，纳入自己的知识体系。

效率工具这块就是记录一个生活或者工作过程中好用的软件或者插件，平时经常会去体验新东西，不妨记录一下，可以大大的提高生产中的效率。

设计导航这块就是把平常搜集到的链接类东西整理起来，比如样开源的设计系统，样机网站，软件的之类的，其实就是奇巧淫技的一个汇总吧，下面我就优先汇总了我一些知识库Figma这是我建立的Figma知识库，从0到1去接触figma，无论是工作内分享还是工作外通过B站直播分享，以及建立了交流群，这个知识库一直伴随着我，不断迭代～其它招聘汇总刚开始就是单纯的想把内推信息都汇总起来，但是操作中发现太占用时间和精力了，我想我该用更好的方式去呈现，毕竟自己的精力太有限了；体验周刊我是每周要做一次审美汇总，把每天看到的都会记录下来，一周做一次汇总，平时看的太碎太杂，看过就忘过，总结下来说不定会有更多的价值。

2.网站复盘网站1.0网站1.0的制作相对还是比较麻烦的，制作逻辑是：Notion+GitHub+VercelNotion：网站内容载体，实时编辑更新GitHub：开源网站模版，投影效果和侧边栏导航跳转Vercel：进行部署和绑定域名网站的1.0版本制作相对比较麻烦，需要更改GitHub上的代码信息，还有部署和域名购买等，花了一天时间才弄好，期间反复不断测试，遇到问题不断调整包括请教了美腻的前端小姐姐。

但是最后效果还是不错的，制作完之后自己也是非常开心，但是由于访问量多大的原因，Vercel免费套餐用完了，不得不放弃网站1.0版本。

大感谢网站1.0建立之初，主要是自己发了下朋友圈和自己的社群，10月21日好像自己的网站内容被大量转发，收到了很多积极的反馈，由衷的表示感谢！网站建立的初衷就是设计开源，自己的东西能对别人有正向的影响，毕竟没有设计开源我也不会从非科班成为一名设计师。

与此同时，网站也在影响着几百人，我觉得还是挺有意义的二.文章初衷1.设计开源什么是设计开源互联网圈一直都是技术开源，代码开源这种词汇，但是在设计圈粉很多人免费分享一些知识，这些知识你可以拿去转化成自己的知识，从而不断提升自己，我想这种精神就是设计开源吧！当然这是我自己定义的和理解的。

为什么会设计开源设计开源是一定社会环境和职业基因所呈现的，具有必然性互联网精神有了互联网人们可以打破时间和地点去获取自己的知识，通过分享获取流量，打破了通过学校资源成长的方式，我本身是一个很好的例子，三线普本通过互联网学习可以从事设计行业。

设计圈文化设计圈一直都是交流和分享的文化氛围，设计类相对于其他类的职业交流和抱团对更多一些分享者动力在这个碎片化信息过剩的时代，似乎信息已经占用了我们很多时间，关于怎么筛选信息并且转化成自己的，分享无疑是一个非常好的方式，不仅可以帮助自己更深入的掌握知识，还可以引起其他人的鼓励支持交流。

在互联网存量时代，设计师的能力不单单是表现层，设计师进阶往往是多维度能力的体现，分享也是设计师拓宽职业路径和提升自己竞争力的手段之一。

2.方法完整性首先肯定是在网上获取到方法，但是随着自己摸索实践发现2种问题：第一种问题是：作者只是大概写了方法，并没有深挖一些知识，导致自己想改变的一些东西没有方法，其次是缺乏完整性，存在一个点操作失误就弄不下去了，而且作者也比较难联系，在网站1.0版本上遇到了这个问题。

第二种问题是：网上有了系统的办法，但是相关网站改版了，技术和方法都变了，并没有最新的教程更新出来，这是在网站2.0遇到的问题总之，碎片化网络信息很考验一个人的信息搜索和整合能力，需要一个讲明白的教程3.啵啵有话说一篇很简单的操作教程当然是很高效，就像现在的时代一样，匆匆来匆匆去很高效，但是却忽略了一些温度和感受，就像自己加了几十个设计师，但是毫无交流。

在只有一次的生命的不同的时刻，我们是否需要记忆那些温暖的时刻呢？我的目的就是把这个事系统写一下，表达我做网站的初衷和感受，顺便传达一下自己的一些观念想法，让你我在冰冷的文字面前产生哪怕一丝共鸣也好，其次锻炼自己一下写作能力，其实我大一是写诗和写文章的（也许没人信啊），但是自己渐渐的很少写了，我想多练习一下，输出自己认为对的一些东西。

4.有温度的回答网站1.0上线之后，有不少同仁以及群友会问怎么做的一个一个解答必定很占用自己不多的业务时间，随便甩个链接又显得不是很好，所以还是要写一篇文章来交代这件事。

同时网站1.0刚上线，稳定性还有待商榷，辛亏自己没有马上就写，不然根据网站1.0教程操作的人最后也会面临部署崩溃的尴尬境地。

三.设计师为什么要打造个人网站1.建立知识系统什么是知识系统自己分享过一个复盘模型，获取知识的闭环是：记录-反思-实践记录作为第一环节，肯定是非常重要的，我在记录阶段通常会先用思维导图把事情结构化梳理好，然后在记录到我的notion笔记之中，最后沉淀成为属于我自己的知识系统。

举个例子：如何建立自己的figma知识系统我首先会根据的自己的思路建立一个知识导图，这本身就是一个自己思考和记录的过程其次我会在notion建立关于这块的知识系统，补充不同种类的知识随着时间的推移，你会不断补充这快的知识，这不就成为你自己独一无二的设计知识系统了。

2.打造个人品牌IP更好的自我介绍通常如果加了微信或许刚认识，彼此之间肯定是不熟悉的，如果不相互介绍下彼此可能就直接睡在各自的通讯录好友之中。

而自我介绍就是破冰的第一环节，相比发一段文字或者简单两句，发送你的个人网站无疑是更佳的介绍方式，可以让对方自己去获取关于你的信息，而不是在交流中需要实时去获取，显然是更好的多。

建立个人IP个人网站不受传播的限制，对于打造个人IP是很有帮助的。

其实最主要的是一个信息的聚合，可以聚合个人多个平台也好，聚合设计作品/设计教程/设计思路等等，把一个人的整个信息都进行一个展示，无疑是更好的方式更令人记住。

总之，便于信息的聚合和个人价值的直接展示。

3.助力求职以往的求职作品集载体都是PDF，这种情况下就存在压缩影响画质以及展示信息有限。

PDF作品集体积大基于PDF形式，面试官需要下载查看的场景，如果过大会因为网络或者大小问题造成无法下来以及下载过久的问题。

尤其是QQ邮箱这种不能直接下载，因为过大下载好慢，严重考验面试官心理压力。

那如果是一个简短的网站，那简直不要太爽PDF作品集展示受限PDF作品集只能展示静态的图片以及文字，如果你做了一些视频或者GIF就无法展示了，这也影响了面试官在作品集阶段更多的对你的了解。

有人使用在线文档的方式解决了这个问题，但是面对在线文档分享的辣么长的链接难免会出现打不开的问题，这时候个人网站简短和突出个人性质的域名简直是绝杀！最主要的是，个人网站不仅能放作品，其他的你懂的，是时候展示一个365度的自己了。

四.设计师个人网站的类型1.全流程开发型这个对个人的要求就比较高了，流程相对很复杂，基本步骤如下申请（购买）服务器网站需要有服务器来运行，现在普遍的方式是，选择购买网络服务商的虚拟主机，说白了就是租用别人的一块服务器。

购买域名购买属于自己的域名域名解析通常服务器会同时提供域名解析的服务。

你只需要在它的配置项里面，把你的域名填进去。

设计一个主页如果懂得一些Html和CSS知识，可以自己先简单写一个index.html用作网站首页。

如果完全不会，可以在网上找一些模板来用。

上传网页通过FTP工具将自己的网页文件传到服务器里，别人就可以访问了比如Google的首席动效设计师的个人网站http://schlem.me/2.网站模版型这种类型就是已经给你提供了网站设计样式，可以自己选择和编辑，常用的网站wordpress就很强大了，但会稍微麻烦一点，对这方面有兴趣的小伙伴可以网上搜一些教程。

国内还有其他的第三方建站平台，有兴趣的可以自己多研究3.设计平台型这种就是吧设计平台作为自己的个人网站了，比如Behance以及国内的站酷等等，但是这种网站受限于第三方平台，你上传的内容需要审核而且缺乏一些灵活性4.知识笔记型其实我做的网站类型就属于这个型号了，notion本身还是一个文档笔记软件，基于自己的知识库制作成了个人网站，也有人用语雀和飞书。

五.notion打造个人网站优缺点优点通过notion打造个人网站还是有不少有点的，主要在这几方面1.上手简单无需代码建立个人网站一般都需要懂一些技术，而通过notion打造个人网站不需要掌握这些，可以直接上手搭建，而且非常简单2.搭建成本低因为个人网站是基于notion的，所以原本notion的分享其实就是一个个人网站了，毫无金钱成本，如果想改成自己的域名，就需要自己购买一个域名，一个域名一年几十不等3.实时同步方便修改网站基于notion知识笔记，所以在notion上更改任何信息网站都会实时同步显示的，极大的增加了网站更改的便利性。

4.满足交互跳转因为notion是支持给区块增加链接的功能，通过这个功能可以实现基本的交互跳转了，也正是因为这个跳转的功能，才是用notion打造个人网站的原因缺点虽然用notion打造个人网站优点很多，但是不可否认还是存在一些缺点的情况的1.样式有限个人网站样式受限于notion的样式，只能根据notion存在的模版或者一些功能设计样式，网站风格也只能说简约为主了网站1.0版本我用了GitHub上的代码模版，所以增加了投影和侧面导航这种新的样式，所以说如果懂代码其实可以自己优化样式的网站2.0版本就是基于notion本身出发了，就没有过多的其他样式了2.不支持自定义域名因为notion本身是不支持自定义域名的，导致还是需要购买域名通过第三方进行设置，如果notion支持自定义域名，简直就完美了六.基于notion打造网站实操关于notion页面的设置以及网站的内容我就不写了，相对比较简单，可以自己摸索研究下。

网站2.0方案是使用Cloudflare的WebWorkers为Notion的HTTP请求进行手动改写。

简单来说是替换链接三步法，把默认的notion域名换成自己的域名，如果notion支持改域名就不用这么费劲了。

1.申请域名国内申请个人域名的大平台有腾讯云和阿里云，我本人是用的腾讯云购买的域名，就以腾讯云为例进入腾讯云域名https://buy.cloud.tencent.com/domain?domain=&tlds=&from=dnspodEntrance首先注册登陆，然后优雅的试探你的域名测试你要注册的域名选择你想好的域名填入就可以了，测试一下不同后缀的域名是否被注册我已经注册了shejishibobo.com,所以com的就被注册了在这种情况下，如果你必须要注册这个名字可以选择一个其他的后缀，比如http://shejisibobo.cn；如果你更想要com，就只能换一个名字了所以这面临的就是名字和后缀的选择，当然如果都没被注册，那简直再好不过了购买域名接下来就是按照正常步骤购买域名就好了，域名网站不定时会做一些价格活动针对新用户，可以留意下购买域名域名注册后要赶紧实名认证，否则域名会失效的2.更改域名服务器我们使用Cloudflare作为我们的域名服务器，免费套餐妥妥的够用了https://dash.cloudflare.com/login注册Cloudflare邮箱注册就好，根据步骤激活我们使用Cloudflare作为我们的域名服务器，免费套餐妥妥的够用了添加域名添加你购买的域名就行，我已经添加过了,右上角可以把语言更改为简体中文，选择免费计划后继续会自动添加一些DNS记录，我们不用管，点击继续到了这个页面，我们这一步就完成了3.设置DNS设置Cloudflare的DNS选择添加一条CNAME记录，如果你自己的二级域名为http://www.xxx.com，那么名称那就填www，目标填Notion的域名notion.so，保存即可，代理模式要开开。

更改腾讯云DNS服务器在Cloudflare的DNS页面下，有Cloudflare名称服务器进入腾讯云域名后台，将腾讯云服务器改为Cloudflare的DNS页面下的即可，图示是更改完毕的。

4.设置Workers创建Workers点击创建击Workers，我已经创建过了所以是管理Workers生成notion分享链接因为是网站是基于notion的，所以需要notion分享链接，准备好分享链接生成代码首先进入该网址https://fruitionsite.com/感谢开源朋友做了一个自动生成代码的样式，方便很多填入域名和notion分享地址之后，自动会生成代码，复制一下删除原有代码，粘贴已经复制的脚本，保存并部署5.添加路由点击Workers，选择添加路由完整域名后面加/*，worker选择刚才部署的即可这时候你再去访问自己的域名，看到的就是你Notion的页面了。

6.查看数据Cloudflare自带了一个相对简单的数据功能，基本满足了自己查看数据的需求网站2.0从10.27上线，到今天5天已经有1000多人访问个福利访问者了，这也是继续分享下去的动力吧七.最后以上就是对于近期用notion打造个人网站的一些想法和制作教程了，希望对大家能有一些帮助吧，有兴趣的小伙伴也可以用这个方法为语雀更改域名，应该是可以的。

发布于2021-12-1311:08Notion(软件)个人网站​赞同165​​9条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录啵言啵语设计师啵啵的碎碎念