設(shè)計(jì)師如何用 Notion 打造個(gè)人網(wǎng)站

時(shí)間：2022-08-06 00:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-06 00:36:01 來源：網(wǎng)站運(yùn)營(yíng)

一.前言

大家好，我是設(shè)計(jì)師啵啵，一名UX設(shè)計(jì)師，近期上線了自己的個(gè)人網(wǎng)站

1.關(guān)于網(wǎng)站

網(wǎng)站的內(nèi)容主要是我的設(shè)計(jì)筆記中的部分內(nèi)容，通過設(shè)計(jì)開源的方式進(jìn)行了分享，主要包括以下內(nèi)容

大廠復(fù)盤

主要包括設(shè)計(jì)團(tuán)隊(duì)的官網(wǎng)以及設(shè)計(jì)團(tuán)隊(duì)復(fù)盤文章匯總，把各大互聯(lián)網(wǎng)好的文章全部聚合了，這樣就規(guī)避免零散的碎片，可以沉下心來看一看，慢慢對(duì)其中的一篇詳細(xì)解讀，做好筆記，納入自己的知識(shí)體系。

效率工具

這塊就是記錄一個(gè)生活或者工作過程中好用的軟件或者插件，平時(shí)經(jīng)常會(huì)去體驗(yàn)新東西，不妨記錄一下，可以大大的提高生產(chǎn)中的效率。








設(shè)計(jì)導(dǎo)航


這塊就是把平常搜集到的鏈接類東西整理起來，比如樣開源的設(shè)計(jì)系統(tǒng)，樣機(jī)網(wǎng)站，軟件的之類的，其實(shí)就是奇巧淫技的一個(gè)匯總吧，下面我就優(yōu)先匯總了我一些知識(shí)庫

Figma

這是我建立的Figma知識(shí)庫，從0到1去接觸figma，無論是工作內(nèi)分享還是工作外通過B站直播分享，以及建立了交流群，這個(gè)知識(shí)庫一直伴隨著我，不斷迭代～

其它

招聘匯總剛開始就是單純的想把內(nèi)推信息都匯總起來，但是操作中發(fā)現(xiàn)太占用時(shí)間和精力了，我想我該用更好的方式去呈現(xiàn)，畢竟自己的精力太有限了；體驗(yàn)周刊我是每周要做一次審美匯總，把每天看到的都會(huì)記錄下來，一周做一次匯總，平時(shí)看的太碎太雜，看過就忘過，總結(jié)下來說不定會(huì)有更多的價(jià)值。

2.網(wǎng)站復(fù)盤

網(wǎng)站1.0

網(wǎng)站1.0的制作相對(duì)還是比較麻煩的，制作邏輯是：Notion+GitHub+Vercel


Notion：網(wǎng)站內(nèi)容載體，實(shí)時(shí)編輯更新

GitHub：開源網(wǎng)站模版，投影效果和側(cè)邊欄導(dǎo)航跳轉(zhuǎn)

Vercel：進(jìn)行部署和綁定域名







網(wǎng)站的1.0版本制作相對(duì)比較麻煩，需要更改GitHub上的代碼信息，還有部署和域名購買等，花了一天時(shí)間才弄好，期間反復(fù)不斷測(cè)試，遇到問題不斷調(diào)整包括請(qǐng)教了美膩的前端小姐姐。

但是最后效果還是不錯(cuò)的，制作完之后自己也是非常開心，但是由于訪問量多大的原因，Vercel免費(fèi)套餐用完了，不得不放棄網(wǎng)站1.0版本。

大感謝

網(wǎng)站1.0建立之初，主要是自己發(fā)了下朋友圈和自己的社群，10月21日好像自己的網(wǎng)站內(nèi)容被大量轉(zhuǎn)發(fā)，收到了很多積極的反饋，由衷的表示感謝！







網(wǎng)站建立的初衷就是設(shè)計(jì)開源，自己的東西能對(duì)別人有正向的影響，畢竟沒有設(shè)計(jì)開源我也不會(huì)從非科班成為一名設(shè)計(jì)師。

與此同時(shí)，網(wǎng)站也在影響著幾百人，我覺得還是挺有意義的










二.文章初衷

1.設(shè)計(jì)開源

什么是設(shè)計(jì)開源

互聯(lián)網(wǎng)圈一直都是技術(shù)開源，代碼開源這種詞匯，但是在設(shè)計(jì)圈粉很多人免費(fèi)分享一些知識(shí)，這些知識(shí)你可以拿去轉(zhuǎn)化成自己的知識(shí)，從而不斷提升自己，我想這種精神就是設(shè)計(jì)開源吧！

