Ming-Zhe

Look Backward

又是一年

今天是大年三十,对这一年进行回顾。。。有些事情吧,不好一一说,还是说些和专业有关的吧。就想把这学期看的几本书在这里展示一下吧。。。

最近只有两个任务,node.js还有iOS开发,另外穿插这一下服务器相关技术,nginx是我主要学习的。

当然,看书并不是全部内容,有机会把所有的项目也要拿出来,其实都在我的github上,能来赏脸不胜欢迎。。。






爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

iTerm2 配色攻略

终于把 iTerm 的配色搞完了,之前因时间不够半途而废了。网上有几个 iTerm 的配色教程,跟着试了试,都不行。终于找到了解决方案。


预览

这是我的配色结果,还有多种配色方案可供选择。


一步一步来

首先打开home目录下的 .bash_profile 文件

$ vim ~/.bash_profile

粘贴进去一下内容:

1
2
3
CLICOLOR=1
LSCOLORS=gxfxcxdxbxegedabagacad
exportPS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;36m\]\w\[\033[00m\]\$ '

保存退出后。

接下来,打开 iterm 确认一下在 Preferences->Profiles->Terminal 标签下的 Terminal Emulation 选择的是 xterm-new,这个一定要确定(有可能需要重启 iTerm ),网上有的版本说的是 xterm-256color,亲测结果不对,一定要是 xterm-new 才可以。

之后在 Preferences->Profiles->Colors 标签,点击 Load Preset 列表中的 Import 进行导入,然后选择一种即可。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

茗记(一)

还是这几天

一直没有时间写博客,只能每次来写这种来回顾这几天了。


vim初体验

本来写了一篇有关配置vim了博客,结果发现和网上的重复率太高就懒得传上来了,展示下最终vim的样子就OK了。

用vim,就像一位小伙伴说的那样,是一种精神。是对代码的执着,对技术的热情。开始做一个伪高手吧。。。呵呵


KOA

之前用express,这也是我接触node.js只有使用的第一个框架。感觉很好,同样还是那帮人开发,koa自然我也不会放过。学习的同时,帮着做了一下koa的翻译工作。欢迎小伙伴们来指点。网站在这里

还是那句话,技术没有止境,我在探索的路上,永不停歇。


python

同样是为了可视化的报告,帮同学做了一个三围的地理可视化界面,用python实现的。

python确实相当强大,有各种库的支持,全球的开发者在为这个语言添枝加叶,用起来得心应手。。。


gnuplot

也是在帮小伙伴做可视化报告时发现的一个很不错的小工具。gnuplot是用来做科学视图的,可以对函数或者数据进行2D/3D的可视化。

上图是对f(x,y)=sin(sqrt(x∗x+y∗y))/sqrt(x∗x+y∗y)函数的可视化。

上图是对一组数据进行的可视化,可以抽象的想成是某地地形,或者是地域降雨量分布什么的。

这是从立体图中抽取出来的一个截面,用等高线表示。

这个工具十分轻巧,功能比着matlab也一点不差,非常适合轻量级的科研或者教学使用。而且安装方便,用mac的小伙伴们只需要在macport下安装即可。


向前看

接下来,除了几门考试,时间就比较充裕了,有几个大任务一定要抓紧了。不想给自己强加什么硬性的目标,觉得不现实,这样的学习节奏也不科学。只有几个大方向,一个是IOS的学习,一个是node.js的加强。这两块工作所需的内容其实是蛮多的,脑子里已经基本有了思路。另外穿插的,还有一些服务器的知识,包括nginx,和一些服务器编程。


现在回过头来看,还真的不容易。。。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

基于Node的下一代Web开发框架--koa

由 Express 原班人马打造的 koa,致力于成为一个更小、更健壮、更富有表现力的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升常用错误处理效率。Koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。


安装koa

koa 依赖支持 generator 的 Node 环境,也就是说,node的版本要在 0.11.9 或者更高,否则将无法执行。

用npm:

1
$ npm install koa

或者,选择安装在全局:

1
$ npm install -g koa


Example

这是一个koa的简单例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var koa = require('koa');
var app = koa();
// logger
app.use(function *(next){
var start = new Date;
yield next;
var ms = new Date - start;
console.log('%s %s - %s', this.method, this.url, ms);
});
// response
app.use(function *(){
this.body = 'Hello World';
});
app.listen(3000);

与普通的 function 不同,generator functions 以 function* 声明。以这种关键词声明的函数支持 yield。在后面会讲到 yield 的用法和意义。


执行koa

执行koa时需要在 —-harmony 模式下运行,为了方便可以将 node 设置为默认启动 harmony 模式的别名:

1
alias node='node --harmony'

这样在执行相关js的时候就可以直接使用了。


Cascading

这是一个比较抽象的概念。Koa 中间件以一种非常传统的方式级联起来,也就是这里所谓的Cascading。

在以往的 Node 开发中,频繁使用回调不太便于展示复杂的代码逻辑,在 Koa 中,我们可以写出真正具有表现力的中间件。与 Connect 实现中间件的方法相对比,Koa 的做法不是简单的将控制权依次移交给一个又一个的中间件直到程序结束,Koa 执行代码的方式有点像回形针,用户请求通过中间件,遇到 yield next 关键字时,会被传递到下一个符合请求的路由(downstream),在 yield next 捕获不到下一个中间件时,逆序返回继续执行代码(upstream)。

下边这个例子展现了使用这一特殊方法书写的 Hello World 范例:一开始,用户的请求通过 x-response-time 中间件和 logging 中间件,这两个中间件记录了一些请求细节,然后「穿过」 response 中间件一次,最终结束请求,返回 「Hello World」。

当程序运行到 yield next 时,代码流会暂停执行这个中间件的剩余代码,转而切换到下一个被定义的中间件执行代码,这样切换控制权的方式,被称为 downstream,当没有下一个中间件执行 downstream 的时候,代码将会逆序执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var koa = require('koa');
var app = koa();
// x-response-time
app.use(function *(next){
// (1) 进入路由
var start = new Date;
yield next;
// (5) 再次进入 x-response-time 中间件,记录2次通过此中间件「穿越」的时间
var ms = new Date - start;
this.set('X-Response-Time', ms + 'ms');
// (6) 返回 this.body
});
// logger
app.use(function *(next){
// (2) 进入 logger 中间件
var start = new Date;
yield next;
// (4) 再次进入 logger 中间件,记录2次通过此中间件「穿越」的时间
var ms = new Date - start;
console.log('%s %s - %s', this.method, this.url, ms);
});
// response
app.use(function *(){
// (3) 进入 response 中间件,没有捕获到下一个符合条件的中间件,传递到 upstream
this.body = 'Hello World';
});
app.listen(3000);

在上方的范例代码中,中间件以此被执行的顺序已经在注释中标记出来。你也可以自己尝试运行一下这个范例,并打印记录下各个环节的输出与耗时。

1
2
3
4
5
6
7
8
9
10
11
12
.middleware1 {
// (1) do some stuff
.middleware2 {
// (2) do some other stuff
.middleware3 {
// (3) NO next yield !
// this.body = 'hello world'
}
// (4) do some other stuff later
}
// (5) do some stuff lastest and return
}

上方的伪代码中标注了中间件的执行顺序,看起来是不是有点像 ruby 执行代码块(block)时 yield 的表现了?也许这能帮助你更好的理解 koa 运作的方式。


中间件(Middleware)

实际上,这些只是初步理解了koa基础,koa有很多第三方开发的中间件,这些中间件的熟练运用才是关键,github有很多这方面的库,每个都有详细的例子解释。以下是常用的一些:


小结

这些天确实做了写有关koa的工作,集合开源的力量做了一个 中文文档 有更详细的API说明。

在这里要感谢 一米 对网站建设的大力贡献,还要感谢 郭宇 对翻译工作的大力贡献,此中文文档遵循MIT协议,转载著名出处即可。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

这几天

这几天一直在忙,没有时间写东西。翻译了一篇将近三万字的论文;上党课,做十八届三中全会的报告;为了老师的实验从头学了python,就为了证明一个错误的数学公式是错误的。。。今天把这几天做的东西写一个小结。


前两篇博客所写的WebGL最终做的结果


用python生成的高斯模糊矩阵

实验室要做卷积与反卷积实验,坚决杜绝用matlab,果断python走起。。。说实话python也是现学现卖,还在慢慢进步中。希望以后能陆续传一些python的项目上来。


几种licence的比较

做开源的,这些一定要熟记于心啊。。。


写的几篇文章被简书收录


看到一个图片

可能很多人觉得这图是在讽刺什么,在我看来,这图是告诉我有哪些书是经典之作,需要在将来仔细读一读的。在这里把图贴出来,与君共勉。


最后

现在的实验室,已经被我收拾成这个样子了。。。对于实验室落后的设备,我实在无力吐槽,都搬来用自己的。什么时候能给我配一个好点的显示器,难道还要自己买?




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

First Journey In WebGL(二)

承接上次讲述,这次我们要实现一个功能。在程序中引入一个obj文件,在页面中以三维形式展现出来。并且,实现互动式的三维旋转,即随着鼠标的移动,图像在三维立体空间里进行相应的动作。


引入相关js文件

1
2
3
4
5
6
7
8
9
<body>
<script src="Three.js"></script>
<script src="OBJLoader.js"></script>
<script src="Detector.js"></script>
<script src="RequestAnimationFrame.js"></script>//最大可能的兼容老版本浏览器
<script>
// your code here
</script>
</body>

所有的js文件在源码中都能找到,在 OBJLoader.jsexamples/js/loaders/ 中。


OBJLoader.js

这个是我们主要用的一个js模块,它实现了我们所要的引入obj文件的功能。

1
2
3
4
5
var loader = new THREE.OBJLoader();
loader.load( "1.obj", function ( object ) {
2object.position.y = -30;
2scene.add( object );
} );

代码浅显易懂,基本没什么好说的。


设定环境光和直接光源

1
2
3
4
5
6
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

three.js提供了多种环境光和光源可供选择。从官网或者github下载原文件后,里面的doc有全部的解释,其实玩javascript是一个体力活,相信你也发现了。


设置动画效果

1
2
3
4
5
6
7
8
9
10
11
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}

