文：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!

于头条的文章不易后续整理阅读，于是小吴昨天上午花了半个小时使用 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 软件写文章

希望这篇文章能帮到想写博客却还没付诸行动的人，毕竟拥有一个免费且酷炫的博客还是挺简单还挺好玩的：）

本文完。