文：http://zcfy.cc/article/1417.html

在這篇推文中，我收集使到一些使得網(wǎng)頁設(shè)計師和開發(fā)人員更方便網(wǎng)站建設(shè)的站點。這些站點都有精心編寫的，明確的，內(nèi)容充實的的文章，內(nèi)容包含對CMS之如WordPress討論，Photoshop工具，CSS和HTML教程代碼，對用戶體驗的想法（UX）和用戶界面（UI）的提示、技巧、資源和贈品。 在今天的帖子中，我們將一睹55個最好的網(wǎng)頁設(shè)計師和開發(fā)人員博客和網(wǎng)站。請注意站點不以排名先后論英雄。

1. Web Designer Depot

Web Designer Depot是全球設(shè)計師之間的聚集地，在這里有設(shè)計師們分享為來幫助發(fā)展設(shè)計社區(qū)功能而分享的文章和教程。 站點主題包括HTML 5，CSS3，響應(yīng)式設(shè)計，排版，可用性，jQuery，移動應(yīng)用程序，資源，業(yè)務(wù)，自由職業(yè)者，靈感等。

2. InstantShift

InstandShift是一個流行于網(wǎng)頁設(shè)計師和開發(fā)人員的社區(qū)。有很多關(guān)于WordPress，網(wǎng)頁設(shè)計，CSS，工具，教程，字體，攝影等很多優(yōu)秀的帖子。

3. CSS-Tricks

這是由Chris Coyier1人創(chuàng)立最初只涵蓋CSS，到現(xiàn)在有11人的團(tuán)隊，涵蓋網(wǎng)頁設(shè)計和開發(fā)的各個方面網(wǎng)站。 他們的內(nèi)容包括文章，視頻，代碼片段、教程，新聞，基本資料等。

4. Hongkiat

這個網(wǎng)站自2007建立年以來，已經(jīng)為設(shè)計師，開發(fā)人員，工程師和博主提供了一系列的文章，教程，推薦的工具，提示和技巧。 他們喜歡寫關(guān)于插件，工具，桌面和移動應(yīng)用程序，小工具，天才般的想法等任何令人感興趣的任何東西。

5. Six Revisions

該網(wǎng)站由Jacob Gube于2008年推出，涵蓋了設(shè)計和構(gòu)建網(wǎng)站及應(yīng)用程序的網(wǎng)站設(shè)計和開發(fā)的整個流程。 他們發(fā)表文章，新聞，教程，指南等等。 該網(wǎng)站主題涵蓋的范圍從Photoshop到自由職業(yè)者和之間的一切。

6. Smashing Magazine

這個網(wǎng)站由Vitaly Friedman和Sven Lennartz創(chuàng)立，為設(shè)計師和開發(fā)人員提供了一系列的文章，教程。站點主題包括設(shè)計，用戶體驗設(shè)計，代碼，WordPress，移動應(yīng)用程序和設(shè)計，圖形等。內(nèi)容涵蓋軟件，概念，新聞等，也包括CSS，Photoshop，電子商務(wù)，插件，網(wǎng)站主題等等。

7. Vandelay Design

這個網(wǎng)站的重點是提供創(chuàng)意，為小企業(yè)主和企業(yè)家配備開發(fā)他們的經(jīng)營理念的工具。 他們站點有很多關(guān)于網(wǎng)頁設(shè)計，寫作，網(wǎng)絡(luò)開發(fā)等等的文章。 他們也有鏈接到免費資源，一個包含高級資源的商店，他們通過提供免費的WordPress主題回饋社區(qū)。

8. TheNextWeb (Design & Dev)

該網(wǎng)站自2006年成立以來一直致力于國際技術(shù)新聞，設(shè)計，商業(yè)，文化等領(lǐng)域的文章發(fā)布。其內(nèi)容包括入門指南，代碼，UX設(shè)計，關(guān)于交易和課程的鏈接和新聞，設(shè)計活動視頻，硬件，軟件，評論，即將到來的活動，平面設(shè)計等。

9. SpeckyBoy

Paul Andrew在2007年10月建立了自己的自由職業(yè)者站點?，F(xiàn)已發(fā)展為為一個網(wǎng)頁設(shè)計雜志站點。 它擁有大量的教程，資源，節(jié)省利用的技術(shù)，甚至鼓舞人心的藝術(shù)。 主題包括網(wǎng)頁設(shè)計和開發(fā)，平面設(shè)計，移動開發(fā)，廣告，設(shè)計風(fēng)格和趨勢，技術(shù)新聞等。

10. A List Apart

