MrFangge

Menu

【WebStorm】利用WebStorm来管理你的Github

6599294078679835129

本篇主要介绍的博主最近一直在玩的Github,和WebStorm的一些相关联用法。

什么是Github

Github是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目,以最简单的方式来说,其实就是一个代码库,上面有全世界无数优秀的码农上传自己的作品和大家共享(当然,Github本身有免费账户和收费账户,收费账户才能使用私人管理,也就是你的项目将不会被公开)。

仅仅是个代码库,当然是没有办法火起来的,Github除了可以给用户自己管理项目外,还允许用户跟踪其他用户、组织、软件库的动态,对软件代码的改动和 bug 提出评论,然后作者视情况来合成热心用户的修改到自己的代码中,这其实就是一种很棒的互联网精神,开放的思想让大家可以在Github社区找到自己感兴趣的代码库,并下载下来形成自己的代码分支,和原作者一起互动和交流,提高彼此的代码水平和代码库的质量。

Github地址:https://github.com/

什么是Webstorm

前端神器不解释,基本上集成了前端的所有了,最新版本的还可以支持Grunt(虽然博主还没用过囧rz),软件的地址是:http://www.jetbrains.com/webstorm/,需要软件的破解请评论,我会单发给你们,原因你们懂的。

下面简要介绍一下webstorm,首先看看界面,全英文版,这个对码农们应该没啥压力,是不是有种高大上的感觉,左边是你的项目列表,右侧是你的代码预览

763360136939505864

单单看一下官网的功能介绍截图,你就知道它是多么强大,基本上能满足所有前端的要求,其中要注意的是,因为虽然支持那么多,可是下载下来的Webstorm不是本身就支持那么多种类型的,需要去下载对应的插件,这些可以在Webstorm的官网中了解到,或者直接搜索一下就行

3019382075275440708

因为webstorm实在太多功能和玩法,找时间会汇总一些技巧分享给大家,这里就不做专门分享

个人不大推荐前端初学者使用,就像学Java刚开始不推荐人用Eclipse一样,这种集成软件带来的只是无限的方便,可是对个人的代码认识成长度却没有什么很大作用

在Webstorm中配置Github

Webstorm也可以强大到去管理Github,而且非常方便,不需要总是去输入Git命令行来同步自己的项目到本地,那么Webstorm是如何潇洒地做到的呢?

  1. 首先你得有一个Github的账号,怎么注册我就不说了
  2. 点击Webstorm的设置按钮2109654950546929448
  3. 进入设置面板后,直接在左上角搜索github(这个也算是Webstorm方便功能之一,很快速定位设置项),然后填入你github的账户名和密码,然后按一下Test看看是否连接成功
    6599316068912391812
    如果出现这个提示,就证明连接成功(Github有时候会被墙,所以大家可能需要翻墙,不过一般应该都不用)
    4871487422031475784

  4. 成功连接后,你就已经登录到Github账户了,但这还不够,你还得让Webstorm能够支持到Git操作,那么我们首先先去https://code.google.com/p/msysgit/downloads/list下载Git,安装后,在Webstorm中查找Git,然后如下图配置好到Git的安装目录
    850054429766380139

  5. 配置好后还不够,因为运行Git需要本机的SSH,SSH的作用是让本地版本库与远程版本库通信,也就是你在本地修改好的代码,需要同步到服务器上的时候,就需要这个SSH密钥来通讯,那么我们先找到Git的安装目录中的“Git Bash.vbs”
    1683783310783409294

  6. 运行后,输入

如下图,如果出现以下句子,则表明生成成功
1405123083839907206

如果出现““No such file or directory”或类似的语句,说明缺少ssh的key。那么我们就得创建一个新的SSH,输入

会出现类似下图的提示: 4800555727900571148
直接按下“enter”键即可,然后输入密码。
4926937992443550540

成功后,找到你的用户目录下的C:\Users\你的计算机用户名.ssh\id_rsa.pub,用记事本打开,并复制里面的SSH码
836825105860973142

进入Github,如下图进入SSH添加页面,然后Title输入任意,下面的Key输入你刚才复制的SSH key就没问题了
3299168202125888835

