大多数人的编程之旅都是从搜索引擎开始的。

例如搜索“XXX 语言教程”。

但要怎么决定从哪门语言开始呢？

“硅谷的人总是开 Java 的玩笑，我想应该先学 Java。”

或者：

"Haskell！现在 Haskell 这么火！"

又或者：

"一定要学 Go！你看它的吉祥物多么可爱！"

或者当我们不知所措的时候，只能搜：

"入门学什么编程语言比较好？"

人们顾虑的问题通常就那么几个，下面这张信息图很好地回答了这些疑惑：

选择第一门编程语言的过程十分有趣，这就好像是个人的信仰选择问题一样。

也许因为你像个孩子一样喜欢玩橡皮泥，稀里糊涂都打算开始学 Ruby。我还是要提醒你，不要草率做决定。

想要真正掌握你的第一门编程语言，你需要投入成千上百小时来学习实践。

所以你要考虑清楚以下这几个方面：

• 这门语言的岗位需求大不大
• 这门语言有没有发展前景
• 语言的学习难度
• 在学习过程中你能运用它开发什么样的练手项目（把你的成果分享给周围的朋友才能激励你坚持学习下去）

每年都会有新的编程语言出现，以及随着而来的学术论文亦或者是搞笑段子：

第一门编程语言可选择的范围很广。下面这张图很清晰地显示了过去几年中几门语言学习的 Google 搜索热度变化：

Java 有起有落，而 Python 逐渐成为了最受欢迎的入门语言。除此之外，还有最近几年逐步火起来的 JavaScript。

在我展开讨论之前，先明确几点：

• 我并不会在这里争论哪门语言要比哪门优越
• 我认同一名合格的程序员最终应该掌握不止一门编程语言
• 我想说明的是，对于刚入门的初学者来说，还是应该先专注于一门语言的学习。而这门语言，我想你可能早就在标题中发现了——就是 JavaScript

我们先来聊聊现在学校里的编程教学是什么情况。

计算机基础教学

一般在大学教授编程课程的都是计算机系，而计算机专业一般数学和电子方面的内容又比较多。当然你可能早就听说过：

计算机科学的教育无法使任何人成为专业的程序员，就好像学习怎么使用刷子和颜料无法让任何人成为画家一样—— Eric S. Raymond（《大教堂与集市》作者）

即使在 2020 年的今天，许多大学还像教计算机科学一样教编程，像教数学一样教计算机科学。

所以许多课程中编排的入门语言是 C 这样底层抽象的语言，或者是专门针对数学的 MATLAB.

一些专业权威的机构也推出了他们的编程语言年度排行榜，例如 TIOBE Index，又或者是下面这个来自 IEEE的榜单：

大多数这类榜单 10 年来都没有什么变化。

但事实上不是这样的，包括在学术界。

早在 2014 年，Python 就超过了 Java，成为了最受美国各大 CS（Computer Science）机构欢迎的教学语言。

而在实际上的生产工作中，也发生了和权威机构发布的完全不一样的变化（数据来自 87,354 名开发者参与的 Stack Overflow 2019 年度调查）：

多一半的开发者都在使用 JavaScript。它最早只在前端开发应用，现在也逐步在后端流行开来。甚至开始延伸到游戏开发和物联网领域。

工作岗位上对 JavaScript 的需求也仅次于 Java（数据来自 Indeed.com）：

所以我们也围绕 JavaScript 技术栈建立了我们的开源社区。在过去的五年里，有超过 40,000 名学员通过在 freeCodeCamp 学习找到了编程相关的工作。

不过 JavaScript 真的也适合你么？它值得你为之献出第一次么？我们来继续分析：

事实一：岗位需求

如果你只是为了好奇好玩而学编程的话，可以忽略这一点。但如果你和大多数人一样，想通过掌握编程技能找到工作的话，这点对你就非常重要了。

像我之前提到的，JavaScript 是除 Java 之外需求量最大的编程语言。

另外还有一点：JavaScript 已经发展了 20 多年，而直到最近，一些诸如 Netflix, Walmart 和 PayPal 一类的大公司才开始全栈应用 JS 构建他们的应用。

所以就造成了市场上 JavaScript 开发者供不应求的状况（数据来自 Indeed.com）。

从图上来看，每个 Java 岗位大概有 2.7 人在竞争，IOS 和 PHP 也平均都有 2 人以上竞争。

而通过计算，每个 JavaScript 岗位只有 0.7，这就成了属于 JS 开发者的卖家市场。

译者注：为了更具说服力，特此补充国内的编程语言岗位情况（数据来源 2019 年 9 月中国编程语言排行榜）：

事实二：发展前景

在 GitHub 上，平均每个 JavaScript 的项目收到的 pull requests 要比其他语言多两倍以上。其增长速度也远超别的流行语言。

JavaScript 的整个生态体系也因为 Google, Microsoft, Facebook, Netflix 这类大公司的投资而受益匪浅。

例如 TypeScript(一种 JavaScript 的超集，提供更丰富特性，可编译为普通 JS)有着超过 100 名开源贡献者，而这里面大多数都是微软和谷歌的员工。

而且这类集团公司很少有使用 Java 的。因为 Java 的所有者 Oracle 经常会因为各种有关 Java 开发的原因起诉别的公司。

事实三：学习难度

大多数的程序员应该都会认同，高级的脚本语言通常比较好学。JavaScript 当然属于此类，也包括 Ruby 和 Python.

即便很多大学课程教授的都是 Java 或 C++，这类语言也真的很难上手。

事实四：你能实践的练手项目

这是 JavaScript 最大的优势。JS 可以运行在任何有浏览器的设备上。你几乎可以用 JS 开发任何应用，而且很方便就能分享发布到任何地方。