這個網(wǎng)站是由Jeffrey Zeldman于1998年建立的。 該站點文章專注于網(wǎng)頁設(shè)計靈域，面向設(shè)計師，開發(fā)人員，建筑師，專家，策略家，項目經(jīng)理和作家開放。 站點主題包括代碼，內(nèi)容，設(shè)計，商業(yè)和工業(yè)，工具，技術(shù)，UX等。

11. FastCo Design

這是一本專注于商業(yè)和設(shè)計之間結(jié)合的技術(shù)雜志站點。它涵蓋了廣泛的主題，包括電子，UX，平面設(shè)計，建筑，時尚，消費產(chǎn)品等等。 在這里的設(shè)計師提供見解，意見，提示，新聞等等更多信息。

12. DesignShack

這個設(shè)計網(wǎng)站發(fā)布了啟發(fā)靈感的網(wǎng)頁設(shè)計文章、布資源和教程。他們專注于設(shè)計和收錄了網(wǎng)上最偉大的項目。 他們定期發(fā)布教讀者創(chuàng)造自己設(shè)計的新技術(shù)的文章，并分享行業(yè)的每日新聞。該站點主題包括網(wǎng)站，排版，商業(yè)品牌，快捷方式等等。

13. Spoon Graphics

這是由Chris Spooner建立的設(shè)計博客。 他分享一些貼士，資源和靈感，以幫助各階段教育水平和技能水平的設(shè)計師。內(nèi)容包括教程，文章，視頻，新聞和免費資源的鏈接。主題專注于平面設(shè)計，圖形軟件，排版，模板，標(biāo)志等。還有一個只供會員的下載的區(qū)域。

14. CoDrops

這個設(shè)計博客是由是由網(wǎng)頁設(shè)計師兼開發(fā)人員Manoela Ilic和Pedro Botelho共同搭建完成的。 它開建立之初是想作為實驗博客，后面成為一個熱衷于分享對網(wǎng)頁設(shè)計和網(wǎng)站開發(fā)的社區(qū)。團(tuán)隊成員及其他貢獻(xiàn)者一起發(fā)布有關(guān)最新網(wǎng)絡(luò)趨勢，技術(shù)等的文章和教程。站點主題包括教程，贈品，CSS參考目錄，在線實驗區(qū)域，討論網(wǎng)頁設(shè)計概念的藍(lán)圖，以及包含來自社區(qū)的設(shè)計和新聞資源的集合。他們還主持有獎問答節(jié)目。

15. TutorialZine

本網(wǎng)站是由來自保加利亞瓦爾納的網(wǎng)站開發(fā)人員和設(shè)計師團(tuán)隊建立的。該站點文章包括小貼士，教程，贈品，編輯，UI，UX，新聞和在線實驗。文章內(nèi)容涵蓋很多代碼開發(fā)，包括HTML5，CSS3，jQuery，JavaScript和PHP。他們甚至有一個免費的jQuery電子書。

16. HackingUI

這是一個由Sagi Shrieber和David Tintner創(chuàng)立的在線雜志，主要是針對互動設(shè)計和前端開發(fā)。 它涵蓋設(shè)計，代碼，贈品，靈感，生產(chǎn)力，素描等各個領(lǐng)域。他們有許多教程和文章，包括Photoshop，CSS，JavaScript，商業(yè)，個人生活，免費圖標(biāo)鏈接，模板，贈品，有趣的網(wǎng)站，評論等等。

17. Web Design Weekly

這是由由Jake Bresnehan創(chuàng)建和維護(hù)一個周刊雜志和博客網(wǎng)站。雜志包括標(biāo)題，文章，工具，資源，靈感，工作等。雜志和博客都包括關(guān)于編程代碼（CSS，HTML等）等文章教程。大多數(shù)內(nèi)容在收錄在電子雜志中，并通過電子郵件推送給用戶這里非常注重代碼。

18. David Walsh

這是JavaScript和HTML5專家David Walsh的博客。 它包含大量的文章和教程，主要側(cè)重于前端技術(shù)。站點主題包括代碼（CSS，HTML，AJAX，JavaScript等），開發(fā)軟件，資源鏈接，網(wǎng)站主題，設(shè)計概念，演示，移動端，瀏覽器等。

19. Naldz Graphics

這是由Ronald Bien于2008年創(chuàng)建的設(shè)計博客。它展示了設(shè)計社區(qū)里的教程，贈品，靈感，資源等。站點內(nèi)容包括文章，教程，贈品和WordPress主題。 它有很多的鏈接到良好的設(shè)計示例，免費圖標(biāo)，PSD模板，宣傳冊設(shè)計，標(biāo)志設(shè)計等等。

20. Design Beep

