初級設(shè)計(jì)師如何利用GitHubPages搭建免費(fèi)個(gè)人網(wǎng)站(絕對干貨)

時(shí)間：2023-10-09 02:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-09 02:30:01 來源：網(wǎng)站運(yùn)營

初級設(shè)計(jì)師如何利用GitHubPages搭建免費(fèi)個(gè)人網(wǎng)站(絕對干貨)：文章轉(zhuǎn)載來自我的公眾號文章：初級設(shè)計(jì)師如何利用GitHubPages搭建免費(fèi)個(gè)人網(wǎng)站(絕對干貨)

——

隨著中國乃至全世界數(shù)字化進(jìn)程的加快，除了交互設(shè)計(jì)、UI設(shè)計(jì)的工作崗位變得越來越多，企業(yè)招聘、學(xué)校招收學(xué)生越來越多的注重設(shè)計(jì)師在digital design上各方面的能力。那么這個(gè)能力很重要的一個(gè)展示當(dāng)然來自我們的作品集了。

傳統(tǒng)紙質(zhì)的作品集及PDF已經(jīng)失去了很多互動(dòng)性，digital方面的競爭力。比如我們無法很好展示一個(gè)storytelling的過程，介于篇幅大小的限制，無法展示很多過程中跨篇幅很大的research和journey，更無法展示視頻、動(dòng)效等方面的思考和能力。

這個(gè)時(shí)候，一個(gè)個(gè)人網(wǎng)站對于專業(yè)達(dá)到一定程度的設(shè)計(jì)師來說顯得尤其重要。當(dāng)然現(xiàn)在市面上又很多提供從host到域名到模版選擇的網(wǎng)站，比如wix，squarespace，期的cargo等。但是，這樣一來，我們看到的設(shè)計(jì)師網(wǎng)站全部都千篇一律。并且很多網(wǎng)站也是每年100刀起的host 和維護(hù)費(fèi)用。

那么，在很多recruiter或者招聘設(shè)計(jì)師看完千篇一律的作品集網(wǎng)站以后，一個(gè)個(gè)性化定制的作品集就能讓他們立刻眼前一亮。




在我剛開始搭建自己網(wǎng)站的時(shí)候，因?yàn)槟攴葸€很早，我選用了GoDaddy購買域名和host。第一年是有很大的優(yōu)惠。但是后面逐年價(jià)格上升，每一年要繳將近200刀的服務(wù)器費(fèi)用和域名費(fèi)用。除此之外，上傳網(wǎng)站還需要下載另外的上傳工具，當(dāng)時(shí)用了FillleZilla，又需要重新申請賬號用戶名等。過程非常繁瑣。

而后的網(wǎng)站剛更新也比較old school，每次都需要打開FilleZilla，鏈接IP，搭建鏈接。而不是很visual friendly的界面讓后續(xù)debug比較費(fèi)時(shí)間。

這就開始使我探索Github。

其實(shí)Github對于非軟件開發(fā)出身的設(shè)計(jì)師可能使用量會(huì)比較少。之前在項(xiàng)目中我也只是使用到了其中的Sprint Planning Board與程序員溝通和跟進(jìn)項(xiàng)目進(jìn)度。唯一會(huì)跟Github Repository交互的時(shí)候，就是需要下載Sketch 插件或者follow一些教程搭建服務(wù)器之類的。




不過，很高興我還是邁出了自己創(chuàng)建repository及用GitPages host個(gè)人網(wǎng)站的第一步。因?yàn)椤娴倪h(yuǎn)比我之前想象的要容！易！太！多！了！

廢話少說，那就給小白們演示一下具體怎么操作了。

---

1. 你需要注冊一個(gè)Github賬號


這個(gè)太簡單不過了，在你的瀏覽器里面輸入http://Github.com，然后按照網(wǎng)站提示輸入你的郵箱密碼基本信息，再從郵箱進(jìn)行驗(yàn)證，就OK了。


登陸以后，大概是這樣的頁面。（因?yàn)槟氵€沒有簡歷repository，所以左邊一欄不存在）










2. 下載Github Desktop 版本




這個(gè)時(shí)候，你可以先把http://Github.com晾在一邊。下載一個(gè)Desktop版本。根據(jù)自己的電腦操作系統(tǒng)，不過我猜想大部分設(shè)計(jì)師都是用Mac系統(tǒng)的哈。

打開桌面版本以后，選擇Create a New Repository。這時(shí)候你會(huì)遇到一個(gè)彈窗，這個(gè)彈窗最主要的就是選擇一個(gè)名字和選擇你要在本地那里存放你的網(wǎng)站文件啦。

如果你的網(wǎng)站沒有帶README文件的話，可以在這里選擇Initialize this repository with a README，因?yàn)橐话鉍ithub是推薦有這個(gè)文件的。

