網頁設計和開發的55個頂尖博客

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

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

1. Web Designer Depot

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

2. InstantShift

InstandShift是一個流行于網頁設計師和開發人員的社區。有很多關于WordPress，網頁設計，CSS，工具，教程，字體，攝影等很多優秀的帖子。

3. CSS-Tricks

這是由Chris Coyier1人創立最初只涵蓋CSS，到現在有11人的團隊，涵蓋網頁設計和開發的各個方面網站。他們的內容包括文章，視頻，代碼片段、教程，新聞，基本資料等。

4. Hongkiat

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

5. Six Revisions

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

6. Smashing Magazine

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

7. Vandelay Design

這個網站的重點是提供創意，為小企業主和企業家配備開發他們的經營理念的工具。他們站點有很多關于網頁設計，寫作，網絡開發等等的文章。他們也有鏈接到免費資源，一個包含高級資源的商店，他們通過提供免費的WordPress主題回饋社區。

8. TheNextWeb (Design & Dev)

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

9. SpeckyBoy

Paul Andrew在2007年10月建立了自己的自由職業者站點。現已發展為為一個網頁設計雜志站點。它擁有大量的教程，資源，節省利用的技術，甚至鼓舞人心的藝術。主題包括網頁設計和開發，平面設計，移動開發，廣告，設計風格和趨勢，技術新聞等。

10. A List Apart

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

11. FastCo Design

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

12. DesignShack

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

13. Spoon Graphics

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

14. CoDrops

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

15. TutorialZine

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

16. HackingUI

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

17. Web Design Weekly

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

18. David Walsh

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

19. Naldz Graphics

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

20. Design Beep

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

21. PixelHint

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

22. PixelBuddha

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

23. GraphicBurger

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

24. Queness

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

25. Inspirationfeed

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

26. DesignWoop

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

27. CSSReflex

這個網站由來自巴林的Naeem Noor創建并維護，專門面向于網絡開發人員、設計師和編程人員。站點提供了很多工具，資源，代碼片段和提示。內容包括博客，CSS生成器，CSS濾鏡效果，CSS演示，響應式計算器和視頻。它討論許多方面如博客，服務器，UI設計，WYSIWYG生成器，圖標，架構，模板，開發人員的瀏覽器擴展，資源鏈接等等。

28. Viget Inspire

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

29. WinningWP

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

30. Designrfix

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

31. Creative Overflow

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

32. One Xtra Pixel

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

33. Noupe

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

34. InstantShift

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

35. WPKUBE

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

36. Fresh Web Dev

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

37. DesignM.ag

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

38. Creative Market Blog

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

39. SitePoint

這個博客由Mark Harbottle和Matt Mickiewicz創立。站點提供新穎的想法，概念和新技術等內容，還包括文章、課程、教程、書籍或任何與設計和構建網站相關的內容。網站用戶討論代碼（HTML，CSS，PHP，JavaScript和Ruby），移動開發，WordPress，設計，UX，商業運營，以及任何與網絡技術相關的內容。

40. Web Design Ledger

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

41. envato tuts+

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

42. HappyCog’s Cognition Blog

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

43. WebAppers

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

44. Web Field Manual

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

45. UXPin Blog

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

46. Good UI

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

47. Spyre Studios

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

48. Skyje

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

49. MonsterPost

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

50. UX Matters

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

51. Usability Geek

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

52. Boxes and Arrows

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

53. Web Design Dev

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

54. Impressive Webs

這是Louis Lazaris的個人博客，作者是一個自由的網絡開發人員，雜志站點SitePoint的HTML/CSS內容的管理編輯，和兩本關于HTML/CSS的書的作者。博客內容大多是關于HTML、CSS和JavaScript的文章。Louis在他的博客討論相關的概念，原則和bug。博客也它包括許多文章、教程，CSS基礎，屏幕錄像，新聞，評論等等。這個博客站點強調的代碼和設計的結合。

55. Design Bombs

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

言盡于此，學習之路不止。 Have a nice day!

紹

介紹

前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法，并且已經把這兩個軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們去制作用戶管理系統的視圖模板了。