這個博客包含了許多關(guān)于設(shè)計和開發(fā)的主題。主要包括文章，教程，工具，資源，贈品和靈感等幾大塊。 涵蓋了圖形，標(biāo)志，排版，網(wǎng)頁設(shè)計，Photoshop，WordPress主題和插件，CSS，Illustrator，jQuery等等。 它有很多貼士，下載鏈接，評論，收藏等。還有一些提示最佳實踐的貼士和廣泛適用的主題。

21. PixelHint

這里是一個專門發(fā)布Web UI設(shè)計教程網(wǎng)頁設(shè)計博客。他們還分享免費的供網(wǎng)頁設(shè)計師和開發(fā)人員下載的網(wǎng)站模板和網(wǎng)絡(luò)資源。 他們討論網(wǎng)頁設(shè)計最新趨勢和技術(shù)方法，以及創(chuàng)建網(wǎng)站UI的最好的方法和技巧。 該博客包含大量的教程和免費資源鏈接，發(fā)展概念和代碼教程。 免費資源包括圖標(biāo)和PSD模板。

22. PixelBuddha

這個網(wǎng)站是尼克弗羅斯特和格雷格拉賓。站點內(nèi)容包含用于Web開發(fā)人員的免費且專業(yè)的資源。 大多數(shù)資源是圖形。 資源包括動畫，照片，字體，效果，HTML，圖標(biāo)，模板等。站點文章還會討論如何獲取資源。部分高級資源還會有一個免費版本。

23. GraphicBurger

這個網(wǎng)站的從Raul Taciu的Cluj-Napoca，羅馬尼亞和專注于高質(zhì)量的設(shè)計資源是免費的。資源包括獨有的PSD文件，還有來自世界各地的免費素材。資源包括模型，UI工具包，圖標(biāo)，文字效果，背景等。文章詳細(xì)討論了產(chǎn)品，并提供了下載鏈接。

24. Queness

這是一個專門用于網(wǎng)頁設(shè)計和開發(fā)的博客，其中包含大量教程和代碼片段。該站點類別包括技術(shù)，教程，網(wǎng)頁設(shè)計，網(wǎng)站開發(fā)，WordPress，JavaScript，移動開發(fā)，排版等等。 文章包括新聞，免費資源，資源鏈接，主題合集等等。

25. Inspirationfeed

該站點由Igor Ovsyannykov管理，提供有關(guān)設(shè)計，商業(yè)，創(chuàng)辦企業(yè)的精神，WordPress，圖形，交易和職場自我成長的信息。文章包括教程，靈感，博客，免費資源，新聞，主題，紋理，壁紙，SEO，社交媒體，標(biāo)志，字體等等。 還有視頻教程和免費資源的鏈接。

26. DesignWoop

這個博客提供了許多文章給設(shè)計師和開發(fā)人員。站點主題包括工具，贈品，設(shè)計理念，靈感，面試，WordPress，主題，插件，方法小貼士，教程等。文章廣泛的包含了教程、集合和鏈接等領(lǐng)域。鏈接包括CSS動畫片段，WordPress主題，圖標(biāo)，排版，優(yōu)秀的網(wǎng)站設(shè)計案例，線框圖工具等等。站點的教程包括Photoshop，CSS，Sketch等等。

27. CSSReflex

這個網(wǎng)站由來自巴林的Naeem Noor創(chuàng)建并維護(hù)，專門面向于網(wǎng)絡(luò)開發(fā)人員、設(shè)計師和編程人員。站點提供了很多工具，資源，代碼片段和提示。內(nèi)容包括博客，CSS生成器，CSS濾鏡效果，CSS演示，響應(yīng)式計算器和視頻。它討論許多方面如博客，服務(wù)器，UI設(shè)計，WYSIWYG生成器，圖標(biāo)，架構(gòu)，模板，開發(fā)人員的瀏覽器擴(kuò)展，資源鏈接等等。

28. Viget Inspire

這個博客來的誕生是來自一個更大的項目，是由布萊恩·威廉姆斯，安迪·蘭金和Wynne“流行”威廉姆斯于1999年成立。博客涵蓋了設(shè)計和各種動效。站點主題包括UX，顏色，可訪問性，新聞，事件，實驗，實驗，品牌管理，APP，游戲，插圖，教程等等。

29. WinningWP

這是一個曾獲獎的博客，由來自倫敦的布林威爾遜建立并運營，專注于WordPress相關(guān)的技術(shù)和資源，給任何對WordPress感興趣的人提供有用的提示。站點的內(nèi)容由來自世界各地的網(wǎng)頁設(shè)計師，程序員和專業(yè)創(chuàng)意者提供。站點主題包括網(wǎng)站主題，插件，代碼托管，SEO，安全性，性能，教程，提示，博客，系統(tǒng)組件，設(shè)計，營銷，社交媒體，新聞，周邊趣事等等。 盡管建立網(wǎng)站的初衷是專注于WordPress但也包含其他CMS。