當(dāng)然這是我自己定義的和理解的。







為什么會(huì)設(shè)計(jì)開源

設(shè)計(jì)開源是一定社會(huì)環(huán)境和職業(yè)基因所呈現(xiàn)的，具有必然性




互聯(lián)網(wǎng)精神

有了互聯(lián)網(wǎng)人們可以打破時(shí)間和地點(diǎn)去獲取自己的知識(shí)，通過分享獲取流量，打破了通過學(xué)校資源成長(zhǎng)的方式，我本身是一個(gè)很好的例子，三線普本通過互聯(lián)網(wǎng)學(xué)習(xí)可以從事設(shè)計(jì)行業(yè)。

設(shè)計(jì)圈文化

設(shè)計(jì)圈一直都是交流和分享的文化氛圍，設(shè)計(jì)類相對(duì)于其他類的職業(yè)交流和抱團(tuán)對(duì)更多一些

分享者動(dòng)力

在這個(gè)碎片化信息過剩的時(shí)代，似乎信息已經(jīng)占用了我們很多時(shí)間，關(guān)于怎么篩選信息并且轉(zhuǎn)化成自己的，分享無疑是一個(gè)非常好的方式，不僅可以幫助自己更深入的掌握知識(shí)，還可以引起其他人的鼓勵(lì)支持交流。

在互聯(lián)網(wǎng)存量時(shí)代，設(shè)計(jì)師的能力不單單是表現(xiàn)層，設(shè)計(jì)師進(jìn)階往往是多維度能力的體現(xiàn)，分享也是設(shè)計(jì)師拓寬職業(yè)路徑和提升自己競(jìng)爭(zhēng)力的手段之一。

2.方法完整性

首先肯定是在網(wǎng)上獲取到方法，但是隨著自己摸索實(shí)踐發(fā)現(xiàn)2種問題：

第一種問題是：

作者只是大概寫了方法，并沒有深挖一些知識(shí)，導(dǎo)致自己想改變的一些東西沒有方法，其次是缺乏完整性，存在一個(gè)點(diǎn)操作失誤就弄不下去了，而且作者也比較難聯(lián)系，在網(wǎng)站1.0版本上遇到了這個(gè)問題。

第二種問題是：

網(wǎng)上有了系統(tǒng)的辦法，但是相關(guān)網(wǎng)站改版了，技術(shù)和方法都變了，并沒有最新的教程更新出來，這是在網(wǎng)站2.0遇到的問題

總之，碎片化網(wǎng)絡(luò)信息很考驗(yàn)一個(gè)人的信息搜索和整合能力，需要一個(gè)講明白的教程




3.啵啵有話說

一篇很簡(jiǎn)單的操作教程當(dāng)然是很高效，就像現(xiàn)在的時(shí)代一樣，匆匆來匆匆去很高效，但是卻忽略了一些溫度和感受，就像自己加了幾十個(gè)設(shè)計(jì)師，但是毫無交流。

在只有一次的生命的不同的時(shí)刻，我們是否需要記憶那些溫暖的時(shí)刻呢？

我的目的就是把這個(gè)事系統(tǒng)寫一下，表達(dá)我做網(wǎng)站的初衷和感受，順便傳達(dá)一下自己的一些觀念想法，讓你我在冰冷的文字面前產(chǎn)生哪怕一絲共鳴也好，其次鍛煉自己一下寫作能力，其實(shí)我大一是寫詩和寫文章的（也許沒人信?。?，但是自己漸漸的很少寫了，我想多練習(xí)一下，輸出自己認(rèn)為對(duì)的一些東西。




4.有溫度的回答

網(wǎng)站1.0上線之后，有不少同仁以及群友會(huì)問怎么做的

一個(gè)一個(gè)解答必定很占用自己不多的業(yè)務(wù)時(shí)間，隨便甩個(gè)鏈接又顯得不是很好，所以還是要寫一篇文章來交代這件事。

同時(shí)網(wǎng)站1.0剛上線，穩(wěn)定性還有待商榷，辛虧自己沒有馬上就寫，不然根據(jù)網(wǎng)站1.0教程操作的人最后也會(huì)面臨部署崩潰的尷尬境地。










三.設(shè)計(jì)師為什么要打造個(gè)人網(wǎng)站

1.建立知識(shí)系統(tǒng)

什么是知識(shí)系統(tǒng)