用戶管理系統包含幾個主頁模板：

1）用戶信息表

2）用戶登錄頁面

3）用戶注冊頁面

4）個人資料修改

5）登錄密碼重置

6）用戶頭像上傳

7）安全問題設置

8）綁定郵箱設置

9）忘記密碼頁面

頁面比較多，我們一點點地設計。萬事開頭難，福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。

用戶登錄頁面

HTML

登錄頁面的html部分包括一個頁頭和一個表單。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首頁</a></li>
                <li class="nav-item"><a href="" class="nav-link">登錄</a></li>
                <li class="nav-item"><a href="" class="nav-link">注冊</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登錄</h3>
                <p>請輸入正確的用戶名和密碼登錄用戶管理系統</p>
                <form>
                    <div class="form-group">
                        <label>用戶名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登錄狀態
                        </label>
                        <a href="" class="float-right">忘記密碼</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登錄</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

講解

用戶登錄頁面

首先，因為這是TFUMS系統的第一個模板，所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。

其次，表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式，加上label和form-control簡簡單單就把一個漂亮的表單做出來了。

還有福哥使用浮動加清除實現了“保存登錄狀態”和“忘記密碼”的左右布局設計。

最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個容器，看起來比較工整了。

總結

今天我們完成了第一個表單頁面的模板，包括：HTML和CSS部分。有了這個基礎之后，再去制作其他表單頁面就容易多了。

下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。

https://m.tongfu.net/home/35/blog/512901.html

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

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

GitHub創建個人倉庫

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

注冊

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

創建新倉庫

ps: 因為我已經注冊了同名倉庫，因此第二次創建時會報錯。

我的倉庫名為：

倉庫名

Git管理

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

git教程

安裝好 Git 后，只需要進行下面的配置即可。

配置信息

在終端進行操作，設置 user.name 和 user.email 配置信息，我這里設置為全局。

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

生成密鑰

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

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

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

拷貝密鑰

打開 id_rsa.pub 文件，將里面的內容全部復制。

內容全部復制

粘貼到GitHub

GitHub SSh

添加新的 SSH

測試GitHub SSH

添加好 SSH Key后，進行測試。

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，你可以在這里進行對應電腦版本的下載：https://nodejs.org/en/download/

Node.js下載

你也可以通過命令行進行安裝：

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

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

1$ nvm install stable

Hexo安裝

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

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

1$ npm install -g hexo-cli

Hexo使用

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

1$ hexo init myBlog

接下來，進入文件夾 myBlog,輸入

1$ hexo s

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

1localhost:4000

hexo網站

執行到這里事實上博客就已經搭建好了，接下來就是去完善它。

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

添加文章

1.直接導入文章

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

2.寫新文章

你可以執行下列命令來創建一篇新文章。

1$ hexo new [layout] <title>

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

寫新文章

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

新的文章

生成網頁

使用 Hexo 生成靜態文件快速而且簡單。

1$ hexo generate

你也可以簡寫成

1$ hexo g

生成文章

啟動服務預覽文章

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

1$ hexo server

你也可以簡寫成

1$ hexo s

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

1$ hexo server -p 5000

查看文章

網站

小總結

1hexo new "我的博客文章" #新建文章
1hexo generate #生成網頁
1hexo server #啟動服務預覽

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

部署

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

1$ hexo deploy

你也可以簡寫成

1$ hexo d

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

1deploy:
2 type: git

config

在_config.yml中進行修改。

這一步的目的是將 Hexo 與 GitHub 進行關聯。

配置好后通過

1$ hexo d

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

Hexo 主題

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

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

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

Markdown 寫作

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

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

Typora 是一款免費的 MD 編輯器，它是優雅簡潔與強大開放的完美結合體。

官網直達 https://typora.io

Image

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

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

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

總結

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

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

本文完。

在線咨詢

上一篇：javascript 獲取網頁各種寬度
下一篇：輕松獲取 URL 查詢參數？分享 1 段優質 JS 代碼片段！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁設計和開發的55個頂尖博客

紹

用戶登錄頁面

講解

總結

您的項目需求