30. Designrfix

這個網(wǎng)站致力于提供一個平臺給所有志同道合的設(shè)計師一起交流技術(shù)和分享靈感。它包括靈感，教程，贈品，資源，平面設(shè)計，網(wǎng)頁設(shè)計和商業(yè)活動。 主題包括移動平臺，內(nèi)容管理系統(tǒng)，CSS，jQuery，WordPress主題，工具，資源，圖標(biāo)，培訓(xùn)視頻鏈接，插圖，UI，UX，編碼，Photoshop等等。

31. Creative Overflow

這是Jacques van Heerden建立的在線設(shè)計雜志。該網(wǎng)站是通過發(fā)布文章，建議，教程，資源和靈感以達(dá)到激發(fā)藝術(shù)家變得更好的目的。站點內(nèi)容包括許多熱門主題和目錄，如收藏，免費資源，新聞，訪談，WordPress，新聞，贈品等。文章包括有關(guān)品牌，WordPress主題，商業(yè)發(fā)展，電子商務(wù)，徽標(biāo)，營銷的信息，甚至為您提供創(chuàng)意商業(yè)提供建議如何選擇打印機(jī)。

32. One Xtra Pixel

這是一個為新加坡設(shè)計師和網(wǎng)站開發(fā)人員而設(shè)立的在線雜志。站點提供了許多資源，文章，教程和鏈接。主題包括設(shè)計，圖形，WordPress，CSS，社交媒體，開發(fā)，免費資源，工具包，事件等。提供了一步一步的教程包括有關(guān)編寫代碼，在Photoshop中修改圖像。甚至有一個連環(huán)圖專們針對設(shè)計和Web開發(fā)的，偶爾也有其他主題的漫畫。

33. Noupe

這是由來自德國的Commindo Media GmbH＆Co. KG建立的博客。站點的內(nèi)容專門為Web開發(fā)人員和設(shè)計師而編寫的。站點主題包括網(wǎng)頁設(shè)計，排版，圖形，CSS，JavaScript，Ajax，廣告，市場營銷，WordPress，電子商務(wù)，自由職業(yè)者，靈感等等。 文章包括設(shè)計教程，編寫代碼，使用圖形程序，SEO，免費資源，卡通，主題，插件，提示，技巧等等。

34. InstantShift

這是一個為網(wǎng)頁設(shè)計師和開發(fā)人員設(shè)計和提供靈感的博客。它每天都有資源推薦，內(nèi)容包括靈感，文章，教程，贈品，網(wǎng)頁設(shè)計，WordPress，字體，CSS，圖標(biāo)，攝影，Photoshop，JavaScript，Illustrator，平面設(shè)計，信息圖表，案例，logo，新聞和更多。

35. WPKUBE

這個網(wǎng)站是由Devesh Sharma創(chuàng)立的。它主要集中在WordPress，包括學(xué)習(xí)指南、教程方法、插件、新聞、評論、提示和技巧、插件、主題，評論、安全、SEO、初學(xué)者指南和代碼等。 它包括許多資源的鏈接，例如工具，代碼托管和優(yōu)惠券。站點文章是由WordPress專業(yè)人員寫的，內(nèi)容廣泛，面向各個級別的從業(yè)人士。

36. Fresh Web Dev

這個網(wǎng)站涵蓋網(wǎng)頁設(shè)計和開發(fā)，重點是WordPress，Javascript，CSS，PHP，設(shè)計，HTML5和其他各個方面。站點它包括WordPress，Photoshop，編寫代碼，Linux服務(wù)器開發(fā)和配置，字體，圖形等產(chǎn)品的文章和教程。他們還提供交易和免費資源的鏈接。內(nèi)容由專業(yè)的設(shè)計師和開發(fā)人員為其群體所寫。

37. DesignM.ag

這是一個基于社區(qū)的網(wǎng)站，包括博客，設(shè)計圖庫，用戶提交的新聞和招聘專區(qū)。博客包括工具，圖標(biāo)，主題，代碼片段，字體，圖形等資源。教程包括Photoshop，網(wǎng)頁設(shè)計等。站點主題還包括采訪，靈感，WordPress，設(shè)計師案例，免費資源，排版，UI等。該站點涵蓋了所有的網(wǎng)頁設(shè)計的方方面面。

38. Creative Market Blog

這個博客有很多關(guān)于網(wǎng)頁設(shè)計和前端開發(fā)的教程。它包括許多文章和貼士，如字體設(shè)計和優(yōu)化排版，使用Photoshop的小貼士，推薦書籍的列表，解決常見的設(shè)計問題的方法論，使用負(fù)空間，WordPress，PHP，HTML，CSS，靈感等。目標(biāo)受眾是從初級到高級的網(wǎng)站開發(fā)人員和設(shè)計師。