下面的可以不用管，然后選擇Create。










3. 將所有網(wǎng)站文件拖入文件夾










這個(gè)時(shí)候，你會(huì)發(fā)現(xiàn)Github Desktop已經(jīng)自動(dòng)識別了你的文件夾以及問你是否想要push origin（意思就是是否要把你本地的上傳跟Github的Host同步）。

這個(gè)時(shí)候你選擇push，剩下的就是等待文件全部被Fetch到Github上。完成以后，再回到你的Github 的profile page，你會(huì)發(fā)現(xiàn)本地的repository被直接同步到了上面并且建立了你的repository。



















4. 建立branch gh-pages




這個(gè)時(shí)候在早期只要打開指定的路徑，一般是http://username.github.io/repostory-name就可以打開網(wǎng)站了。但是Github這兩年出了一個(gè)專門host網(wǎng)站的GitHub Pages (https://pages.github.com/)，因此需要再多一個(gè)步驟。因?yàn)楝F(xiàn)在你的master上面只是一些上傳的文件list。

這個(gè)時(shí)候我們回到Desktop版本，在Current Branch這一欄選擇New Branch，然后branch name一定要叫做gh-pages。
















5. TADA, you are done!




這個(gè)時(shí)候再去到你的GitHub repository的地址（http://username.github.io/repostory-name）就可以見到你的網(wǎng)站啦！利用相同的方法，你有任何本地上傳的文件，都可以馬上commit到gh-pages，同步到你的網(wǎng)站上。

是不是很簡單??！根本就不用去買服務(wù)器，不用下載FilleZilla，更不用拉IP拉設(shè)置。




6. 自定義域名（Domain）




但是這個(gè)時(shí)候我們網(wǎng)址的域名非常非常繁瑣。如果想要一個(gè)自定義的域名怎么辦呢？比如我的網(wǎng)站一直是http://www.lexi-lin.net，我已經(jīng)把它分享給了很多人，也在我的簡歷上，我還想把它與我的Github網(wǎng)站關(guān)聯(lián)。也很容易！

當(dāng)然首先你需要像我一樣有一個(gè)自定義的域名。我的域名是多年前在GoDaddy上買的，域名的價(jià)格自然比Host要便宜很多，貴一點(diǎn)的也就一年10刀左右吧。如果想要免費(fèi)的域名，可以試試https://www.freenom.com這個(gè)網(wǎng)站。但是我建議域名一般以net或者com結(jié)尾，以保證你的可訪問性。其他一些域名可能會(huì)被限制訪問或者安全級別不高。

這個(gè)時(shí)候去到你的domain管理網(wǎng)站。我的例子是GoDaddy，我們需要做幾個(gè)設(shè)置上的調(diào)整，來保證它能關(guān)聯(lián)到我們的GitHub Page。

不管你的列表里有多少亂七八糟的東西，保證你的列表里有一下紅框里的內(nèi)容就好了。沒有的話，就點(diǎn)擊ADD，逐個(gè)逐個(gè)添加。










這個(gè)時(shí)候，我們已經(jīng)完成了不管任何訪問你的域名的行為都會(huì)push到GitHub上。同樣的，我們需要在GitHub方面建立一個(gè)接收方。


回到你的GitHub repository，去到Settings，不用管其他亂七八糟的東西，我們只需要滑動(dòng)到一項(xiàng)叫做GitHub Pages（Obviously...）。在Source項(xiàng)選擇gh-pages，在Custom-domain項(xiàng)輸入你的網(wǎng)址域名，然后勾選Enforce HTTPS。







7. 大功告成！Enjoy！

---

當(dāng)然會(huì)有一些小白可能又很想要便宜有效的自定義網(wǎng)站，又不太想花錢使用那些已經(jīng)被大眾使用過爛的模版，最后可能編程基礎(chǔ)也比較有限。


在這里我推薦可以試試google一些Bootstrap模版（例如https://startbootstrap.com/）。你可以很快上手，而且是responsive，能夠滿足各種screen size，只需要更改里面的content和部分css，就能構(gòu)建一個(gè)免費(fèi)、自定義的網(wǎng)站啦～～然后再一步步提升編程技能，把網(wǎng)站越建越好。

anyway，因?yàn)槭敲赓M(fèi)的，是一個(gè)無限期的試驗(yàn)學(xué)習(xí)平臺了。

---

我是Lexi，一個(gè)在UXUI和產(chǎn)品道路上不停折騰的女漢子，還孜孜不倦地在幫助更多熱愛這個(gè)行業(yè)的小朋友挺進(jìn)此行業(yè)。

歡迎[長按二維碼]關(guān)注我的公眾號或者給我私信留言(微信號: lexilamm)來咨詢更多歐美留學(xué)、實(shí)習(xí)和工作的干貨和服務(wù)。