正是由于 JavaScript 无处不在，Stack Overflow 的联合创始人 Jeff Atwood 才说出他的那句经典定律：

任何可以用 JavaScript 写成的应用，最终都会使用 JavaScript 写成。

现实也在不断的佐证，证据在此。

Java 也曾号称是跨平台语言。可也许你了解到，Oracle 官方在今年早些时候终止了Java Applets 的支持。

Python 也经常会遇到类似的问题：

我怎么才能把我写的这个游戏发给我的朋友？或者能够不安装什么应用就在手机上运行么？ — James Hague in Retiring Python as a Teaching Language

相比之下，JS 要方便很多。下面的这些应用都来自我们开源社区的学员，你只需要在浏览器里打开链接就能开始玩啦：

先专注学好一门语言，再去学别的。

如果你总是在各个语言之间摇摆不定，你很难取得什么实质上的进步。

为了避免在入门阶段止步不前，你需要扎实学好你的第一门语言。之后再学习别的语言你就会感觉到异常轻松。

等到那个阶段，你就可以逐步成长为一名掌握许多语言的全面的开发者啦：

• C 对于你理解计算机原理特别有帮助，例如内存管理之类的。在高性能计算中非常有用。
• C++ 在游戏开发中运用广泛
• Python 在科学研究和数据分析中应用广泛
• 如果你想在大型的科技公司中工作，Java 就非常重要。

但还是先学会 JavaScript 再说吧:)

我知道评论里会有很多人要和我吵起来。虽然我知道这不可能，但我还是要试着说服你一下：

Q1：JavaScript 运行速度不是很慢么？

在很多实际运用场景中，JavaScript 和一些高性能语言运行一样快。

Node.js 要比 Python、Ruby、PHP 快上好几个数量级。

甚至已经接近了 C++, Java, Go 的性能。

下面是一个比较全面的编程语言“跑分评测”：

Q2：JavaScript 连静态语言都不是！

和 Python/Ruby 一样，JavaScript 属于动态语言，使用起来也很方便。举个例子，假如我想把变量 exampleArray 设为数组，我会先给它赋值，然后通过 length 函数来获取数组中元素的数量。

exampleArray = [1, 2]
-> [1, 2]
exampleArray.length
-> 2

但假如我不小心赋值给了它一个字符串，代码照样运行不会报错，可并不是我想要的结果：

exampleArray = "text"
-> "text"
exampleArray.length
-> 4

这一类错误在动态类型的语言中经常会遇到。大多数的开发者都会专门写一些检查和测试来避免此类错误的发生。

如果你非要学一门静态语言的话，我依旧推荐你学习 JavaScript，之后再开始学习 TypeScript。

TypeScript 是有学习曲线的，但在掌握了 JavaScript 之后，你的学习会很顺利。— Alex Ewerlöf on TypeScript

Q3：我想要学的是怎么开发移动 App

那你也还应该先学 JavaScript 呀~

1. JavaScript 有一些很棒的工具可以开发原生的移动应用，例如 Angular Cordova和 React Native.
2. 为了让你的移动 App 真的像模像样，它至少得有个后端，你用一些合适的 Web 开发框架可以很轻松地实现，例如 Node.js+Express.js

而且移动开发的春天也正是 JS 的流行带来的。

在 Stack Overflow的调查中，有近一半的开发者的岗位都是 Web 开发，移动开发岗只占了 8%。

“为某事专门下一个 App”的境况也已不再，大多数的智能手机用户开始趋于不下载新的 App 了。

当然——人们还在用着 App。绝大多数都是大厂的微信、支付宝一类（原文：Mostly Facebook, Google Maps, and handful of others）。市场对移动开发的需求也越来越小。

移动开发的前景也难以预期。而且在许多方面，使用 JavaScript 来开发维护和部署移动应用要更加轻松简单。所以像 Facebook 和 Google 这样的公司在研发更好的 JavaScript 工具上投入的越来越多。

在 2016 年，几乎所有的开发都和 Web 开发有关。所有的事情都依附着互联网这个大平台。而且下一波将要崛起的设备——家庭智能、自动驾驶汽车等也都需要依附于网络。

Q4：JavaScript 不是一个只花 10 天写着玩的语言么？

JavaScript 有一段简史。

人们也经常会拿 JavaScript 开各种各样的玩笑。

同样人们也喜欢吐槽 C++，可不管有多少人吐槽，C++ 依然很成功。

译者注：这就和 “PHP 是全世界最好的语言”是一个道理。

所以如果再有人在你面前说 JS 怎么怎么不好的话，请记住 C++ 之父的那句名言：

世界上只有两种编程语言：一种是天天被人喷的，另一种是没人用的。— Bjarne Stroustrup

Atom

Atom 是由 GitHub 推出的开源代码编辑器。过去的一年里我使用的最多的就是它。Atom 拥有插件管理、自动补全、主题等所有必要的功能。

相比 Sublime 的插件管理界面，Atom 简直人性化太多了。你可以使用 APM 或者图形界面来管理你的插件。不需要手动修改设置文件。

在 Atom 刚刚推出的时候它确实很慢，不过现在的版本运行起来已经非常快了。只有在打开一些巨型文件的时候才会出现卡顿。

要是你对 Atom 的性能优化感兴趣的话，可以阅读 Moving Atom To React 和  Implement text editor DOM updates manually instead of via React

DragDis

DragDis 是一个收集设计灵感的工具，可以安装 Chrome 插件，使用起来非常方便。

我自己是根据每周的时间来分类我的素材的，这也能让我很好的记录自己品味的变化。

DragDis 也支持全屏查看，用起来真是赏心悦目。

iTerm2

iTerm 是一个非常简洁的控制台应用。在 iTerm2 中有许多新特性，例如无限制分割界面，直接在控制台中查看图片，搜索等。用起来比原生控制台要方便多了。