39. SitePoint

這個博客由Mark Harbottle和Matt Mickiewicz創(chuàng)立。站點提供新穎的想法，概念和新技術(shù)等內(nèi)容，還包括文章、課程、教程、書籍或任何與設(shè)計和構(gòu)建網(wǎng)站相關(guān)的內(nèi)容。網(wǎng)站用戶討論代碼（HTML，CSS，PHP，JavaScript和Ruby），移動開發(fā)，WordPress，設(shè)計，UX，商業(yè)運營，以及任何與網(wǎng)絡(luò)技術(shù)相關(guān)的內(nèi)容。

40. Web Design Ledger

這是一個涵蓋網(wǎng)頁設(shè)計和開發(fā)且同時提供了大量的資源的博客。站點主題包括網(wǎng)頁設(shè)計、靈感、UI、圖形、訪談、網(wǎng)絡(luò)開發(fā)、評論和內(nèi)容管理系統(tǒng)。文章包含免費資源鏈接，時事新聞，APP教程，工具，字體，圖標(biāo)，矢量圖形，WordPress，Drupel，Ghost，編碼，電子商務(wù)，移動開發(fā)，可穿戴設(shè)備，排版設(shè)計等信息的鏈接。

41. envato tuts+

這是一個有很多文章的錢打U呢和設(shè)計的教程網(wǎng)站。站點類別包括Photoshop，Illustrator，矢量，插圖，工具和提示，靈感，新聞，設(shè)計，文本效果，CSS，HTML，UX，UI，工作流，設(shè)計理論等等。文章針對的是初級階段，內(nèi)容十分廣泛。還有一些可供訂閱的課程。

42. HappyCog’s Cognition Blog

這個博客來自Happy Cog的創(chuàng)始人Jeffrey Zeldman建立的，主要關(guān)注設(shè)計，經(jīng)驗體會和代碼。站點主題包括流程，設(shè)計，前端開發(fā)，團(tuán)隊，項目管理，社區(qū)，職業(yè)，戰(zhàn)略，公司和客戶關(guān)系。文章包括案例研究，教程，方法提示，商業(yè)運營和客戶關(guān)系處理，排版，編碼，Photoshop等等。大多數(shù)文章是是精心編寫和詳細(xì)的理論研究成果。

43. WebAppers

這是一個專門為Web開發(fā)人員和設(shè)計人員分享開源資源的博客。對于設(shè)計師，站點有免費的圖標(biāo)，字體，表，股票照片，畫筆和設(shè)計靈感。對于開發(fā)人員，有很多JavaScript和Ajax組件，如插件，菜單，工具提示，圖表，輪轉(zhuǎn)圖，日歷，模態(tài)窗等。它還涵蓋代碼托管，電子商務(wù)，社交媒體，工具，安全，統(tǒng)計等等更多。該站點的文章詳細(xì)和前沿。

44. Web Field Manual

此博客提供了一個用于UX和UI設(shè)計的資源列表。該站點是由網(wǎng)頁設(shè)計師策劃和維護(hù)，包含了大量的網(wǎng)頁設(shè)計文章和資源。主題設(shè)計包括人們趨勢，靈感，規(guī)范的和不規(guī)范的風(fēng)格指南，工作進(jìn)程，工作流，工具箱，優(yōu)秀的和拙劣的網(wǎng)格和排版，動畫制作的最佳與最壞方式，設(shè)計準(zhǔn)則的最佳與最壞遵守，和可訪問性的最佳與最壞標(biāo)準(zhǔn)。每個類別都有詳細(xì)的資源列表。站點主題包括編碼入門，最佳實踐，靈感，參考，流行趨勢，性能，CSS/SASS，SVG，JavaScript，工作流，工具箱和各種庫。

45. UXPin Blog

UXPin是供網(wǎng)頁設(shè)計師使用的產(chǎn)品設(shè)計平臺。他們的博客側(cè)重于各方面的各種平臺的用戶體驗。它包含大量關(guān)于用戶體驗設(shè)計，移動端，設(shè)計趨勢，最佳實踐，設(shè)計小貼士，交互設(shè)計，UI設(shè)計，網(wǎng)頁設(shè)計，元素和模式，過程，UXPin，線框，平面設(shè)計，團(tuán)隊協(xié)作，可用性，原型，草圖，樣機(jī)，Photoshop等等。該站點的文章都非常實用和詳細(xì)。

46. Good UI