自己分享過一個(gè)復(fù)盤模型，獲取知識(shí)的閉環(huán)是：記錄-反思-實(shí)踐


記錄作為第一環(huán)節(jié)，肯定是非常重要的，我在記錄階段通常會(huì)先用思維導(dǎo)圖把事情結(jié)構(gòu)化梳理好，然后在記錄到我的notion筆記之中，最后沉淀成為屬于我自己的知識(shí)系統(tǒng)。







舉個(gè)例子：如何建立自己的figma知識(shí)系統(tǒng)

我首先會(huì)根據(jù)的自己的思路建立一個(gè)知識(shí)導(dǎo)圖，這本身就是一個(gè)自己思考和記錄的過程







其次我會(huì)在notion建立關(guān)于這塊的知識(shí)系統(tǒng)，補(bǔ)充不同種類的知識(shí)







隨著時(shí)間的推移，你會(huì)不斷補(bǔ)充這快的知識(shí)，這不就成為你自己獨(dú)一無二的設(shè)計(jì)知識(shí)系統(tǒng)了。

2.打造個(gè)人品牌IP

更好的自我介紹

通常如果加了微信或許剛認(rèn)識(shí)，彼此之間肯定是不熟悉的，如果不相互介紹下彼此可能就直接睡在各自的通訊錄好友之中。


而自我介紹就是破冰的第一環(huán)節(jié)，相比發(fā)一段文字或者簡(jiǎn)單兩句，發(fā)送你的個(gè)人網(wǎng)站無疑是更佳的介紹方式，可以讓對(duì)方自己去獲取關(guān)于你的信息，而不是在交流中需要實(shí)時(shí)去獲取，顯然是更好的多。




建立個(gè)人IP

個(gè)人網(wǎng)站不受傳播的限制，對(duì)于打造個(gè)人IP是很有幫助的。


其實(shí)最主要的是一個(gè)信息的聚合，可以聚合個(gè)人多個(gè)平臺(tái)也好，聚合設(shè)計(jì)作品/設(shè)計(jì)教程/設(shè)計(jì)思路等等，把一個(gè)人的整個(gè)信息都進(jìn)行一個(gè)展示，無疑是更好的方式更令人記住。

總之，便于信息的聚合和個(gè)人價(jià)值的直接展示。

3.助力求職

以往的求職作品集載體都是PDF，這種情況下就存在壓縮影響畫質(zhì)以及展示信息有限。


PDF作品集體積大

基于PDF形式，面試官需要下載查看的場(chǎng)景，如果過大會(huì)因?yàn)榫W(wǎng)絡(luò)或者大小問題造成無法下來以及下載過久的問題。

尤其是QQ郵箱這種不能直接下載，因?yàn)檫^大下載好慢，嚴(yán)重考驗(yàn)面試官心理壓力。




那如果是一個(gè)簡(jiǎn)短的網(wǎng)站，那簡(jiǎn)直不要太爽







PDF作品集展示受限

PDF作品集只能展示靜態(tài)的圖片以及文字，如果你做了一些視頻或者GIF就無法展示了，這也影響了面試官在作品集階段更多的對(duì)你的了解。

有人使用在線文檔的方式解決了這個(gè)問題，但是面對(duì)在線文檔分享的辣么長(zhǎng)的鏈接難免會(huì)出現(xiàn)打不開的問題，這時(shí)候個(gè)人網(wǎng)站簡(jiǎn)短和突出個(gè)人性質(zhì)的域名簡(jiǎn)直是絕殺！







最主要的是，個(gè)人網(wǎng)站不僅能放作品，其他的你懂的，是時(shí)候展示一個(gè)365度的自己了。




四.設(shè)計(jì)師個(gè)人網(wǎng)站的類型

1.全流程開發(fā)型

這個(gè)對(duì)個(gè)人的要求就比較高了，流程相對(duì)很復(fù)雜，基本步驟如下

申請(qǐng)（購買）服務(wù)器

網(wǎng)站需要有服務(wù)器來運(yùn)行，現(xiàn)在普遍的方式是，選擇購買網(wǎng)絡(luò)服務(wù)商的虛擬主機(jī)，說白了就是租用別人的一塊服務(wù)器。

購買域名

購買屬于自己的域名

域名解析

通常服務(wù)器會(huì)同時(shí)提供域名解析的服務(wù)。你只需要在它的配置項(xiàng)里面，把你的域名填進(jìn)去。

設(shè)計(jì)一個(gè)主頁