requestAnimationFrame() 的主要作用是,当此时页面所在浏览器的tap或者window不可见时,就停止渲染,这样更加节省系统资源和电量。在 render() 中,有两个全局变量 mouseXmouseY ,需要添加监听器进行监听,随时改变 camera 的位置,从而实现动态图像的动态显示。下面来添加监听器。


添加监听器

1
2
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );

相应的响应函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}

这里还添加了另外一个监听器,是用来相应窗口变化,这也是为了适应多种显示器比例不同,以及在浏览过程中窗口大小变化,物体总是呈现在窗口的正中间。


最后,全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="Three.js"></script>
<script src="OBJLoader.js"></script>
<script src="Detector.js"></script>
<script src="RequestAnimationFrame.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
scene.add( camera );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var loader = new THREE.OBJLoader();
loader.load( "1.obj", function ( object ) {
object.position.y = -30;
scene.add( object );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>


注意

如果只写一个html文件并把所有的js文件引入进来,依然是无法在浏览器中显示的,这是许多浏览器为了安全性考虑,对于本地的html显示有所限制,具体原因还没有深究,有两种解决方案,一种是改变浏览器的配置,另一种是搭建一个本地服务器(推荐),这是用python搭建的方法。

$ python -m SimpleHTTPServer 8080

用node.js:

(sudo) npm install http-server -g

然后在任意目录下

http-server [-p] [端口号]

然后访问 localhost:8080,会进入到到自己搭建的本地服务器,就可以实现obj的引入了。


小结

WebGL还是内容还是相当丰富的,javascript更是如此,再多的教程也都只能作为抛砖引玉,真正的老师是谷歌,还有一个强大的资料库github,善用这两个资源,再到几个社区活跃一下,学技术很简单了。。。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

First Journey In WebGL(一)

由于一门课程的需要,要做一个三维可视化的presentation,想来想去,也就WebGL我还有点感兴趣,于是开始对这一领域的研究。这两天的时间也算是小有收获吧。在报告中我就是打算带着大家一起从零写一个WebGL程序的,让所有人也都感受一下这么一个创作的过程,再分享一下学习的经验。不过可能时间不够,就在这写吧。


three.js

要说玩WebGL怎么可能不说three.js,这可是对WebGL的完美封装。源码官网,要学three.js这两个地方是必去之处。我简单说一下three.js起步。


在进行开发之前

由于我们最终的结果是要呈现在web端,所有在在前端的展示框架要先搭建好,同时还要事先下载three.js文件,或者就像我这里一样,用three.js的官方cdn。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>


创建场景(scene)

用three.js呈现的内容需要3样元算:scene, camera, renderer .

1
2
3
4
5
6
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

解释一下,这里的 camera,我们使用的是 PerspectiveCamera(three.js还提供了很多其他类型的camera以供选择),它有4个参数,第一个表示视野大小;第二个表示成像比例,一般都是按照浏览器窗口比例来进行设定;第三和第四个分别是最远和最近的camera作用范围。下面的renderer比较容易理解,需要注意的是在最后要append到document中。

下面创建一个物体出来。

1
2
3
4
5
6
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

这里 CubeGeometry 为了创建一个 cube 出来,由 geometry 变量存储。除此之外还有需要 material 给我们的 cube 着色(同样的three.js由很多material可供选择)。然后就是 mesh 了,这个过程可以抽象的理解为融合过程,有了geometry和material融合后就是我们需要的最终 bject 了。最后把物体 add 进之前声明好的 scene 中去。

渲染(render)

1
2
3
4
5
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();

如果要深入解释 render 的原理,这就是另外一本书的内容了。。。这里,浏览器接到指令后,大概会做的事情就是每秒对要显示的内容进行60次着色。

制作动画效果

如果渲染出的图像不会动,可能也看不出三维效果来。因为我们用的只是一个生成的简单cube,本身是没有办法呈现出立体感的。所以我们加点动态以展示出,我们做的确实一个三维的object。

1
2
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;


最终代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>



这次先写这么多,下次介绍怎么再一个 WebGL 程序中 load 一个外部 obj 模型。哈哈,给力的实例来了。。。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

再次造访GDG

先附上一张现场照,没有照人,就是照了屏幕,时间有点紧,没顾得上多照。



距离上次参加gdg的活动已经一个多月了。这一个月后,确实学到不少东西,也认识了一些有共同语言的小伙伴。回头有时间会写一篇文章讲述这一个学期回顾。先来说一说这次的活动吧。


地点选在了一直炒的很热的车库咖啡,这也是我第二次来到车库了,还是那个样子。。。
主题就是从零基础到写一个安卓程序,能跑通,有逻辑,最后能上传的网上。


晚上到了会场后,就看到了人山人海的一幕,其中还混在了好多大叔大妈,都带着孩子来的,这。。。好吧,我确实被雷到了,如果中国的it行业真的已经波及到如此之广的范围,那。。。也不知道是好是坏。


其实,这样的环境下,你要是真的是来学安卓开发。。。不好意思,你选错地方了,来这里真的不能算是来学习的,应该说是来看看圈子里的各类现象。在这一晚上的时间,整个车库基本上就形成了中国软件行业的一个小的缩影,其中有菜鸟,有大牛,有民间高手不显山露水,有江湖郎中坑蒙拐骗。。。总之吧,来这里稍微感受下软件这个圈子,认识点道上的朋友,还是有点好处的。


就我个人而言,见到了一些平时在github上follow的牛人,像是见到偶像一样,心情还是有点小激动的。只是他们也充分发扬了作为标准程序员应该具备的素质--“这天没法聊了。。。”,只能这么吐槽了。谁让人家是技术达人呢。再有就是多了俩微博粉丝,哈哈,认识了俩北京科技大学的本科生,一起聊的还不错。希望他们以后也能冲进开源的圈子,为现在的软件行业做出点贡献吧。



爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

从Flickr外链图片

一直以来用markdown写文章,感觉上最大的问题就是外链图片实在是不方便。虽然可以放在自己服务器本地,一旦这些图片多起来,我那可怜的VPS只有20G的ssd,实在有点于心不忍。

现在新浪出了一个图床貌似用着还行,只是还没有仔细研究,貌似不能可视化管理图片,而且被SAE的收费政策惊吓过,尤其是等你过度依赖它的时候猛地捅你一刀真是有点哭笑不得。

想来想去,最终还是觉得Flickr最合适了(未来可能能发现更合适的)。简单说一下用Flickr做外链的过程吧。再附带几个例子。

永远有个第一步

不关用什么软件或者服务,上来都是要注册的。。。这个真的是爱莫能助了。

上传图片,获取连接

上传过图片后,在所有图片里会看到你刚刚上传的图片,打开后右下角有个选项按钮,点开选择检视所有尺寸,进去后选择好要的大小后,复制图片链接,这个链接就可以做为你的外部链接使用了。

亲测

  • 75-75

  • 160-240

  • 原图640-960

最后在来一张来自desktoppr的高清大图(感觉要爆了,如果刷不出来就算了。。。哈哈)

1TB

Flickr给每个用户的容量是1TB,所以完全不用考虑容量不足这种问题。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

Set Up Nginx On Vps

先说一下,这篇文章是给那些需要在自己的VPS服务器上装Nginx的人看的。VPS版本是CentOS 6,Nginx使用是比较稳定的1.4.4版本。


Why Nginx

事实上,我是受怂恿的。。。因为本身,我的博客不论是Jekyll还是Hexo都是不需要这种代理服务器的。但是作为一个出色轻量级web服务器,Nginx是在是太优秀了:

  • 超轻量级,占用更少的资源,对于我们这种自己掏腰包买VPS的小R玩家,每一分资源都颇显珍贵,选择Nginx而非Apache还是很有必要的。
  • 并发处理,Nginx处理请求是异步非阻塞的,(这点和node.js有点不谋而合的意思。。。)
  • 社区活跃,这点相信就不用我多说了,每个程序员恐怕最看重这点了。

考虑到这些,加上为了长远考虑,说不定以后要在服务器上放点App的服务什么的,我还是装了吧。


强势吐槽

不知道是我搜索的方法不对还是怎么,搜到的资料实在有失水准,如果现在看到这篇文章的你和我遇到的情况是一样的,按照我的解决方案应该是没问题了。在此我先写表上日期,现在是2013年11月26日,自己判断本博客是否已经过时。有什么反馈或者问题可以通过下面的联系方式找到我。


言归正传

本人的VPS是CentOS系统,Ubuntu或者其他用户仅供参考,自己斟酌。


第一步,请确定,你的系统已经安装GCC等基础yum包


第二步,建立软件源配置文件

/etc/yum.repos.d/目录下建立一个nginx.repo软件源配置文件。命令如下:

1
2
# cd /etc/yum.repos.d/
# vim

然后填写如下文件内容:

1
2
3
4
5
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

执行vim命令保存文件为nginx.repo完整路径是/etc/yum.repos.d/nginx.repo

1
:w nginx.repo


第三步,运行YUM

执行yum命令安装nginx

yum install nginx 

在过程中会让你输入一个Y,回车即可。


第四步,设置反向代理

/etc/nginx/conf.d/找到default.conf,修改listen、server_name、proxy_pass内容:

1
2
3
4
5
6
7
8
9
server {
listen 80;
server_name example.com;
location / {
# root /usr/share/nginx/html;
# index index.html index.htm;
proxy_pass http://127.0.0.1:4000/; ##这里我用Hexo搭建的博客
}
}


第五步,启动Nginx

且看一下指令:

1
2
3
4
5
# service nginx start
# service nginx stop
# service nginx restart
# service nginx status
# service nginx reload


小结

现在回头来看,装个 Nginx 还是挺简单的,主要是反代理 Hexo 网站的时候走了些弯路。接下来我会写一些使用 VPS 的心得,以及在 VPS 上搭建 git 服务。





爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com

Try Git

I’m an egotistical bastard, and I name all my projects after myself. First Linux, now git.

林纳斯·托瓦兹自嘲地取了这个名字”git”。在英式英语中指一个愚笨或者不开心的人。

Git

说到版本控制、软件项目管理等概念,在开源时代到来的今天,Git绝对是一个绕不开的软件。更多有关Git的官方解释,我也不赘述了。

Try Git

重点来了
我们不是技术大牛,不可能上来就熟练使用git全部操作。我接触git不到1个月,用的也只是它的基本粗浅功能(在我的Github就能体现出来)。不一定有什么指导意义,还是想分享一下整个Try Git的过程。

初吻

惊艳的第一次来自于Github的Training,在小伙伴的怂恿下开始了git之旅。

用git管理Github

如果上一阶段是初吻,那这里就是XXX,应该说是比初吻要更强烈的快感。用git命令行来控制自己项目的各种操作,看上去就有种瞬间变身技术大牛的感觉(有点自欺欺人)。
这里第一步比较麻烦一些,生成SSH Keys,建立与操作电脑的链接。详细参见来自Github的帮助
之后就是从Training学来的东西,反复的操作。
如果没有记牢的话,除了可以跟着Training再来一遍,Code School里也有相应的免费教程。

Use Git

现在,我们可以用Git进行最基本的项目操作,保证你的Github每天都有动态。这个时候和你打交道的基本就是就是一下几条语句:

  • git add . 添加所有修改文件到缓存
  • git commit -m “xxx” 记录缓存内容的快照
  • git push origin master 推送你的master分支与数据到某个远端仓库的master分支
  • git pull 从远端仓库提取数据并尝试合并到当前分支

总结

耐下性子,按照步骤,一步一步来,很快就能熟练掌握git。说到底也没有多少东西。




爱生活,爱技术。
愿结识各路小伙伴。
找到我:

微博:http://weibo.com/afmz

Github:http://github.com/Ming-Zhe

E-mail:law.gravitys@gmail.com