這是一個致力于制作最好的網(wǎng)站布局，以改善用戶界面的網(wǎng)站和博客。網(wǎng)站介紹最佳實踐，布局，如何合并功能以達(dá)到更簡潔的設(shè)計。大力推薦使用社交途徑，來無論何處可以何處響應(yīng)行動呼吁，來如何使可點擊和可選擇的不同樣式表，來如何推薦一個選擇來幫助用戶決策，也提供了允許用戶取消錯誤行為的決策，來具體證明明最佳的受眾是誰，來顯示更強(qiáng)的對比，使用更少的字段，合理顯示所有選項等等。站點的信息都很簡短，簡單，易于理解。

47. Spyre Studios

這是一個包含很多文章和教程的網(wǎng)頁設(shè)計和開發(fā)電子雜志。站點目錄包括設(shè)計，展示，非同尋常的靈感，教程，CSS，資源，工具，UX，移動端，免費資源，可用性，商業(yè)，排版，Illustrator，Photoshop，極簡主義，工具等。還有很多免費下載的元素，圖標(biāo)，字體，PSD模板等。文章的大小合適閱讀，包含和很多的分步細(xì)節(jié)。

48. Skyje

這個博客成立于2008年，是一個面向網(wǎng)頁設(shè)計師和網(wǎng)頁開發(fā)人員的網(wǎng)站。主題包括社交網(wǎng)絡(luò)，新聞和與Web 2.0相關(guān)的一切。站點主題包括設(shè)計，WordPress，社交媒體，SEO，標(biāo)志，靈感，教程，免費資源，字體，圖標(biāo)，Photoshop，模板等。教程主要覆蓋圖形以及重點關(guān)注Photoshop。還包括插件、代碼（JavaScript和CSS）和Illustrator。

49. MonsterPost

這是世界優(yōu)秀網(wǎng)頁模板站點Template Monster的設(shè)計博客。站點主題包括新聞，文章，工具，贈品，靈感，信息圖表，WordPress和Joomla。 教程包括文章和視頻，并重點關(guān)注WordPress，排版，CSS，HTML，jQuery，Photoshop，Illustrator，網(wǎng)絡(luò)技術(shù)，Web開發(fā)方法論，以及設(shè)計網(wǎng)站和UI元素。

50. UX Matters

這本網(wǎng)絡(luò)雜志由Pabini Gabriel-Petit于2005年創(chuàng)立，為UX開發(fā)人員提供視野和靈感。它提供了許多有價值的建議，最佳實踐，主題觀點，以及探索UX設(shè)計的戰(zhàn)略方面的深層思考的文章。主題包括網(wǎng)頁設(shè)計，移動端，用戶研究，視覺設(shè)計，web應(yīng)用程序設(shè)計，設(shè)計流程，訪談，評論，內(nèi)容創(chuàng)建，通信設(shè)計，架構(gòu)，商業(yè)，戰(zhàn)略等等。

51. Usability Geek

這個博客開始由Justin Mifsud在2011年建立的，出發(fā)點是作為一個提升網(wǎng)站可用性的重要性的興趣交流網(wǎng)站。Justin想提高網(wǎng)頁設(shè)計師和開發(fā)人員在商業(yè)和政治網(wǎng)站可用性設(shè)計的意識。站點主題包括可用性，指南，測試，用戶體驗（UX），商業(yè)運營，轉(zhuǎn)換，人機(jī)交互（HCI），術(shù)語，評論，資源和信息架構(gòu)（IA）。

52. Boxes and Arrows

這是一本2001年開始的同行寫的雜志，討論所有關(guān)于設(shè)計的東西。站點主題包括交互設(shè)計，信息架構(gòu)，平面設(shè)計，甚至商業(yè)服務(wù)設(shè)計。 站點目錄包括設(shè)計原則，發(fā)現(xiàn)，研究和測試，過程和方法，界面，可交付成果和文檔，書評，會議和活動，軟件和工具，以及工作場所和職業(yè)。

53. Web Design Dev

這個網(wǎng)站專注于網(wǎng)頁設(shè)計包含所有東西。站點主題包括贈品，網(wǎng)站模板，WordPress主題，Photoshop，Dreamweaver教程，Illustrator，評論，靈感，網(wǎng)站開發(fā)，CSS，HTML，合集，編程，網(wǎng)上兼職，訪談和SEO。該站點涵蓋了從移動界面設(shè)計到開發(fā)電子商務(wù)網(wǎng)站開發(fā)之間的方方面面。

54. Impressive Webs

這是Louis Lazaris的個人博客，作者是一個自由的網(wǎng)絡(luò)開發(fā)人員，雜志站點SitePoint的HTML/CSS內(nèi)容的管理編輯，和兩本關(guān)于HTML/CSS的書的作者。博客內(nèi)容大多是關(guān)于HTML、CSS和JavaScript的文章。Louis在他的博客討論相關(guān)的概念，原則和bug。博客也它包括許多文章、教程，CSS基礎(chǔ)，屏幕錄像，新聞，評論等等。這個博客站點強(qiáng)調(diào)的代碼和設(shè)計的結(jié)合。