Muzli

Muzli 是一个设计类资讯内容聚合的 Chrome 插件。包含了 Designer News, Dribbble, Behance 在内的所有主流设计类网站内容。Muzli 默认会在你打开的新标签页显示。

最棒的一点是 Muzli 还有一个编辑推荐板块，这就感觉有一个私人助理每天专门为你整理前段设计资讯一样。

Noiz.io

很多开发者都喜欢享受咖啡厅惬意的环境。Noiz.io 把这种体验带到了你的家中。它可以播放包括雨声、咖啡厅、雷声、海浪等环境背景音，让你感觉渐入佳境。

Invision

Invision 是一个可协作的原型设计平台，非常适合前端开发者和设计师之间进行协作。设计师可以上传设计稿，并添加链接把它们串联起来。

通过为页面上不同的部分添加链接，设计师可以很好地为用户和开发者解释交互流程。当作用户调研测试工具也非常好用。

Invision 最近也推出了名为 Boards 的素材收集功能，你也可以通过这些素材创建模板，并且能够和团队成员协同使用。

What the Font

文字排版是设计中非常重要的内容。What the Font 是一个非常棒的 Chrome 插件，只需通过点选就可以知道网页上使用的是什么字体。

Postman

作为一名前端开发者，经常需要测试调用 API，例如和后端的接口协同、微信小程序开发等等。Postman 可以让 RESTful API 的测试变得异常轻松。

只需要在图形化的操作界面上输入请求地址和参数，Postman 就能够以多种格式返回请求的结果。

Wappalyzer

Wappalyzer 是一个 Chrome 插件，可以让你查看当前的网站使用了那些库和框架，使用什么服务器，什么语言等等。你还能在其官网查看当前各类框架类库的流行趋势。可以让你发现许多网站的秘密袄~

Boom 2

Boom 2 是 Mac 上的一个均衡器软件。写代码的时候来点音乐助兴再好不过了。使用 Boom 2 你可以自定义音乐的 EQ。

Boom 中也包含了许多预置的声音效果，和 Bose 耳机搭配使用可以让你获得完全不同的听觉体验。

这里还有许多不胜枚举的插件和应用: JSON Viewer for Chrome, Noon Pacific, Flux, Better Snap Tool。

要是上面列出的这些推荐中没有你最喜欢的，欢迎在评论区和大家分享。

作为一名开发者，即使你的精力被微信、微博、知乎（译者注：原文是 Hacker News,Twitter,Reddit,Facebook）分散，你每天在工作中都需要学习。

在上班的时候你经常会遇到新的代码库和技术挑战。回家看看开源项目和别人的作品，也需要你跟进他们的进度。

技术发展变化非常快，你会发现你无时无刻不在追赶着新的工具、语言、框架的潮流。

常言道：学如逆水行舟，不进则退。

在过去的一年里，我从一个连 Chrome 调试台都打不开的小白，变成了一个在一流电子货币加密公司的开发工程师，我非常快地掌握了编程的能力。

但是，学习对我来说并没有那么轻松。

坦白来讲，在学习的过程中充满了煎熬。有太多的未知和不确定。

“这样我怎么坚持的下去呢？”我想。

“要是每天学习写代码这么痛苦，我会疯掉的，看来我对编程并不感兴趣吧？”

“要是我感兴趣的话不应该觉得轻松点么？艺术家搞创作的时候需要绞尽脑汁么？作家也会江郎才尽么？运动员也会遭遇瓶颈么？我们去做自己感兴趣的事情时都会觉得难受么？”

“学习不该使我快乐么？”

学海无涯有捷径么？

有是当然有。学习新的编程知识是很难受的，因为它需要你自律和努力。

但你可以痛并快乐着。

怎么才能获得学习的快乐呢？

很简单： 我改变了我对学习的看法。学习并不是困难的而是有趣的。

请容我在接下来的篇幅里娓娓道来。

万事开头难

学习写代码最难的就是开始。

试想一下你要学习的第一门编程语言。你首先要了解它的语法和格式。你还得理解值、类型、操作符、控制流、函数、高阶函数、作用域、闭包、递归等等……

这就好像是学杂耍——一上来就让你耍 18 颗球一样。

最早我用了好几个礼拜才理解了闭包到底是什么玩意儿。我读文档的时候感觉我理解了，当我准备应用一个闭包时，就又不知所措了。

这是很普遍的，作为一名老师我了解到：想要理解一个新的概念，往往需要你尝试一次、两次甚至更多。

但只要一个人坚持的足够久，总会有豁然开朗的时候。就像当我读完了无数有关闭包的博文、Stack Overflow 和文档之后的体验。

每一段我阅读过的材料都让我有了一些新的理解，直到最后我完全理解了闭包。

理解闭包对我来说意义深远，因为成就感鼓励了我继续前行，后来我甚至自己写了一篇解读闭包的博文。

学习是过程，不是结果

如果我们把“学习”视作我们必须完成的一件事，我们就会急功近利。这样我们才能赶快完成好在课余时间去玩玩别的。

只可惜学海无涯，学无止境。要是你把学习当作一场赛跑，你永远也到不了终点，反而会带来失落和失望。

相反，如果你把学习理解为一种过程，你就能体会和感受到一点一滴的进步，这也将鼓励你继续前行。

学习就好像锻炼一样。太剧烈了会受伤，你的伤痛会一直持续，甚至恢复之后你也忘却不了那种痛苦。以后每次运动的时候你都会记起。除非你每次的痛苦都能得到缓解，你慢慢的习惯和适应了它。最后你获得了强健的体魄和有型的身材，这也将鼓励你继续锻炼下去。

运动是一个积极效应的循环：

这在学习上也同样适用。

学习可以渐入佳境

试想你在构建你的第一款 Web 应用。

