git分布式版本控制系统

我第一个接触的版本控制系统是svn，当时觉得版本控制就是这样，直到我遇到了git…
git是分布式版本控制系统，合适分布式开发，强调个体。速度快、灵活，代码冲突了也比较好解决，最让我喜欢的还是git的分支切换。

在github上创建一个空项目

我这里git的远程仓库选择github，github是全球最大的代码托管库，在国内也有许多类似的站点可以选用（比如：coding）。

• 这里假定已经有了github账号。登录github点击右上角的加号，选择new repository选项新建一个项目。
  

• 填写新项目的基本信息：
  新的项目名称，描述，其他默认，然后点击create repository按钮新建项目
  

• 克隆新项目至本地
  点击README按钮，去编辑README文件。
  
  写下hello world，然后到页面最下方点击commit new file按钮。
  
  点击use https 然后点复制按钮
  
  去你的本地文件夹，打开git bash。输入命令

  1	git clone <刚才复制的项目地址>

如果还没安装git，可以自行百度下载git，安装无脑，一路下一步就好。
到此为止，新的项目就好了。

提交 (commit)

进入新建的项目文件夹，就可以开始你的代码了。

这里为了方便，假定已经在项目里写了一段代码。准备提交至远端代码仓库。进入项目文件夹，输入命令：

1

git status

添加更改的代码

1

git add .

提交代码

1

git commit -m "提交代码"

log命令可以查看提交历史

1

git log

推送提交至远程分支push

1

git push origin master

至此就完成了git的首次提交

补充

这里使用的bash是git(戳这里下载)自带的，如果觉得打命令搞不懂，可以试试图形化界面(例如：sourcetree)

作为一个前端，作为一个具有捣(zhuang)鼓(bi)精神的前端，心想着得有一个可以写写技术文章的地方呀！于是就开始玩起了hexo。

虽然说Markdown设计之初就是为了方便作者快捷的写作。但是作为一个有强迫症的前端，写了一段总想看看写成了什么样子，但无奈看一眼得切到命令行bash输入

1

hexo generate //缩写 hexo g

在hexo编译完成后又切到浏览器刷新查看。心想，这不行啊，这样子怎么对得起捣(zhuang)鼓(bi)精神。于是就想着在里面加入gulp的想法。话不多说，下面就上代码。

安装gulp

和hexo一样gulp也是需要全局安装的

1

npm i gulp -g

安装gulp-shell

gulp并没有hexo的组件，所以这里选择使用gulp-shell来实现。

1

npm i -D gulp-shell

编写gulpfile.js文件

新建并打开gulpfile.js

1

vim gulpfile.js

编写gulp代码,引入gulp、gulp-shell和gulp-notify

1
2
3

var gulp = require('gulp');
var shell = require('gulp-shell');//bash输入
var notify = require('gulp-notify');//系统通知

编写默认任务

1
2
3
4
5
6
7

gulp.task("default",function(){
  gulp.src("./public/index.html")
    .pipe(shell([
      'hexo g'
    ]))
    .pipe(notify('hexo编译完成！'));
});

可以在bash里使用gulp来启动默认任务

之前有用过gulp的同学可能会发现我gulp的src方法获取的地址只是一个文件，而且也没有指向source文件夹下的.md文件，这是因为这里根本不需要src方法来得到文件流。这里需要的只是其后的pipe方法来运行shell方法。
然而gulp-shell还提供了另一种方法来执行

1
2
3

gulp.task('default', shell.task([
  'hexo g'
]));

只是这样的方法却是不能接pipe方法也就不能使用notify的系统通知了。权衡之下，我选择了前者。

编写watch任务

watch任务会监听指定文件的变更来触发默认任务

1
2
3

gulp.task('watch',function(){
  gulp.watch("./source/*/*md",['default']);
})

在bash里使用gulp watch来启动watch任务
在编写完watch任务后，尽管已经解决了自动构建，但是本地调试却需要另一个bash界面来开启hexo的服务。
于是，我还需要一个server任务来启动服务

编写server任务

1
2
3

gulp.task('server',shell.task([
  'hexo server'
]));

在bash里使用 gulp server来启动server任务
于是这里就可以改写watch任务

1
2
3
4

gulp.task('watch',function(){
  gulp.start('server');
  gulp.watch("./source/*/*md",['default']);
})

这样就可以在启动watch任务的时候也开启本地服务了。
到了这一步，就可以在bash命令行输入

1

gulp watch

回车后就可以开始边写边看了

这里还缺少了自动刷新的功能，这个功能使用我之前的方法并不能起到作用，还需要再思考思考

好了，我的第一篇技术文章就这么结束了，哈哈。

安装hexo

1

命令：npm install-g hexo

创建项目文件夹 eg: leenty.github.io

进入文件夹 初始化hexo

1

命令：hexo init

几秒钟后你的hexo项目就创建好了

接下来就可以看看这个项目了，在此之前需要先生成静态页面。
使用new来创建文章

1

命令：hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1

命令：hexo generate (缩写：hexo g)

进入文件观察模式，实时编译你的文章

1

命令：hexo generate --watch (缩写：hexo g -w)

开始本地预览服务

1

命令：hexo server

指定地址开启预览

1

命令：hexo server -i localhost -p 4000

部署

1

hexo deploy (缩写：hexo D)

进阶：

利用package.json的scripts来搞点事情

1
2
3
4
5
6

"scripts": {
    "server": "hexo server -i localhost -p 4000",
    "watch": "hexo g -w",
    "deploy":"hexo D",
    "dev": "npm run server && npm run watch"
}

将上述代码写在package.json里，就可以通过npm run server来开启服务
通过npm run watch来启动文件观察模式
通过npm run deploy来部署博客
当然，最最主要的是可以通过npm run dev同时开启服务和观察模式

• this is my first article by hexo