寫(xiě)給設(shè)計(jì)師的個(gè)人網(wǎng)站搭建指南（一）：從域名到網(wǎng)站
時(shí)間：2023-02-24 00:45:01 | 來(lái)源：建站知識(shí)
時(shí)間：2023-02-24 00:45:01 來(lái)源：建站知識(shí)
寫(xiě)給設(shè)計(jì)師的個(gè)人網(wǎng)站搭建指南（一）：從域名到網(wǎng)站：對(duì)于設(shè)計(jì)師來(lái)說(shuō)，擁有一個(gè)像下面一樣的個(gè)人網(wǎng)站是發(fā)揮創(chuàng)意，展示能力極好的機(jī)會(huì)，但面對(duì)陌生的代碼、域名的購(gòu)買(mǎi)、服務(wù)器的配置、DNS 的遷移等等繁瑣的過(guò)程，總是會(huì)讓許多設(shè)計(jì)師望而卻步。
這個(gè)系列文章中我會(huì)給大家普及常見(jiàn)的搭建網(wǎng)站的方式和所需的代碼知識(shí)，用最淺顯易懂的方式教大家選擇適合的方式從頭搭建一個(gè)屬于自己的網(wǎng)站。
本篇文章為第一部分，了解如何將一個(gè)域名變成可以訪問(wèn)的網(wǎng)站的完整流程。
1. 購(gòu)買(mǎi)心儀的域名
作為個(gè)人網(wǎng)站來(lái)說(shuō)，有自己的獨(dú)立域名當(dāng)然是最好的，在配置和管理上我們可以做到完全自己掌控。
所以第一步，就是挑選一個(gè)自己喜歡的域名，我推薦大家在 Godaddy 上購(gòu)買(mǎi)域名，非?？旖莺秃?jiǎn)單：
- 前往 godaddy.com ，注冊(cè)登陸賬號(hào)。
2. 搜索你想要的域名，推薦可以直接使用姓名的拼音、英文名或者隨便你喜歡的域名，買(mǎi)它！（如果不是熱門(mén)或者價(jià)值很高的域名，一年價(jià)格大概在 100 左右，但一般第一年會(huì)打折，所以會(huì)很便宜）
3. 大功告成，現(xiàn)在你已經(jīng)擁有屬于自己的域名了。
此時(shí)我們僅有域名但還沒(méi)有內(nèi)容，就像拿到了門(mén)牌號(hào)但房子還沒(méi)有改起來(lái)，我們?cè)撊绾伟验T(mén)牌號(hào)掛到我們的房子上呢？接下來(lái)我們先從如何蓋房子說(shuō)起。
2. 選擇適合自己的建站方式
我們大體有三種建站選擇
- 一是使用 Wordpress 、Ghost 之類的專門(mén)用來(lái)做博客的服務(wù)，它的好處是對(duì)于設(shè)計(jì)師來(lái)說(shuō)可以基本不用關(guān)注代碼，直接用現(xiàn)成的模版加可視化編輯器就可以搭建出一個(gè)還不錯(cuò)的網(wǎng)站，而且自帶博客系統(tǒng)，當(dāng)然也可以用來(lái)做作品集。但弊端是網(wǎng)站的設(shè)計(jì)我們不能完全把控，很大程度上依賴模版本身的初始設(shè)計(jì)和可擴(kuò)展性，即使可以自定義，過(guò)程也是很痛苦的。
二是 Webflow、Wix 等可視化網(wǎng)站生成器，它們的特點(diǎn)是相對(duì)來(lái)說(shuō)自定義程度更高，理論上可以實(shí)現(xiàn)你想要的大多數(shù)網(wǎng)站設(shè)計(jì)，功能也是非常強(qiáng)大的，還可以做在線商店之類的網(wǎng)站。但是需要一些對(duì)于代碼的理解，比如 CSS 的布局方式、樣式調(diào)整等，另一方面如果用來(lái)做博客的話，并不如上述的專門(mén)做博客的服務(wù)好用，他更適合做一些靜態(tài)的站點(diǎn)，比如作品集之類的。
3. 三是 Jekyll 、Vuepress、Hexo 等靜態(tài)網(wǎng)站生成器，這些框架可以幫助你快速構(gòu)建可部署的靜態(tài)網(wǎng)站，包括你以 Markdown 寫(xiě)的博客文章。但會(huì)需要 HTML、CSS、和一些基礎(chǔ)的對(duì)技術(shù)和代碼的了解，因?yàn)殡m然他們也有主題，但是如果自定義的話，需要直接去改動(dòng)代碼，但這種方式就可以實(shí)現(xiàn)理論上可以實(shí)現(xiàn)的你的所有設(shè)計(jì)構(gòu)想。我的個(gè)人網(wǎng)站：zuozizhen.com 和 figmachina.com 就是分別使用 Jekyll 和 Vuepress 構(gòu)建的，接下來(lái)我們主要分享的如何以此種方式跑通整個(gè)流程
當(dāng)你會(huì)一些簡(jiǎn)單的前端后，可選擇性就大很多了，我推薦大家使用Jekyll 或者 Vuepress，因?yàn)?Hexo 是基于Node.js的，速度快是它的優(yōu)勢(shì)，但作為老牌博客的模版引擎，Jekyll 有很好的生態(tài)環(huán)境，我們遇到的絕大部分問(wèn)題在網(wǎng)上都能找到解決方案，而且使用 Rails 的先天條件使得它更簡(jiǎn)單易學(xué)。Vuepress 是基于 Vue 的，同樣生態(tài)非常好，也相對(duì)容易上手和學(xué)習(xí)。
下面我們以使用 Jekyll 為例，看看是如何一步一步的搭建起我們的個(gè)人網(wǎng)站
3. 代碼托管
在我們安裝和使用 Jekyll 之前，有一個(gè)問(wèn)題要先解決，我們個(gè)人網(wǎng)站的代碼應(yīng)該放到哪里。域名上嗎？不對(duì)，域名只是個(gè)門(mén)牌號(hào)，我們不可能把房子蓋在門(mén)牌號(hào)上，所以我們需要找到一塊用來(lái)蓋房子的地皮，也就是一個(gè)在線上存放代碼的地方。
我推薦使用 Github，現(xiàn)在你可以簡(jiǎn)單的把它當(dāng)作一個(gè)存儲(chǔ)代碼的網(wǎng)盤(pán)，我們需要做的就是把代碼放到上面，然后使用 Git 來(lái)保持代碼的更新。（Git 入門(mén)）
如果使用命令行來(lái)操作 Git 也使很多設(shè)計(jì)師頭疼，所以我們需要一款圖形化界面的Git管理工具，我在這里向大家推薦開(kāi)源的 Sourcetree，會(huì)使我們?cè)趫?zhí)行 Git 相關(guān)的命令時(shí)會(huì)更加便利。
代碼編輯工具不用太多考慮，直接下載 VSCode 即可。
接下來(lái)我們要做的是建立一個(gè)倉(cāng)庫(kù)（repository）：
- 注冊(cè)一個(gè) Github 賬號(hào)，登陸后點(diǎn)擊右上角 + 號(hào)，在菜單中選擇 New repository：
2. 接下來(lái)只需要在 Repository name 中為倉(cāng)庫(kù)起一個(gè)名字，其余可以都保持默認(rèn)，點(diǎn)擊下面綠色的 Create repository 按鈕：
3. 倉(cāng)庫(kù)已經(jīng)創(chuàng)建好了，然后我們需要做一個(gè)叫做 克?。–lone） 的操作，用來(lái)把代碼放到倉(cāng)庫(kù)里，我們打開(kāi) Sourcetree ，在新建中找到 從 URL 克隆。
接下來(lái)我們回到之前創(chuàng)建好的倉(cāng)庫(kù)頁(yè)面，將倉(cāng)庫(kù)的 HTTPS 地址復(fù)制：
4. 回到 Sourcetree ，點(diǎn)擊 從 URL 克隆，在彈窗中將之前復(fù)制的地址粘貼到 源 URL 中，點(diǎn)擊克隆（目標(biāo)路徑為克隆到本地所在的文件夾路徑，可以自行選擇）：
5. 把你的個(gè)人網(wǎng)站代碼放到這個(gè)文件夾中，你會(huì)在文件狀態(tài)下看到很多的更改信息，點(diǎn)擊未暫存文件前面的勾選框，更改會(huì)變?yōu)橐褧捍嫖募?，此時(shí)點(diǎn)擊提交（同時(shí)勾選立即推送變更到 origin/master，如果沒(méi)有勾選的話，需要再點(diǎn)擊上面的推送按鈕，推送提交到倉(cāng)庫(kù)）
6. 成功之后，回到 Github 上查看，你會(huì)發(fā)現(xiàn)倉(cāng)庫(kù)中有了內(nèi)容，這就是我們剛剛提交的個(gè)人網(wǎng)站代碼，以后代碼或文章的更新也是通過(guò)這種方式來(lái)進(jìn)行。由于安裝 Jekyll 和修改網(wǎng)站代碼本身需要一定的代碼知識(shí)，所以跳過(guò)了安裝 Jekyll 本身的過(guò)程，大家可以通過(guò) 官網(wǎng)上的教程 或者在網(wǎng)站自行搜索相關(guān)資料來(lái)完成這步。
或者也可以先只放一個(gè) Index.html 用來(lái)跑通流程：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>我的個(gè)人網(wǎng)站</title> </head> <body> <p>Hello</p> </body></html>4. 挑選部署平臺(tái)
一切準(zhǔn)備好之后，我們需要把網(wǎng)站部署到一個(gè)地方，同時(shí)讓域名可以訪問(wèn)到。
將自己的網(wǎng)站托管在服務(wù)器上固然是一個(gè)選擇，但是操作和管理上的不便對(duì)我們無(wú)疑是又增加了一個(gè)挑戰(zhàn)，這里我們有幾個(gè)解決方式：
- 一是使用 Github 的服務(wù) GitPages，利用 Github 本身自帶的網(wǎng)站部署非常的快捷，但是缺點(diǎn)是只能支持 Jekyll，不支持其它的框架，所以局限性很大。
- 二是選擇一個(gè)自動(dòng)部署平臺(tái)，這里可以有的選擇有 Netlify 和 Vercel，推薦大家使用 Vercel，據(jù)我測(cè)試在國(guó)內(nèi)的訪問(wèn)速度會(huì)更快一點(diǎn)，同時(shí)體驗(yàn)和交互也做的更好。
我們以 Vercel 為例，看看如何將網(wǎng)站運(yùn)行起來(lái)：
- 使用 Github 賬號(hào)登陸 Vercel：
2. 登陸成功后點(diǎn)擊 New Project：
3. 找到你的個(gè)人網(wǎng)站倉(cāng)庫(kù)，點(diǎn)擊 Import：
4. 確認(rèn)信息無(wú)誤后，點(diǎn)擊 Deploy：
5. 成功之后，我們進(jìn)入到項(xiàng)目的主頁(yè)，這時(shí)網(wǎng)站已經(jīng)運(yùn)行起來(lái)了，但是只能通過(guò)它給的域名訪問(wèn)，還沒(méi)有和我們剛所購(gòu)買(mǎi)的域名連接起來(lái)。我們需要進(jìn)入到項(xiàng)目的 Settings - Domains 頁(yè)面，在右側(cè)輸入所購(gòu)買(mǎi)的域名，然后點(diǎn)擊 Add，成功之后點(diǎn)開(kāi)新增域名的 Nameservers，我們需要前面的 Intended Nameservers 信息：
6. 回到 Godaddy，在 我的產(chǎn)品 頁(yè)面，找到域名，點(diǎn)擊管理 DNS：
7. 在此處把兩個(gè)域名服務(wù)器改為上面 Vercel 提供的 Intended Nameservers 中的兩個(gè)新域名服務(wù)器：
8. 可能需要稍微等久一點(diǎn)，當(dāng) Vercel 中域名下出現(xiàn)這兩個(gè)藍(lán)色提示時(shí)，代表網(wǎng)站就可以訪問(wèn)了。
我們現(xiàn)在已經(jīng)把門(mén)牌號(hào)掛在了房子上，網(wǎng)站的整個(gè)搭建部署包括域名的配置就已經(jīng)全部完成，現(xiàn)在在任何地方都可以輸入域名來(lái)訪問(wèn)你的個(gè)人網(wǎng)站了。
這里的流程圖可以幫助大家再次梳理下整個(gè)流程：
今天主要是了解流程，中間跳過(guò)了安裝 Jekyll 和具體構(gòu)建代碼的過(guò)程，因?yàn)檫@需要大家有一定的代碼知識(shí)和對(duì)于技術(shù)的基本了解，當(dāng)然你可以嘗試跟著網(wǎng)上搜索出來(lái)的教程來(lái)一步步的操作，同樣也是很好的學(xué)習(xí)過(guò)程。
下一篇文章《寫(xiě)給設(shè)計(jì)師的個(gè)人網(wǎng)站搭建指南（二） - 代碼該怎么學(xué)》，我會(huì)和大家分享設(shè)計(jì)師學(xué)習(xí)代碼的整體思路：從哪里開(kāi)始，要學(xué)哪些模塊，在什么地方學(xué)習(xí)等，幫大家理清思路，對(duì)未知的事物有更清晰和系統(tǒng)化的了解。
原文鏈接：
在線咨詢