55. Design Bombs

最初作為一個網(wǎng)頁設(shè)計展示畫廊，現(xiàn)已成為分享網(wǎng)頁設(shè)計的想法，文章，教程和資源，以幫助網(wǎng)頁設(shè)計師提升他們技藝的平臺。站點內(nèi)容包括WordPress主題和插件，網(wǎng)站設(shè)計的綜述，贈品，獨家優(yōu)惠等等。網(wǎng)頁設(shè)計師可以這里找到很多高品質(zhì)的資源。

言盡于此，學(xué)習(xí)之路不止。 Have a nice day!

于頭條的文章不易后續(xù)整理閱讀，于是小吳昨天上午花了半個小時使用 GitHub + Hexo 搭建了一下個人博客，打算將頭條的文章搬過去，支持關(guān)鍵字搜索、分類標(biāo)簽功能。效果是下面這樣子的

結(jié)果后臺好多小伙伴挺好奇博客是怎么搭建的，實際上這個挺簡單的，小吳就從零開始分享一波如何搭建一個酷炫免費的個人博客吧，如果已經(jīng)有博客的小伙伴可以留言一波網(wǎng)站地址：）

GitHub創(chuàng)建個人倉庫

登錄到 GitHub ，如果沒有 GitHub 帳號，請使用你的郵箱注冊 GitHub 帳號：https://github.com/join?source=header-home

注冊

登錄成功之后，點擊 GitHub 中的 New repository 創(chuàng)建新倉庫，倉庫名應(yīng)該為：用戶名 .github.io 。這里用戶名使用你的 GitHub 帳號名稱代替，這是固定寫法。

創(chuàng)建新倉庫

ps: 因為我已經(jīng)注冊了同名倉庫，因此第二次創(chuàng)建時會報錯。

我的倉庫名為：

倉庫名

Git管理

Git 是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)（沒有之一）。這是使用 Git 的目的是為了將我們的網(wǎng)站從本地提交上服務(wù)器（GitHub）上面去。我認(rèn)為 Git 操作是程序員應(yīng)該具備的一個基本操作，具體的 Git 操作細(xì)節(jié)可以查看廖雪峰的教程，講的十分詳細(xì) https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

git教程

安裝好 Git 后，只需要進(jìn)行下面的配置即可。

配置信息

在終端進(jìn)行操作，設(shè)置 user.name 和 user.email 配置信息，我這里設(shè)置為全局。

1git config --global user.name "你的GitHub用戶名"
2git config --global user.email "你的GitHub注冊郵箱"

生成密鑰

通過注冊的郵箱生成 ssh 密鑰文件：

1ssh-keygen -t rsa -C "你的GitHub注冊郵箱"

然后直接三個回車即可，默認(rèn)不需要設(shè)置密碼。最后得到了兩個文件：id_rsa和id_rsa.pub。

拷貝密鑰

拷貝密鑰

打開 id_rsa.pub 文件，將里面的內(nèi)容全部復(fù)制。

內(nèi)容全部復(fù)制

粘貼到GitHub

GitHub SSh

添加新的 SSH

測試GitHub SSH

添加好 SSH Key后，進(jìn)行測試。

1ssh -T git@github.com

你將會看到：

1The authenticity of host 'github.com (207.97.227.239)' can't be established.
2RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
3Are you sure you want to continue connecting (yes/no)?

選擇 yes

1Hi MisterBooo! You've successfully authenticated, but GitHub does not provide shell access.

ssh -T

如果看到Hi后面是你的用戶名，就說明成功了。

安裝Node.js

Hexo 基于 Node.js，因此需要先安裝 Node.js，你可以在這里進(jìn)行對應(yīng)電腦版本的下載：https://nodejs.org/en/download/

Node.js下載

你也可以通過命令行進(jìn)行安裝：

cURL:

1$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
2

Wget:

1$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
2

安裝完成后，重啟終端并執(zhí)行下列命令即可安裝 Node.js。

1$ nvm install stable

Hexo安裝

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

所有必備的應(yīng)用程序安裝完成后，即可使用 npm 安裝 Hexo。

1$ npm install -g hexo-cli

Hexo使用

安裝好 Hexo 后，馬上就能使用了。首先初始化博客，輸入：

1$ hexo init myBlog

接下來，進(jìn)入文件夾 myBlog,輸入

1$ hexo s

然后，打開瀏覽器輸入地址：

1localhost:4000

hexo網(wǎng)站