最一开始你只能面对一屏幕空旷的代码编辑器。开发工作对你来说像是不可能完成的任务。你什么都不懂，在你真的能开发出来个什么玩意儿之前还有太多东西要学。

令人欣慰的是，你还是勇敢的去尝试了。

从现在开始，你每次只关注和完成一个小点。

首先是构思你的应用。你要做个什么出来？目标用户是谁？有什么困难?

之后，你开始画一些你脑海里构思的草图。并拿给你的朋友或者发到网上给别人看，再慢慢改良它。

再然后，你去搜索那些最适用你开发这个应用的工具、框架、语言。

脚踏实地的，你绞尽脑汁去完成你的目标。

有时候你可能写写代码。

更多的时候是在处理Bug和暂时解决不了的难题。

有时候你实在烦的不行，那就休息一下。

或者别的时候你不想写代码，但是可以去看看相关的文章资料。

最后，经过几周的努力，你终于为你的构想打好了基础。这时，开发你的应用感觉上就不那么痛苦了。你从之前的努力中获得了成就感，接下来你只需要完善功能就好了，就像你之前已经做过无数次那样，这根本就不是事儿。

你把一项令人痛苦和胆怯的工作转换成了循序渐进，享受其中的工作。

这就是成长，这就是进步。不管是编程、跳舞、跑步、阅读：他们都不轻松，而且学习是没有止境。

你要享受你付出其中的过程，享受随之并来的痛苦。你慢慢会理解到那不能称得上是痛苦——而是一种个人努力的成就感和自我满足。

换句话讲，煎熬和享受都是相对的。记住这个循环：

一种学习技术的方法

下面我介绍一种我所掌握的学习方法。可这并不是什么终极秘籍，如果你有不同的意见，可以在评论区提出。

我们拿如何学习 React 来举例。

明确你学习的目的

首先：我要先搜一下有关 React 的文档，了解一下这个框架的背景和它想解决的问题。

明确“为什么”对于你的学习是非常有帮助和意义的，他回答了下面这些问题：

• 它的独特之处在哪里？
• 学这个对我有用么？
• 它主要是为了解决什么问题？
• 它只是昙花一现哗众取宠的小玩具，还是能够从此改变我对编程的理解？

了解核心概念

其次：我会认真读完文档里的介绍和示例。

到目前为止我还没有上手尝试。阅读一项技术的核心概念一定要在动手实践之前。这对你之后的学习至关重要。

这也使我避免了在不知道 React 是个什么玩意儿的情况下就稀里糊涂地用它，搞堆Bug出来。

尝试编码

之后，当我有一种我已经了然于胸的感觉时，就是我上手实践的时候了。

我开始跟着视频教程试着用这种新框架编写一些非常简单的小东西，或者跟着文档里的教程指引写写代码。

遇到坑

我不可避免地会掉到坑里。

读文档当然小菜一碟，可是自己实践的时候就完全不知所措。

这时我开始有半途而废的念头。但遇到困难正是应该迎头而上的时刻。没有付出哪儿有回报。只有懦夫才会放弃！

接下来我开始做这些事：

1. 首先我需要确定一下我到底遇到了什么 Bug，之后假设几种导致它的可能性，即使我还不太了解，猜猜也罢。
2. 接下来离开电脑跟前，稍微放松一下换换心情换换气。可其实心头上总是难以放下那个我没有解决了的问题。
3. 接下来我根据我的假设开始调试——而不是直接去网上搜答案。要知道，全凭自己的思考获得答案是一种非常难能可贵的体验。即使你犯了很多错误，它也能加深你的印象好下次不再犯。
4. 如果我的假设被验证了，那么万事大吉！反之，我就会去搜文档，博客，或者 Stack Overflow 或者任何其他可以辅助我的资料。
5. 当我阅读这些资料的时候，我会把那些可能帮到忙的信息记录下来。
6. 还是没有办法?没关系，即使我搜的这一大堆资料对解决目前的问题没有帮助，我也通过阅读学到了很多，而且它们也有可能解决我之后会遇到的问题。
7. 直到这时，我才会在知乎上提个问题（译者注：原文为 Stack Overflow）或者问问同学同事。
8. 与此同时，我会不断地重复研究这个问题，它总有被解决的时候。

有时候这个过程可能只需要几秒，而有时候需要几个小时甚至更久。无论怎样，在这个过程中你都能学到很多东西。

在编程中解决 Bug 就好像在隧道里寻找射灯一样。你总会找到它，可是沿途你会发现和了解更多有关隧道的信息。在学习上，这些了解正是你的收获。

调试错误其实是一个了解和发现的过程，享受它吧。

温故而知新

在学习的过程中，我开发了一些简单的小东西，跨过了一些坎。就像你所了解的，这过程肯定纠结，我需要用这个新工具进行更多实践。

所以接下来我会在开发一些练手小项目。不是好高骛远地去搞一个大项目，而是做一些可以构建我应用的基础模块。

例如我在网上看到一个用 React 写的有增删改查功能的待办事项应用。那么我可以做一个另外一种形式的增删改查的，确保我能根据参考项目的逻辑写出来的，而不是可能会出错让我受挫的应用。

掌握

熟能生巧，所以我不停地构建小项目，知道我感觉我已经掌握了它的核心概念。

最后，我开始试着不看文档和示例把所有的知识梳理起来。直到这时，我才会开始完全独立地做自己的项目。

在整个学习过程中，我不断地挑战稍微难一些的任务，但也不至于难道打击的我不想干的程度。

最后，我会在这项学习让我厌恶之前，赶快转移注意。

学习使你快乐

通过一些努力和方法，学习编程可以变得非常有趣。最初它看起来很复杂，我想这也是为什么很多人不敢开始的原因——并不是因为它无聊，而是因为它困难。