在Webstorm中使用Github

  1. 那么现在你可以随意访问你的一个Repositories,也就是你的代码库,比如博主的https://github.com/fangge/fks,然后如下图点击相关选项,并填写好自己的git地址:
    3313804900914876899
    如果你要保存项目的目录中,已经存在了同名目录,是不能拷贝你的Github项目下来的哦,如下图
    2874703937246249077
  2. 点击Clone后,你的项目就会同步到你的本地中去,然后如果大家是第一次装Webstorm,应该会提示你安装Markdown插件,按照它的步骤来安装就行,目的是为了可以去编写Github项目特有的介绍项目文README.md,每一个项目都应该有一个这样的文件,来介绍自己的代码库到底有什么作用或者用法是怎么样的,插件可以直接支持md文件的编写,关于Markdown的语法也属于本文讨论范围之外,大家可以去了解一下,反正是一个不错的文本操作语言,语法很简单也很实用
    未命名
  3. 然后你就可以开始愉快地进行你的github库管理了
    (1)首先,如果当你在文件夹中添加文件时,文件会在左侧的项目管理面板中显示为红色,说明这个文件是在原有的Github项目中没有的
    4821947826130399485
    那么你就得将这个文件先add到本地github库中,如下图操作(或者直接Ctrl+Alt+A)
    800514833865312331
    (2)然后你会发现文件变成绿色,就证明添加成功了,接着你随意改库中的文件,你会发现文件变成了蓝色,而且在相应的修改代码段还有一个蓝色标记,证明你的修改位置,这里不得不感叹实在太贴心
    4928345367327091947
    (3)然后修改后,你需要上传你的修改了,你可以有多种方法,一种是在上面的面板中直接commit(提交)你的修改4886968545750625325,另一种是如下图找到commit的选项来添加快捷键,以后就可以快乐地同步你的代码到github了
    844706405208885517
    (4)提交后,我们发现如下面板,我们发现已经有我们刚才的两个修改了,一个是绿色的文件添加,一个是蓝色的原有文件修改,然后确认无误后,请务必填写这次修改的一些观点,也就是你为什么要更新它,这样利于管理我们自己的代码库,也是一个良好的习惯,不填是无法上传的哦 809522033120078335
    (5)填完所有信息后,我们把鼠标移动到Commit的地方,有一个Commit and Push,这就是为了将我们的修改同步到github上,如英文所示,直接Commit,就是单纯提交你的修改,可是push,就是把你的修改提交到Github上的代码库中。
    4790422628738985032
    (6)Push页面中,你还可以将你现在的修改,重新增加到一个新的branch中,也就是你的代码库分支,每个代码库都允许有很多个分支,每个分支可以是不同的代码,点击Push后,你的代码就正式同步到你的代码库了,你可以随时查看同步的状态
    3183200511721016615
    803329583632419607
    6608216615538766398
    (7)提示成功后,过几分钟刷新你的页面,就可以看到你刚才的修改了
    3320560300355932647
    (8)你还可以在下面的面板中,看到整个github库的操作过程,非常方便
    3300294102032765451
    (9)你还可以在右下角看你的项目分支,并同步到本地,项目分支有时候不一定是你自己写的,你可以去看其他人在你代码库中的更改哦,很方便吧!!
    57139420372919619

大概介绍到这里,因为刚开始玩不久,所以还不是很多更新,欢迎大家互相follow:https://github.com/fangge

附上很久之前写过的CSS3动画的demo:
http://fangge.github.io/css3cartoon



— 于 共写了3067个字
— 文内使用到的标签:

10条回应:“【WebStorm】利用WebStorm来管理你的Github”

  1. Mr_F陽说道:

    第一次发文,欢迎分享!

  2. 啦啦啦说道:

    帮帮哒~

  3. 最励志官网说道:

    网站真不错 最励志网http://www.zuilizhi.net/?

  4. 歪妖内涵网说道:

    我并不为楼主的标题所吸引,也不是被贴子的内容所迷惑。

  5. 好东西 谢谢分享

  6. 妹子糗事说道:

    太厉害啦!值得我们学习

  7. 阿信说道:

    谢谢楼主 辛苦!

  8. Jesse说道:

    github上的项目更新了的话怎么用webstrom更新项目

发表评论

电子邮件地址不会被公开。 必填项已用*标注