執(zhí)行到這里事實上博客就已經(jīng)搭建好了，接下來就是去完善它。

注意：下面的命令都是在 myBlog文件里進(jìn)行操作的。

添加文章

添加文章

1.直接導(dǎo)入文章

你可以將你平時寫的文章直接導(dǎo)入到 _posts 文件夾里，注意文章類型得是 md格式。

2.寫新文章

你可以執(zhí)行下列命令來創(chuàng)建一篇新文章。

1$ hexo new [layout] <title>

你可以在命令中指定文章的布局（layout），默認(rèn)為 post，可以通過修改 _config.yml 中的 default_layout 參數(shù)來指定默認(rèn)布局。

寫新文章

這樣在 _posts 文件夾里也生成了一篇新的文章。

新的文章

生成網(wǎng)頁

使用 Hexo 生成靜態(tài)文件快速而且簡單。

1$ hexo generate

你也可以簡寫成

1$ hexo g

生成文章

啟動服務(wù)預(yù)覽文章

輸入以下命令以啟動服務(wù)器，你的網(wǎng)站會在 http://localhost:4000 下啟動。在服務(wù)器啟動期間，Hexo 會監(jiān)視文件變動并自動更新，無須重啟服務(wù)器。

1$ hexo server

你也可以簡寫成

1$ hexo s

如果你想要更改端口，或是在執(zhí)行時遇到了 EADDRINUSE 錯誤，可以在執(zhí)行時使用 -p 選項指定其他端口，如下：

1$ hexo server -p 5000

查看文章

網(wǎng)站

小總結(jié)

1hexo new "我的博客文章" #新建文章
1hexo generate #生成網(wǎng)頁
1hexo server #啟動服務(wù)預(yù)覽

這三個命令依次就是新建一篇博客文章、生成網(wǎng)頁、在本地預(yù)覽的操作。

部署

Hexo 提供了快速方便的一鍵部署功能，只需一條命令就能將網(wǎng)站部署到服務(wù)器上。

1$ hexo deploy

你也可以簡寫成

1$ hexo d

在開始之前，必須先在 _config.yml 中修改參數(shù)，一個正確的部署配置中至少要有 type 參數(shù)，例如：

1deploy:
2 type: git

config

在_config.yml中進(jìn)行修改。

這一步的目的是將 Hexo 與 GitHub 進(jìn)行關(guān)聯(lián)。

配置好后通過

1$ hexo d

命令，稍等片刻，網(wǎng)站就已經(jīng)部署好了，可以在瀏覽器輸入你的GitHub名稱.github.io，這樣一個免費的博客就已經(jīng)搭建好了。

Hexo 主題

hexo 默認(rèn)的主題可能顯得有點呆板，你可以在 https://hexo.io/themes/index.html進(jìn)行主題的挑選更換。將下好的主題安放在themes文件夾內(nèi)，同時在_config.yml中進(jìn)行主題修改就好了。

經(jīng)過一個小時的主題篩選，我選擇了hexo-theme-matery 這款主題。通過https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/文檔說明，經(jīng)過簡單的配置，效果就出來了！

一般大佬們提供的主題都會提供文檔說明，按照說明進(jìn)行簡單的設(shè)置就能擁有一個酷炫的頁面了。

Markdown 寫作

Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言，通過簡單的標(biāo)記語法，它可以使普通文本內(nèi)容具有一定的格式。

世面上支持 Markdown 語法的編輯器不勝枚舉，選擇起來十分困難，小吳在這里推薦 Typora 這款 Markdown 寫作軟件。

Typora 是一款免費的 MD 編輯器，它是優(yōu)雅簡潔與強(qiáng)大開放的完美結(jié)合體。

官網(wǎng)直達(dá) https://typora.io

Image

選擇 Typora 一個最主要的原因是它對圖片的良好支持。

在 Mac 上安裝好 iPic 后 ，并在設(shè)置中將圖片插入修改為 通過 iPic 上傳 ，快捷鍵是 control + command + i ，就可以十分快捷優(yōu)雅地完成圖片插入。強(qiáng)調(diào)一點：圖床使用默認(rèn)的微博圖床即可，建議不要折騰。

這樣，每次寫作時，將圖片拖入到 Typora 里，圖片就能自動上傳到圖床上。

總結(jié)

• 申請 GitHub 賬號
• 在 GitHub 上創(chuàng)建倉庫
• 配備 Git ，同時將 SSH Key 提交到 GitHub 上
• 安裝 Node.js
• 安裝 Hexo
• 安裝 Hexo 主題
• 使用 Markdown 軟件寫文章

希望這篇文章能幫到想寫博客卻還沒付諸行動的人，畢竟擁有一個免費且酷炫的博客還是挺簡單還挺好玩的：）

本文完。