通过不断地联系这种学习方法，它将会形成一种肌肉记忆。你不用太努力去想它。你只需要驾驭挫折和享受成就。

就好像变魔术一样，学习变得轻松多了。

你是如何学习掌握新知识的？欢迎留言分享！

原文链接：Learning How to Learn: The Most Important Developer Skill，作者：Preethi Kasireddy

这次我们的教程主要会分为以下几步：

1. 注册并设置 Travis CI
2. 在开发服务器（或本地）上生成密匙并与部署服务器互信
3. 安装 Ruby 2.0 以上版本并安装 travis 的命令行工具
4. 编写测试并在项目中配置 travis
5. 编写 travis 自动部署脚本
6. 提交代码检验运行

本教程以最基础的部署 php 站点为例（其实与部署的应用本身关系不大，不管是 NodeJS 还是 Hexo 一类的静态站点生成全部都大同小异，只需要替换自动执行的命令就可以了）

注册并设置 Travis CI

先打开 Travis CI 官网，点击右上角使用Github登录的按钮（这里假设读者已经注册并掌握 GitHub 的基本使用了）

登录成功后，你应该会看到和下图差不多的页面，按照提示进行操作：

你可以打开先看一眼你在 Travis CI 上项目的页面，不过现在肯定是空空如也一片，我们在官网上需要进行的操作暂且到此为止。

在开发服务器（或本地）生成密匙并与部署服务器互信

不管是本地还是开发服务器，这里已经默认了你的开发环境是 Linux/类 Unix 系统，不要问我 Windows 该怎么办，Win10 可以安装 Ubuntu 子系统，当然你要是不觉得蛋疼也可以下载一些类似 ssh key generator 的软件。

这里其实只需要用到两个命令。

首先在本地或开发服务器上生成密匙，在命令行里输入：

ssh-keygen -t rsa

之后只需要按照提示操作，你大概会看到类似下面的内容：

# 来自Digital Ocean
ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/demo/.ssh/id_rsa): 
# 这里的密码一定要留空袄
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/demo/.ssh/id_rsa.
Your public key has been saved in /home/demo/.ssh/id_rsa.pub.
The key fingerprint is:
4a:dd:0a:c6:35:4e:3f:ed:27:38:8c:74:44:4d:93:67 demo@a
The key's randomart image is:
+--[ RSA 2048]----+
|          .oo.   |
|         .  o.E  |
|        + .  o   |
|     . = = .     |
|      = S = .    |
|     o + = +     |
|      . o + o .  |
|           . o   |
|                 |
+-----------------+

接下来你需要将你开发环境生成的密匙拷贝到你的部署服务器上。之所以进行这一步是为了实现免密码登录 ssh，因为 travis-ci 自动执行命令是不支持交互式输入密码的。

同样只需要一个命令：

ssh-copy-id <登录部署服务器用户名>@<部署服务器地址>
# 如果ssh默认端口不是22
ssh-copy-id <登录部署服务器用户名>@<部署服务器地址> -p <部署服务器ssh端口>
# 示例
ssh-copy-id travis@123.123.123.123 -p 12345

接下来也同样按提示操作，第一次输入密码登录完成后，就可以使用密匙测试免密登录啦，当然为了安全起见，记得这里专门为持续部署新建一个权限适宜的用户袄。

安装 Ruby 2.0 以上版本并安装 travis 的命令行工具

简单的 apt-get install ruby 并不能顺利解决问题，travis 命令行工具依赖 ruby2.0 以上的版本。

这个地方其实是一个坑，我想大部分同学和我一样都是使用 Ubuntu 系统，默认使用apt-get install ruby2.0 安装的事实上是 1.9 版本，这特么就很尴尬了。

所以我们不得不下载源码手动编译安装。如果你的开发环境之前安装过ruby记得先删掉：

sudo apt-get -y update
sudo apt-get -y install build-essential zlib1g-dev libssl-dev libreadline6-dev libyaml-dev
cd /tmp
# 由于众所周知的网络原因，此处可能需要使用到http_proxy
wget http://ftp.ruby-lang.org/pub/ruby/2.1/ruby-2.1.5.tar.gz 
tar -xvzf ruby-2.1.5.tar.gz
cd ruby-2.1.5/
./configure --prefix=/usr/local
make
sudo make install

如果嫌麻烦你可以把上述命令保存成一个 .sh 文件一键执行。安装完成后使用 ruby -v 验证一下版本。

之后再运行：

# 由于众所周知的网络原因，此处可能需要使用到http_proxy
gem install travis

如果网络实在太差，可以使用 RubyGems 镜像

gem sources --add https://gems.ruby-china.org/
gem sources --remove https://rubygems.org/
gem sources --remove http://rubygems.org/
gem sources -l

安装完成后，切换到你开发环境的项目目录下，运行：

travis login

根据提示，输入你刚刚用于 travis-ci 网站登录的 GitHub 账户名及密码。

编写测试并在项目中配置 travis

下面我以使用 PHPUnit 对 PHP 进行测试为例对持续部署项目进行配置：

其实你用 mocha 测试 JS 什么的也是一样的。

<?php
//假如你的PHP项目中并没有安装PHPUnit依赖，就像我这么写吧，不要用use关键字引入，否则在travis-ci运行时会报错
class Test extends PHPUnit_Framework_TestCase
{
    public function testAutoPass()
    {
        $this->assertEquals(
            'yubolun',
            'yubolun'
        );
    }
}

之后在你的项目根目录新建一个名为 .travis.yml 的文件：

language: php
php:
- 5.6
before_script: composer require phpunit/phpunit
script: phpunit Test.php

前端项目也很类似：

language: node_js
node_js:
  - '6.9.5'
  - '7.5.0'
before_script: npm install
script: npm run test

以上只是举个例子，更多详细的配置内容请查阅官网文档。