如果懂得一些Html和CSS知識(shí)，可以自己先簡(jiǎn)單寫一個(gè)index.html用作網(wǎng)站首頁。

如果完全不會(huì)，可以在網(wǎng)上找一些模板來用。

上傳網(wǎng)頁

通過FTP工具將自己的網(wǎng)頁文件傳到服務(wù)器里，別人就可以訪問了

比如Google的首席動(dòng)效設(shè)計(jì)師的個(gè)人網(wǎng)站

http://schlem.me/










2.網(wǎng)站模版型

這種類型就是已經(jīng)給你提供了網(wǎng)站設(shè)計(jì)樣式，可以自己選擇和編輯，常用的網(wǎng)站

wordpress就很強(qiáng)大了，但會(huì)稍微麻煩一點(diǎn)，對(duì)這方面有興趣的小伙伴可以網(wǎng)上搜一些教程。







國(guó)內(nèi)還有其他的第三方建站平臺(tái)，有興趣的可以自己多研究

3.設(shè)計(jì)平臺(tái)型

這種就是吧設(shè)計(jì)平臺(tái)作為自己的個(gè)人網(wǎng)站了，比如Behance以及國(guó)內(nèi)的站酷等等，但是這種網(wǎng)站受限于第三方平臺(tái)，你上傳的內(nèi)容需要審核而且缺乏一些靈活性







4.知識(shí)筆記型


其實(shí)我做的網(wǎng)站類型就屬于這個(gè)型號(hào)了，notion本身還是一個(gè)文檔筆記軟件，基于自己的知識(shí)庫制作成了個(gè)人網(wǎng)站，也有人用語雀和飛書。










五.notion打造個(gè)人網(wǎng)站優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

通過notion打造個(gè)人網(wǎng)站還是有不少有點(diǎn)的，主要在這幾方面

1.上手簡(jiǎn)單 無需代碼

建立個(gè)人網(wǎng)站一般都需要懂一些技術(shù)，而通過notion打造個(gè)人網(wǎng)站不需要掌握這些，可以直接上手搭建，而且非常簡(jiǎn)單

2.搭建成本低

因?yàn)閭€(gè)人網(wǎng)站是基于notion的，所以原本notion的分享其實(shí)就是一個(gè)個(gè)人網(wǎng)站了，毫無金錢成本，如果想改成自己的域名，就需要自己購買一個(gè)域名，一個(gè)域名一年幾十不等







3.實(shí)時(shí)同步 方便修改


網(wǎng)站基于notion知識(shí)筆記，所以在notion上更改任何信息網(wǎng)站都會(huì)實(shí)時(shí)同步顯示的，極大的增加了網(wǎng)站更改的便利性。







4.滿足交互跳轉(zhuǎn)

因?yàn)閚otion是支持給區(qū)塊增加鏈接的功能，通過這個(gè)功能可以實(shí)現(xiàn)基本的交互跳轉(zhuǎn)了，也正是因?yàn)檫@個(gè)跳轉(zhuǎn)的功能，才是用notion打造個(gè)人網(wǎng)站的原因







缺點(diǎn)

雖然用notion打造個(gè)人網(wǎng)站優(yōu)點(diǎn)很多，但是不可否認(rèn)還是存在一些缺點(diǎn)的情況的

1.樣式有限

個(gè)人網(wǎng)站樣式受限于notion的樣式，只能根據(jù)notion存在的模版或者一些功能設(shè)計(jì)樣式，網(wǎng)站風(fēng)格也只能說簡(jiǎn)約為主了

網(wǎng)站1.0版本我用了GitHub上的代碼模版，所以增加了投影和側(cè)面導(dǎo)航 這種新的樣式，所以說如果懂代碼其實(shí)可以自己優(yōu)化樣式的







網(wǎng)站2.0版本就是基于notion本身出發(fā)了，就沒有過多的其他樣式了







2.不支持自定義域名

因?yàn)閚otion本身是不支持自定義域名的，導(dǎo)致還是需要購買域名通過第三方進(jìn)行設(shè)置，如果notion支持自定義域名，簡(jiǎn)直就完美了




六.基于notion打造網(wǎng)站實(shí)操

關(guān)于notion頁面的設(shè)置以及網(wǎng)站的內(nèi)容我就不寫了，相對(duì)比較簡(jiǎn)單，可以自己摸索研究下。


網(wǎng)站2.0方案是使用 Cloudflare 的 Web Workers 為 Notion 的 HTTP 請(qǐng)求進(jìn)行手動(dòng)改寫。

