在Github上创建一个博客

28 Apr 2013

##创建##

jakyll 使用Github创建博客，项目名必须是username.github.io，然后直接使用主分支master即可。github使用的jekyll会自动根据相关文件生成一个_site文件夹，包括整个blog的静态文件用于访问。

_layouts文件夹为模板文件夹，可以创建一个default(自定)的html文件作为模板，并使用<dl> <dt><h1>使用Pointer Lock技术</h1></dt> <dd> <article> 05 Mar 2013 <p>所谓的mouselook其实就是第一人称视角，而pointerlock技术（其实和第一人称没什么关系,只是说这个技术可以用来实现第一人称）其核心就是让鼠标隐藏并且无论怎么拖动鼠标，鼠标指针都不会跑出目标区域。用法：</p>

requestPointerLock 是最主要的方法，进入pointerlock模式，在chrome会出现像fullscreen一样的提示，是否隐藏鼠标，按esc键可以退出该模式。需要加上浏览器前缀，moz或者webkit，像这样element.webkitRequestPointerLock()。不过在firefox中测试用不了，具体还没来得及调，不知道什么情况。
pointerlockchange 是一个事件event，用addEventListener绑定给一个方法，在切换模式时就可以触发该方法。同样需要添加前缀。
pointerLockElement 是当前为pointerlock模式的元素，用来检查目标元素是否进入了该模式，比如document.pointerLockElement === element。一样添加前缀。
movementX/movementY 在pointerlock模式中，鼠标是隐藏并且不动的，因此要获取此时的鼠标动作，需要这个属性。存在与事件event中，比如在mousemove时间中，像这样e.movementX直接使用。需要加上前缀。

以下是一个简单的Demo：

(function ($, undefined) {
    var mouse = {
        x: -1,
        y: -1
    };
    document.addEventListener('pointerlockchange', change, false);
    document.addEventListener('mozpointerlockchange', change, false);
    document.addEventListener('webkitpointerlockchange', change, false);
    $("#canvas").click(function () {
        var canvas = $("#canvas").get()[0];
        canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock 
        || canvas.oRequestPointerLock || canvas.msRequestPointerLock;
        canvas.requestPointerLock();
    });

    function change(e) {
        var canvas = $("#canvas").get()[0];
        if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas) {
            document.addEventListener("mousemove", move, false);
        } else {
            document.removeEventListener("mousemove", move, false);
            mouse = {
                x: -1,
                y: -1
            };
        }
    };

    function move(e) {
        var canvas = $("#canvas").get()[0];
        var ctx = canvas.getContext('2d');
        if (mouse.x == -1) {
            mouse = _position(canvas, e);
        }
        var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
        var movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
        mouse.x = mouse.x + movementX;
        mouse.y = mouse.y + movementY;
        if (mouse.x > $('#canvas').width() - 50) {
            mouse.x = $('#canvas').width() - 50;
        } else if (mouse.x < 0) {
            mouse.x = 0;
        }
        if (mouse.y > $('#canvas').height() - 50) {
            mouse.y = $('#canvas').height() - 50;
        } else if (mouse.y < 0) {
            mouse.y = 0;
        }
        ctx.clearRect(0, 0, 400, 400);
        _show(mouse.x, mouse.y, ctx);
    }

    function _position(canvas, event) {
        var x, y;
        if (event.x != undefined && event.y != undefined) {
            x = event.x;
            y = event.y;
        } else {
            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        return {
            x: x,
            y: y
        };
    }

    function _show(_x, _y, _ctx) {
        _ctx.fillStyle = 'red';
        _ctx.fillRect(0, 0, _x, _y);
    }
})(jQuery);

Fiddle Demo

    </article>
</dd>
<dd>
    <div class="comments" id="disqus_thread"></div>
</dd>

</dl>

(function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})(); </script> 作为模板接受的内容变量，另外还有在Github上创建一个博客之类的变量。 _posts文件夹为博客文章文件夹，发布文章的格式为yyyy-mm-dd-blogname，也就说文章的日期是自定的。格式可以使用html、md、textile。当然更易于管理的方式是建立Year>Month>Day这样的目录结构。 <!-- more --> 无论是模板还是页面都可以在文件的开始，写入YAML的配置信息，使用三个横杠分隔，像这样：

---
layout: post
category: Other
tags: github page blog config
title: Create Blog on Github
---

最关键的是_config.yml文件，这个是jekyll的配置文件。其中auto为boolean值，是否自动根据修改重建网站静态文件。

destination: ./_site
auto:        true
lsi:         false

当然根目录中的index.html是必不可少的首页了，另外也许还需要一个about.html之类的页面，都放在根目录中即可，然后在模板中的导航直接放入这些页面的链接。如果不喜欢有HTML这样的后缀，可以使用文件夹代替，并在文件夹中使用index.html这样的名字。比如about/index.html 在访问时路径为www.example.com/about/

更详细的wiki可以看这里,Jekyll Wiki，可以查看各种配置和使用方法。或者访问Jekyll主页

##评论##

我使用的是Disqus第三方评论，国内的模仿者还有友言、灯鹭、多说等，它们大致的原理都一样，引入一段js，然后动态加载一个iframe，将第三方提供的输入框和评论数据呈现出来，另外这需要一个帐号，用来保存和管理你的评论。

首先注册一个Disqus的帐号，然后输入需要添加评论的网站地址，以及名称和简称，然后会自动生成一段js代码，和一个div，这个div就是容器，只要放到你的网站中需要放置评论的地方就可以了。js代码可以放在body的最后加载。

var disqus_shortname = 'tychio blog';
var disqus_title = '在Github上创建一个博客';
var disqus_identifier = '/tech/2013/04/28/create';
var disqus_url = 'http://www.tychio.net//tech/2013/04/28/create.html';

(function() {
    var dsq = document.createElement('script'); 
    dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

disqus_shortname是简称，disqus_title是标题，disqus_identifier是标识，disqus_url是地址。

另外disqus可以自动根据网站样式生成样式，我没有做任何样式的修改，disqus就生成了文字颜色与我的blog一致的评论框。

本地环境

Jekyll是由Ruby编写的，所以首先需要下载Ruby，在这里下载Ruby1.9.3，注意不能下载Ruby2，之后会出现问题。

在下载页面中还能找到DevKit，也一并下载了，注意自己的操作系统选择对应的版本。

Ruby的安装很简单，如果是安装版连环境变量都不用配置。然后是DevKit稍微复杂点，需要几行命令：

cd /d/DevKit/
ruby dk.rb init
ruby dk.rb install

如此基本环境就准备好了，然后使用gem安装jekyll：

gem install jekyll

最后在需要建立blog的文件夹下，使用以下命令即可创建jekyll博客。

jekyll new

然后无论是否用jekyll创建的blog，在其目录下使用以下命令即可在本地启动jekyll服务：

jekyll serve

这条命令其实还包含了build命令用以生成_site文件夹，也就是博客的静态页面。如果希望每次修改都会生成，可以使用参数–watch或-w

jekyll serve -w

这样一个基本的Jekyll博客就建好了，把除了_site的其他文件push到github上即可用有自己的Blog了。