编写 travis 自动部署脚本

做好基本的项目配置之后，我们需要配置持续部署的自动运行脚本。

首先使用 travis encrypt-file 命令对你刚刚在开发环境生成的密匙进行加密（这样一来可以放心地将密匙保存在公开的开源项目当中）。

# 此处的--add参数表示自动添加脚本到.travis.yml文件中
travis encrypt-file ~/.ssh/id_rsa --add

之后再打开 .travis.yml 文件，你会看到一段类似如下内容的命令：

before_install:
  - openssl aes-256-cbc -K $encrypted_830d3b21a25d_key -iv $encrypted_830d3b21a25d_iv
    -in id_rsa.enc -out ~/.ssh/id_rsa -d

默认生成的命令可能会在/前面带转义符\，我们不需要这些转义符，手动删掉所有的转义符，否则可能在后面引发莫名的错误。

之后为了保证命令的顺利运行，我们还需要正确地设置权限和认证：

before_install:
  - openssl aes-256-cbc -K $encrypted_830d3b21a25d_key -iv $encrypted_830d3b21a25d_iv
    -in id_rsa.enc -out ~/.ssh/id_rsa -d
# 添加如下两行内容，Host后面的ip替换成你的部署服务器地址
  - chmod 600 ~/.ssh/id_rsa
  - echo -e "Host 123.123.123.123\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config

P.S. 此处的配置文件只是示例啊，不要直接复制，每次生成的加密都是不一样的。

之后，也是最重要的一步，配置你执行持续部署的命令：

language: php
php:
- 5.6
before_install:
- openssl aes-256-cbc -K $encrypted_830d3b21a25d_key -iv $encrypted_830d3b21a25d_iv
  -in id_rsa.enc -out ~/.ssh/id_rsa -d
- chmod 600 ~/.ssh/id_rsa
- echo -e "Host 123.123.123.123\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
before_script: composer require phpunit/phpunit
script: phpunit Test.php
# 添加一个名为after_success的钩子，并写入你需要执行部署操作的命令
after_success:
- ssh travis@123.123.123.123 -p 12345 'cd /var/www && git pull'

在这里你可以运行任意的脚本，比方说我的项目只需要把代码 pull 下来就算部署完成了，其他的例如静态博客可以 hexo g，或者是 node 应用的 pm2 startup，前端项目也可以先 webpack 一下等等，别跑 rm -rf，其他的随意。

提交代码检验运行

上述的步骤全都部署完成后，只需要使用git将你的所有改动提交到 GitHub 上，travis-ci 就会自动运行啦，最后别忘了登录到你的部署服务器检验一下效果袄~

至此大功告成，接下来你只需要愉快地写代码，提交 Git。剩下的测试、编译、部署工作全部都会自动完成啦。

参考资料

• 利用 travis-ci 持续部署 nodejs 应用
• How to install Ruby 2 on Ubuntu without RVM
• How To Set Up SSH Keys

学好英语

一定要学好英语，虽然英文不好也可以学会前端。但你一定会遇到比英语好的人更多的困难。因为你只能看中文的教程和书籍，学习框架和工具只能依赖中文文档，交流问题只敢去中文社区。而前端 99% 的工具框架都是歪果仁发明的，国人发明的火起来的框架工具 Vue/FIS 等，两只手就能数的过来，并且大部分也是在国际社区里火起来的。还是英文的资源更权威丰富，甚至 Vue 的开发者尤大本人都不愿意浪费他陪老婆孩子的时间来教你学英语：

中文的学习资源虽然也足够丰富，可是质量良莠不齐。初学者根本无法分辨一个教程的好坏，甚至其中有没有错误，假如选错了学习资料，很可能就会被误导。而假如你英文好，就可以直接去看官方的教程文档，这是绝对权威可靠的。

工作中遇到的框架选型没有中文文档怎么办？遇到了某个库本身的 Bug 没有中文资料怎么办？遇到这类情况周围又没人帮你的话你会寸步难行。这时你没有挫败感么？不会觉得自己很 Low 很弱么？

英文不好你写代码的时候甚至需要用拼音给变量命名，看不懂术语和缩写，别人给你解释 Java 和 JavaScript 之间的区别还需要靠周杰和周杰伦。

所以请一定学好英文，否则即使你学会了前端开发，也无法在前端开发工程师的路上走很远，很多问题你无法解决，跟不上最新的流行趋势，遇到困难都需要依靠别人，你看到的教程资源都是那些懂英文的人吃剩下的，那么你自己的技术水平也永远要屈居人下。

话说回来，前端相关的英文也并不难，高频的词汇也不会超过托福雅思。而且对于一般人来讲，你只要能看懂英文文档大意就可以了，另外和歪果仁交流其实也不是什么难事：

学会搜索

你要知道这个世界上有着和你一样千千万万的前端学习者，并且每一个人都是从入门到熟悉到精通一步步走过去的。别的不敢保证，编程学习的资源在网上异常丰富，你遇到的问题 101%（多 1% 不怕你不信）绝对也有人遇到过。所以只要你善用搜索，一定可以靠自己找到问题的答案。

例如知乎上存在着大量重复的问题，而且这些问题每天都不停地在出现。很多人都选择无视搜索这一强大的功能，遇到问题连思考都不思考张嘴就问，殊不知他遇到的问题别人可能几年之前就遇到过，而且已经得到了很好的解答。

你看或不看，答案就在那里。

绝大多数人一提到搜索引擎就只知道百度，你在百度上搜个“前端开发”很有可能就此被带到培训机构的沟里去，学习效果无法保证，被坑钱是肯定的。编程类其实有相当多的优质资源都可以免费获取到，打个比方我每天免费分享给大家的学习教程，翻译的国外文章，完全也可以拿着它们去当每月10k学费的培训班教材。