簡(jiǎn)單來說是替換鏈接三步法，把默認(rèn)的notion域名換成自己的域名，如果notion支持改域名就不用這么費(fèi)勁了。







1.申請(qǐng)域名

國(guó)內(nèi)申請(qǐng)個(gè)人域名的大平臺(tái)有騰訊云和阿里云，我本人是用的騰訊云購買的域名，就以騰訊云為例

進(jìn)入騰訊云域名

https://buy.cloud.tencent.com/domain?domain=&tlds=&from=dnspodEntrance

首先注冊(cè)登陸，然后優(yōu)雅的試探你的域名







測(cè)試你要注冊(cè)的域名

選擇你想好的域名填入就可以了，測(cè)試一下不同后綴的域名是否被注冊(cè)







我已經(jīng)注冊(cè)了shejishibobo.com,所以com的就被注冊(cè)了







在這種情況下，如果你必須要注冊(cè)這個(gè)名字可以選擇一個(gè)其他的后綴，比如http://shejisibobo.cn；如果你更想要com，就只能換一個(gè)名字了







所以這面臨的就是名字和后綴的選擇，當(dāng)然如果都沒被注冊(cè)，那簡(jiǎn)直再好不過了




購買域名


接下來就是按照正常步驟購買域名就好了，域名網(wǎng)站不定時(shí)會(huì)做一些價(jià)格活動(dòng)針對(duì)新用戶，可以留意下







購買域名

域名注冊(cè)后要趕緊實(shí)名認(rèn)證，否則域名會(huì)失效的

2.更改域名服務(wù)器

我們使用Cloudflare作為我們的域名服務(wù)器，免費(fèi)套餐妥妥的夠用了

https://dash.cloudflare.com/login

注冊(cè)Cloudflare

郵箱注冊(cè)就好，根據(jù)步驟激活

我們使用Cloudflare作為我們的域名服務(wù)器，免費(fèi)套餐妥妥的夠用了










添加域名

添加你購買的域名就行，我已經(jīng)添加過了,右上角可以把語言更改為簡(jiǎn)體中文，







選擇免費(fèi)計(jì)劃后繼續(xù)







會(huì)自動(dòng)添加一些DNS記錄，我們不用管，點(diǎn)擊繼續(xù)







到了這個(gè)頁面，我們這一步就完成了

3.設(shè)置DNS

設(shè)置Cloudflare的DNS

選擇添加一條 CNAME 記錄，如果你自己的二級(jí)域名為 http://www.xxx.com，那么名稱那就填 www，目標(biāo)填 Notion 的域名notion.so，保存即可，代理模式要開開。

更改騰訊云DNS服務(wù)器

在Cloudflare的DNS頁面下，有Cloudflare 名稱服務(wù)器







進(jìn)入騰訊云域名后臺(tái)，將騰訊云服務(wù)器改為Cloudflare的DNS頁面下的即可，圖示是更改完畢的。

4.設(shè)置Workers

創(chuàng)建Workers

點(diǎn)擊創(chuàng)建擊Workers，我已經(jīng)創(chuàng)建過了所以是管理Workers







生成notion分享鏈接

因?yàn)槭蔷W(wǎng)站是基于notion的，所以需要notion分享鏈接，準(zhǔn)備好分享鏈接

生成代碼

首先進(jìn)入該網(wǎng)址

https://fruitionsite.com/

感謝開源朋友做了一個(gè)自動(dòng)生成代碼的樣式，方便很多

填入域名和notion分享地址之后，自動(dòng)會(huì)生成代碼，復(fù)制一下




刪除原有代碼，粘貼已經(jīng)復(fù)制的腳本，保存并部署







5.添加路由

點(diǎn)擊Workers，選擇添加路由







完整域名后面加/*，worker選擇剛才部署的即可







這時(shí)候你再去訪問自己的域名，看到的就是你 Notion 的頁面了。

6.查看數(shù)據(jù)

Cloudflare自帶了一個(gè)相對(duì)簡(jiǎn)單的數(shù)據(jù)功能，基本滿足了自己查看數(shù)據(jù)的需求

網(wǎng)站2.0從10.27上線，到今天5天已經(jīng)有1000多人訪問個(gè)福利訪問者了，這也是繼續(xù)分享下去的動(dòng)力吧

七.最后

以上就是對(duì)于近期用notion打造個(gè)人網(wǎng)站的一些想法和制作教程了，希望對(duì)大家能有一些幫助吧，有興趣的小伙伴也可以用這個(gè)方法為語雀更改域名，應(yīng)該是可以的。