至于具体怎么用，正好锻炼一下，用你的百度去搜吧。

当然也有可能你虽然烦百度的广告，可是又离不开它，我再附送一个百度去广告大礼包，下面这个回答里有百度去广告版本的 Chrome，也有可以直接安装的插件链接：

百度搜索有那么多缺点，大家为什么还要用呢？ - 余博伦的回答 - 知乎

如何输入搜索关键词？学习知乎体其实有非常大的帮助，例如

• 如何学习前端开发?
• 学习前端开发是一种什么样的体验？
• 前端开发工程师月薪十万难么？（此为恶搞）

搜索诸如此类的问题，你可以找到大量优质的答案。此时此刻我又忍不住要分享一点点干货，除了搜索引擎之外，你还可以在别的优质站点搜索：

• 知乎
• GitHub （不用担心网站是英文的，你完全可以直接搜索中文）
• Segmentfault （中文版 Stack OverFlow）
• 优设

学会提问

学习一门技术的过程中，我们免不了有拜师学艺的想法。知乎优秀回答者啊，前端大神啊，或者是一个学校的师兄师姐，搞开发的同学等等。

作为一名小萌新你就像个好奇宝宝，你满脑子都是各种各样的问题，遇到见过的没见过的都想随口问一句。殊不知可爱的好奇宝宝和烦人的熊孩子之间没有什么不可逾越的鸿沟。

如何提问？如何能够让人愿意解答你的问题？如何不烦人？

这就需要你运用到各种提问的技巧。首先请教问题，心一定要诚，知乎上有一种关闭问题的原因叫做“代为完成的个人任务”。你不能把自己遇到的所有问题都当成是别人的问题提出来，人首先要靠自己，在自己靠不住的情况下再寻求别人的帮助。

在你真正需要提出一个可以提的问题时，也需要真诚。你不能不假思索地随便写一个疑问句。

举个实际的例子，你在项目中遇到了一个实现轮播图组件的需求，你不知道JS该怎么写。你不能像一个乞丐一样提问说：

轮播图组件该如何实现？（求求各位大大行行好帮我写个轮播图的吧）

然后问题描述是空的，就好像拿着一个空碗一样等人施舍。

你应该抱着探讨的态度虚心求教，并且善用一些语言的技巧，最后附上自己对这个问题的初步思考，例如：

轮播图组件的实现有哪些方式？

问题描述：下面是我初步实现的一些代码，可能还有一些bug，我也试着在网上找过相关的组件了，可是搞不清哪种才是最优的方案，还望各位大大能够指点一二。

这样一看你的档次就高了起来，你不是求别人告诉你，而是和别人平等地探讨问题。这样回答你的人也可以拥有一个更平和的心态，让他觉得他的回答不是施舍赐予，而是平等的学术讨论。你也就能获得更具价值的答案。

其实关于如何提问，有一篇2001年的文章已经回答得非常好了。在这里分享给大家，与诸君共勉：

• 提问的智慧

学习方式

很多新手学编程都喜欢看视频，每次看完都似乎仿佛好像可能理解里面讲的是什么了。回头你让他写代码，他一行都写不下去。

学习习惯比较好的可能会选择看书或者读文档。在这里我有必要声明一下，即使纸质文本和视频讲解的是完全相同的内容，学习文字也要比视频的效果好很多。

看书是主动学习，看视频是被动学习。主动翻页和视频进度条自己走（只有人拖条看A片，没有人拖条看教程）是完全不同的两种效果。你可以自主把握获取知识的速度和节奏。

当然我也不是说完全摒弃看视频的学习方式，从视频中你也可以获取到文档书本中获取不到的信息。例如别人是如何写代码以及遇到问题时是如何思考的，另外可能就是治你不愿意主动学习的懒病。

现在还有相当一部分人喜欢通过订阅知识分享平台来学习，例如知乎/掘金/开发者头条/简书等等。不可否认的是你确实可以从中获取相当丰富的知识，可惜大多数人从来都是看题目点收藏，根本不读内容，更别说在读完之后点个赞了。而且事实上你在这些知识分享平台获得的也是碎片化的信息，本质上和你刷微博朋友圈没有任何区别，只是逼格高一点点罢了。

就像你正在读我写的这篇文章一样，你确实能学到点东西，可只适用于茶余饭后的消遣。它不足以支撑你系统掌握一门技术。

所以想要真正扎实掌握前端知识体系，必须去读书，看文档，辅以看视频、刷知乎等等。千万不能本末倒置。

动手实践

其实动手实践也应该包含在学习方法里，它的意义是如此重要，所以我把动手实践专门划分在一个段落里。上述的主要是理论知识的学习，而我们要认清编程本质上是一门技术，一门手艺（我当然承认编程其实是一门艺术）。一定要能够动手做出实际的东西，写下一行行代码才算你真正掌握。

否则你只能拿着书里学到的那些名词术语装装逼而已。在交流群里胡侃半天，结果别人问你造过什么轮子，开发过什么项目你就傻眼了。现在前端岗位招聘动不动要求两年三年经验，你要上哪里找去？

• freeCodeCamp 中文网
• 百度前端技术学院开发任务
• 一个全栈增长工程师的练手项目集

一定要有自己的个人项目，一定要写自己的技术笔记，有条件也可以为开源项目做贡献。

只看书没有任何用，光看视频也然并卵。

一定要不停地实践实践实践！

一个只实践不看书的有可能会成为一位大神（在实践中就能学会很多），但一个只看书不实践的只能成为一个喷子。

一定要记住：

学而不练则忘。

认清就业现状

前几年可能还好，现在所有人都知道前端工资高。互联网泡沫没破的时候，应届毕业生第一次定岗就有能拿 20k 的，这都是真实发生过的事情。可就像你买彩票几乎不中奖一样，你从来不能把未来寄托在幸运之上，你需要有与之相匹配的实力。否则你即使遇到瞎了眼的面试官能拿到 Offter，在正式的工作中你也没能力保住岗位。

现在所有人都意识到了互联网行业赚钱，有点技术梦想的，不甘现实蹉跎的都想要通过学前端找到高薪工作。学法的学医的学会计的送快递的挖矿的，感觉 360 行有 361 行（多一行不怕你不信）都想转前端。

前端的工作机会确实多，需求量也确实大。可也得分清场合地域。

应聘难度从易到难为：

非互联网公司但有 Web 开发需求的<互联网小型创业公司<知名网站、应用<BAT

待遇薪资当然也是一样的序列。所以你需要认清自己的目标，找准自己的位置。最底层的页面仔工资真的还不如一个送外卖的，但与此同时，当然也有能让你实现财务自由的岗位。

坚持不懈&当断则断

学习可以很愉快但从来都不是一件轻松的事情。程序员的进阶之路尤其如此，就像你知道山口山升级的那一声是如此清脆响亮余音绕梁，但那需要你刷多少本，杀多少怪才能听到那么一声一样。

你学习的计划和安排可以很明确，但这并不代表它很简单就能实现。你会遇到无数的挫折，你需要解决无数的 Bug，你更需要无数的练习，才能达到你期望的目标。

你可以找一份码农的工作锻炼自己，但这仅仅是锻炼，你不可能当一辈子码农。

如果你真的喜欢编程，喜欢前端，那么在你写下每一行代码的时候一定能体验到那种快感。而如果每一篇教程都让你难以理解，每一行代码都让你痛苦不堪，千万不要强迫自己。

因为你可能并不适合编程。改变命运的方式不止这一种，高薪的岗位也不止这一家。条条大路通罗马，人要对自己好一点，如果发现自己真的不适合，那就早一点放弃，节省下的时间还可以用来实现你生命中的其他奇迹。

但假如你真的热爱编程，喜欢前端，无论前路多么坎坷，请你一定坚持下去！

Q&A

Q: 看完了前端的编程书籍，看的时候感觉理解了，可是写代码的时候还是没有任何长进怎么办？

其实一些比较经典的推荐书籍安排都很好，每个讲解的知识点都有相应的代码实现。请你不要只是看过去，看书的时候打开你的电脑，把每一个示例都敲一遍。读完一个章节之后也试着用代码写写每一章的知识点，相信你会有一个不一样的体验的。

Q: 学习前端需要了解算法和数据结构么？

算法和数据结构一般都是面试的时候装逼用的，也可以在程序员之间相互吹逼时使用。但无论如何作为一名合格的前端在面试的时候拿 JS 写个快速排序还是应该做到的。在实际工作中一般运用不到什么算法和数据结构的高级知识，等到你真正有机会用到的时候，你自然也成长到那一步了。

Q: 为什么要熟悉原生 JS，我 jQuery 用得很溜不可以么?

不是所有技术栈都包含jQuery，jQuery虽然适用于很多场景，但并不是万能的。你不能把自己的技术实现全部都建立在一个别人开发出来的库上，那样你只是会用一个工具，而不是懂一门编程语言。

太过于依赖 jQuery 别人只敢让你去写业务实现，而技术选型一类更高层次的活你根本都没资格接触。

Q: 非计算机专业想要学习前端开发从哪里开始？报培训班靠谱么？

现在国内哪所大学有专门教前端的专业？前端从业者大部分都不是科班出身好么，计算机专业的都去搞数据分析和机器学习了，怎么稀得做前端开发这么 LOW 的工作（此处为自嘲）。所以有千千万万的前端开发从业者和前端入门学习者和你是一样的，不要以为自己是什么特殊群体，保持一颗平常心。

培训班也相当于是一种被动学习，并不是说报培训班没有一点作用，只是大多数情况下你报班只会得不偿失。自制力好的人不需要报班通过自学也能小有所成，而懒惰的人即使培训班毕业了也找不到工作。

培训即使有效果，高昂的学费也是把你钱的坑了。我免费分享给你这么多教程，你连个赞都不点，我从来和你要过钱么？

Q: 我正在学习前端开发，想要早一点找到相关工作怎么办？

那么你就先去找工作，看工作的职位描述对你的技术有什么需求，根据你目标岗位的技术需求来学习。我们拿拉勾网的前端开发技术要求来举一个具体的例子：

• 熟练掌握 HTML5、CSS3、JavaScript 开发
• 这一条表示你要有扎实的 HTML5/CSS3/JavaScript 基础
• 熟悉 W3C 标准与 ES 规范，熟悉 Web 语义化
• 你需要了解一些 Web 相关标准
• 熟练掌握盒模型、常用布局以及浏览器和移动设备兼容性
• 能够熟练使用 CSS 构建页面，能够处理好各类屏幕大小设备的兼容性
• 熟练使用至少一种 JS 框架，掌握其原理，能独立开发常用组件
• 熟悉 Angular/React 一类的框架，并且用这类框架开发过成型的项目
• 熟练使用各种调试、抓包工具，能独立分析、解决和归纳问题
• 熟练掌握 Chrome 调试工具一类应用软件的使用
• 具有至少一门服务器端编程的实战经验
• 你得会 Python/PHP/Node.js 一类的服务器端语言，并且能够独立搭建起 Web 应用的运行环境
• 具有性能优化经验
• 了解客户端/服务器端缓存，CSS/JS 代码优化一类的性能方面知识
• 熟悉各种常用设计模式和常用 MV*框架
• 了解掌握设计模式和 Angular/React 等框架

然后再根据每一条要求去学习相关的知识，准备相应的实践项目。准备好就去面试吧，如果面不到就再回来继续好好学，千万不要急功近利。