Embolon Who

Support favicon and footer modification

Fri, 08 Apr 2016 04:18:27 +0000

After a few days of posting random stuff, I decided to add some new features to the Blog: favicon and a better looking footer.

Favicon

This little thing lives in your browser tag and favorite folders. It usually is a 16x16 size png or ico image. After googling around, I found a pretty good website, which has detailed instructions and codes to show you how to add the favicon to your site. One thing to keep in mind is that there is a debate on whether you should put favicon.ico (together with some other files)in the site root directory. It has benefits and drawbacks.

To keep things short. Prepare an image with good quality to serve as your original icon. Feed it to a favicon gen website and get a set of icons. Upload this set of icons to blog site and modify the html head accordingly.

I think the three column footer is really not necessary for my blog. So I modified it to look like this Blog. To add the license information is pretty straight forward, just check the Creative Commons License for detailed instructions. The difficult part is to add social icons. In order to do so, we will have to touch CSS which is a whole new experience for me.

Step 0

Find and download a set of the favorate icon images. You can choose the icon color to match your footer font color. Note: do not forget to credit the icon authors.

Step 1

We will have to add a new social-icon class to the css file (_sass/_layout.scss) as below.

    
.social-icons {
    margin: 1em;
    a {
      text-decoration: none; /* remove underline in social icons */
      padding: 4px 4px;
      &:hover {
        color: &grey-color;
      }
    }
}

I have added the text-decoration: none; to get ride of the annoying underline on the icons, but there might be a better way to do so.

Step 2

To add a icon, we can it like below (_includes/footer.html):

<div class="social-icons">
{ % if site.owner.github % }<a href="https://github.com/{ { site.owner.github } }" title="{ { site.owner.name } } on Github" target="_black"><span class="icon32 icon--github">{ % include icon-github.svg % }</span></a>{ % endif % }
</div>

Now you can add as many social icons as you like!

JavaScript Notes (2)

Thu, 10 Mar 2016 01:47:38 +0000

After some basic knowledge, I will read some books and gather some useful tips for future reference.

JavaScripts: The Good Part

Object

Number, String, Bool, null and undefined are not objects. JavaScript Object are class-free. They look like a python dictionary.

Retrieval

”

” can be used to initialize value

var middle = storage['middle-name'] || "(none)";
// if storage['middle-name'] is undefined, middle = "(none)"
var status = flight.status || "unknown";
// if flight.status is undefined, status = "unknown"

“&&” can be used to look up an undefined value without TypeError

flight.equipment                           // undefined
flight.equipment.model                     // throw "TypeError"
fllght.equipment && flight.equipment.model // undefined

Reference

object is always refered not copied.

var a = {}, b = {}, c = {};   // a, b, c are three different empty objects
var a = b = c = {};           // a, b, c all refers to the same empty object

Prototype

if (typeof Object.beget !== 'function') {
    Object.beget = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}
var another_stooge = Object.beget(stooge);  // heritage from prototype stooge

Global Abatement

Only create a single global variable to avoid various issues.

var MYAPP = {};
MYAPP.variables = {
    "first-name": "Joe",
    "last-name": "Howard"
};

Make MYAPP as a variable container.

Functions

Invocation Pattern

The Method

this binds to the owner object

The Function

this binds to global variable instead of the owner object which is a bad design. Do the below to avoid.

myObject.double = funcion () {
    var that = this;
    var helper = function () {
        that.value = add(that.value, that.value); // this does not work here
    };
    helper();
};

The Constructor

with a new in front of the constructor, this will bind to the new object.

var Quo = function (string) {
    this.status = string
};

var myQuo = new Quo("confused"); // do not forget "new"

This is actually not a very good way to make a constructor.

The Apply

apply will take an owner object as parameter too.

var sum = add.apply(null, [3, 4]); // null will be assigned to this

Augmenting Types

Add method to Function.prototype to make this method available to all functions.

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
}; // this is not a function defination, so a ';' is needed
// Function.prototype.method = an anonymous function;
// this function add a method to the owner object

Number.method('interger', function () {
    return Math[this < 0 ? 'ceiling' : 'floor'](this);
});

document.writeln((-10 / 3).integer()); // -3

Scope

Unlike C++, variable does not only live inside the scope. Variable will live in the whole function where it is defined.

Memoization

A function with cache.

var memoizer = function (memo, fundamental) {
    var shell = function (n) {
         var result = memo[n];
         if (typeof result !== 'number') {
             result = fundamental (shell, n);
             memo[n] = result;
         }
         return result;
    };   // shell is the altimate memoizated function
    return shell;
};

var factorial = memoization([0, 1], function (shell, n) {return n*shell(n-1);});

Other Tips

always use ‘===’ or ‘!==’ instead of ‘==’ or ‘!=’
always use ‘var foo = function foo () ();’ instead of ‘function foo () {}’ in JavaScript, this clearly claims that foo is a variable, any function in JavaScript is a variable.
be cautious when use ‘for in’ to check all properties of an object, since this will also include function properties (functions are variables too)

JavaScript Notes (1)

Wed, 03 Feb 2016 15:22:54 +0000

I will start my JavaScript learning session today, keep notes and document interesting thoughts.

Basic Knowledges

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is suppported by all modern Web broswers without plug-ins. JavaScript is prototype-based with first-class include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

Variables

JavaScript uses dynamic typing, that types are associated with values, not with variables. A variable can be assign a string and later change to a integer. But unlike Python, JavaScript still needs to define any new variable.

    
var x; // define variable x, which is initialized as "undefined"
var y = null; // define and initiate variable y to "null"
var z = "What is going on?";

JavaScript uses a prototype-based object-oriented programming. It may looks weird, but JavaScript uses prototypes while most others use classes for inheritance. Functions are used as the object constructor, rather than having a special init method or constructor functions. Object method functions are also just like other normal functions, only that method functions has a this keyword that is bound to a certain object domain/scope. But we can later bind a normal function with an object and use this keyword to refer to the object member.

function Person(name, age) {
    this.name = name;
    this.age = age;
    
    this.print = function() {
        console.log(name+" is "+this.age+" years old.");
    }
}

var Jack;
Jack = new Person("Jack", 20);
Jack.print();             // Print "Jack is 20 years old."

function printName() {
    console.log(this.name);
}

var boundPrintName = printName.bind(Jack);
boudnPrintName();         // Print "Jack"
printName.call(Jack);     // Print "Jack"

Syntax

Looks very close to the C family, but not that wordy like Java. The hard part for me to learn is the functional properties, which is totally different from previous experience. I will later look into this functional properties. Maybe connect with the Scheme languages to better understand this concept.

聊聊科幻剧

Wed, 03 Feb 2016 04:05:12 +0000

转载自2012年的新浪博客。

最近把好老的firefly又拿出来重温了一下，再想想前一阵看过的星门宇宙，不由得感到科幻剧真的是越来越衰微。本质上讲，科幻是一种技术手段性的标签，通常情况下剧集的基本矛盾和主要冲突一般并不是基于科幻这一设定，通常来讲，科幻部分就像小孩子的玩具一样，是个夺人眼球的烟花，而不是主旨内涵所在。比如星际旅行系列，虽然是科幻类电视剧的经典代表，但是其本质是游记和公路片，有冒险性质和政治性，其科幻的背景比如phase gun，光传，translator什么的无非是我们手里摆弄的电子产品，和片子里追求平等和渴望互相理解的政治诉求并没有多大关系。所以随着科学技术的进步，20年前所能想到的诸如手机一样的神奇电子产品早已经习以为常之后，科幻片的华丽外衣也就开始变得有些滑稽可笑了。

还是从star trek系列说起，诞生于冷战时期的星际之旅，所崇尚的正是破冰冷战和人类的互相理解，star trek的政府设定其实也是一个共产主义的政府，意识形态左翼明显，但是舰内并不实行民主，而是采用古希腊的军事国王领导制（舰长的权威极大）。那么star trek的科幻概念也很丰富，多语言同声传译、激光枪、光传、全息技术、纯意识体等等，但其主线故事与克林贡人的战争确实世俗的，现世的，明确与现代挂钩的。所以在脱离了冷战大环境后也就失去了最重要的土壤。

另外一个硬科幻系列星门，诞生于冷战快要结束的年代，本质上讲也是冒险和政治戏为主，但是寻求更多的不是理解，而是表露了美国自由主义胜利的一种倾向（表现了对集权主义的批评），有一种明显的乐观态度。星门系列的一个显著特点是领导人分为一个军事领导一个科学家领导，这个算是人类自古以来就在讨论的到底什么样的人适合做管理者的话题，军事领导和科学家领导的冲突也成为了星门系列的一大看点（SGU还加入了civilian领导）。星门的小玩应就更多了，因为科学技术的进去，对于概念的解释也更为专业化，语速也更快了些。不过实话说，星门除了星门拨号系统（感觉应该还是来源于互联网的吧）之外，剩下的大部分概念基本上和star trek系列颇为雷同，这样看来，人类目前所能想到的科幻技术感觉无非就那么几种，一个是幻想成真（程控全息），一个是迅速移动（光传），更佳的可视化效果（现在mac和windows都是搞的更像科幻片一样），无距离通信（手机已经实现），高浓缩能源，身体恢复，想来想去也就这么几种吧。

关于古典哲学问题一直也是科幻类题材的重点之一，这两部剧集也在支线中穿插讨论了生命的定义（ST origin 天体也是生命），自我意识与集体意识（ST voyager 9又2/3）等等，在我看来，用科幻的手段去探讨这些问题，要比那些小玩具似的（比如光剑）设定有意义得多，虽然这种观点偏于小众，但过于流俗也难成经典。另外科技与道德的冲突也是科幻剧才独具的，银翼杀手中克隆技术充满着争议，SGA中即便疫苗有强烈副作用也要强制用于自卫的某星人，等等等等。本质上讲，这些更具有哲学思辨的冲突才是硬科幻最独具特色的内容。抛离了硬科幻的SGU系列妄图以描写人性冲突为中心，却迅速沦落到被砍，究其原因描写人性冲突的舞台不在太空战舰上，而是一个孤岛，在这种充满好奇的战舰上并没有营造出来孤岛上时刻提放的气氛，所以lost是成功的，SGU却不伦不类。

小时候对我影响极深的另外一部科幻片是X档案，以前还是凤凰卫视（那个时候应该还不叫这个名字）看的，小时候也不懂，不知道男主特别喜欢听porn radio，要不就是一直被各种离奇古怪的故事吓得一惊一乍。现在回顾，X档案属于主线剧情缓慢的悬疑罪案和阴谋论类电视剧。X档案并没有解释过什么神奇的物件，但是各种高科技却在剧集中发生着，这类科幻片拍好了靠剧情，拍烂了靠狗血感情剧，算是能收能放。X档案显然要强过目前的fringe，人家不是靠感情戏吃饭的，剧本还是很硬。不过阴谋论类的科幻片太容易陷入超展开或者挖坑不填的怪圈，很难善终，所以成功的例子也不多。

doctor who又是另外一类完全不同的科幻片，英伦范的DW是流行文化的载体，DW弘扬并赞美的是人性和世俗文化，只是偶尔在支线故事上玩玩时间线或者整季铺设悬念线索，本质上讲也并不是科幻故事，个人认为应该更接近fantasy奇幻故事。英国的远古入侵我也很喜欢看，整体上看大体可以归为科幻，但是套路上还是史前动物回到现代吃人的B级片，并附带阴谋论属性，也不属入传统科幻片。

太空歌剧系列可谓近20年最为宏大的宇宙类电视剧群了，遥远星际，萤火虫，巴比伦5号，暗域魔舰，星舰复国记，各有各的特点，阴沉的巴比伦，西部的萤火虫，荒诞的暗域魔舰，奥德赛的遥远星际和信念之旅的仙女座号。整个系列的终止于萤火虫的被砍。太空歌剧系列太过宏大，本人也只看了暗域魔舰和萤火虫，剩下几部也仅仅勉强追了几集。这个大系列的特点是她们都是披着科幻外衣的其他类型剧。从此也就可见科技小玩应已经很难提起观众们的兴趣了，毕竟现如今都是iphone 4S的天下了，连和Siri谈恋爱都要成为可能了（TBBT），诸如R2D2什么的，看起来真的就像是玩具了。这么想来，诸如夏娃的时间一类的，大概也不一定会是遥远的未来了，可能真的再有个20年就会实现。

最近的高收视科幻剧也就是battlestar galactica了，这部cyber感十足又充满阴谋论和伪宗教的剧集吸引了大量观众。求其原因也和美国爱国者法案和反恐怖主义行为有关。battlestar讨论了大量关于自杀性恐怖袭击，全民强制监控等社会问题，而片中的科学技术不讨论可行性，只讨论其若存在而产生的后果，充满了宗教意味。其后续作品caprica虽然解释了部分技术的可行性，但依然使用了宗教性的表达，也使本片的科幻气息大打折扣。

综上来看吧，存活着的科幻剧基本上都属于科幻外衣的其他类型剧了，像近年的几部科幻剧基本上都是家庭剧，或者异形剧（反抗军）。硬科幻由于缺乏足够新鲜感而每况愈下。按照有关时间旅行的若干问题的说法，剧情永远是王道，科幻剧不立足于科技自身与人性，社会等关系的话，就会不断面临玩具被玩腻的情况。目前无法解释的很多问题还都大有可谈之处，生命的定义，大脑的构造，人类的自我认同，智慧生物的定义与共存，但是单单只谈概念问题，也成不了好电视剧，恰当的矛盾，有张力的台词，合在一起才能构成一部成功的科幻剧。当然虽然好多科幻类电视剧中的玩具依然显得有些小儿科了，但是能按到我家里来还是蛮好的，我还是很中意全息技术室，啥时候给按一个玩玩吧。

关于魔戒的碎碎念

Sun, 31 Jan 2016 01:05:32 +0000

每次写论文的时候，总喜欢把指环王拿出来当背景音乐，看完了一套三部曲经常论文也就写得差不多了。

魔幻类电影一般都只基于三个时间段，一个是中古前文明时代，一个是古典时期和中世纪，最后一个是工业革命的蒸汽时代。中古时代的典型如各种神话圣经故事等等；古典时期和中世纪本是两个不同的时期不过因为处于变革相接思想冲击强的时期所以经常在同一部作品中同时出现，这一时期的典型如魔戒，冰与火之歌等；工业革命蒸汽时代的魔幻可同时有科幻成分，比如时间旅者，致命魔术，哈利波特等等。

如魔戒一类，处于古典时期和中世纪时期的作品，一般来讲都会面临政治制度（共和制）向彻底的部落首领妥协或者颠倒过来的问题，究其原来还是当今民主共和的大方针喜欢把古典时期的雅典和罗马当做自己替身的缘故。不过托尔金似乎不是个政治动物，可能语言学出身的缘故喜欢把更多精力放在创建一个完整的精灵语体系上，而不是政治体制上。当然也有可能是因为20世纪30年代确实也不是民主共和的强势时期，丘吉尔本来也是墨索里尼的粉丝嘛，大部分人普遍是法西斯或者马克思的信徒，所以民主共和不怎么流行，写进书里不带感，倒也不怎么出乎意料。所以不管是精灵，人类，矮人全都是君主专制（或者部落首领制），霍比特人有可能是自治的，但是电影里面没写。

神话体系里面精灵，矮人，人类，兽人分立的设计，我所知貌似是魔戒的首创。类似的如希腊神话的金人，银人，铜人设计，各种怪兽，灵神什么的，基本上都是少数的存在，要么如凯尔特人的德鲁伊，大漠上的萨满等等，不过是有魔力的人类，真正完全抽象成了另外一个和人类分立的族群我还是在魔戒里第一次见到（时间是1930年代，不是电影年代）。如此的抽象，在我看来，很像种姓制度的一种体现，即血缘完全固定了大体的职业，社会地位，生活状态等等。魔戒里面，精灵的灵魂不会消散，自带柔光背景，拥有各种bug能力，还能去所谓的天堂，各个都是形象姣好；人类则相对挫一些，和现实的人基本相同；矮人则是明显的手工业者工商业者形象，不怎么关心政治（中土大事），只在乎钱（金子）；霍比特人则生活无忧无虑，我只能猜测他们是自治的不用上缴土地税，不然中土那么多国家在打仗他们也能活的这么滋润就怪了。。。有人认为精灵代表的是贵族阶层，所以拥有各种光环，对此我倒是认为精灵代表的更有可能只是想象中的希腊英雄式人物，或者如德鲁伊，萨满等祭司阶层，中世纪的欧洲僧侣也是拥有各种产业的，是地主和手工业的代表，他们不领世禄也不需要参与征战，他们主要雇佣或者忽悠各种领主为其征战。所以感觉甘道夫等巫师属于典型的僧侣阶层，而精灵则是介于僧侣和贵族之间的一种形态。人类中的各个王国与其说是王国，更像是只有几座小城市的大领主，当然也有可能是为了简化写作，不想搞太大的国家。骠骑国圣盔谷一役可以体现出来，骠骑国的军队依然主要属于家兵（被驱逐的领主自己领有大量的骑兵），而不是国家常备军的状态。国王的军队数量有限，不敌萨鲁曼的部队。刚铎相对来讲就要更像现代民族国家，指挥战斗的将军本质上是军官，而不是部队的拥有者（两兄弟显然并不拥有不同的部队，而是统帅相同的军队）。人类中的登丹人则是典型失去了领地的原贵族领主阶层，他们大部分成为了雇佣兵等职业军人。霍比特人的情况最为有趣，显然作者想要描绘的是前工业时代英国的宁静乡村，可惜的是，这样的宁静不过是表象而已，一旦自由农大量破产沦落为家奴（萨姆说是个园丁，其实就是个佃农），这种宁静就不可能再维持了。当然，我倒是并不认为作者是有意这么写的，可能更多是潜意识的作用吧。

魔兽世界里面显然最终的想法是各个种族合力击败了恶势力的结局，组建一个完美的基于不同种族（种姓）的柏拉图式乌托邦，本质上讲对于人类的区分这种根本观点是根植于众多西方魔幻类作品的潜意识的。西方文化的贵族意识（当然日本也有）在中国其实早已荡然无存，大概这也是中国魔幻类作品不爱做太多富有明显不同的种族（一般最多三个，仙，人，妖，其实只是简单贴一个善恶标签而已，并没有太多的阶级特征）的原因吧。中国的土壤中还是考试，为官，修身，行侠，升仙等是主要主题，任何人不论出身，基本上都可以完成这些成就只要敢于磨练，而不会像魔戒这样非要找一个平凡的霍比特种族的人而不是精灵来完成历史使命，我们只会找一个金童神子转世什么的人来完成这项创举，仙和妖都是靠不住的，终究只有人才关心人间的事。

Support Social Share for Jekyll

Thu, 21 Jan 2016 03:33:10 +0000

One of the most important method to get a post more attention is to share it to the social media. Such a feature is must for my blog site too. Today I will briefly introduce how to add this feature to the jekyll supported github page.

Step 0 Should I use a shortUrl?

It is very common to use shortUrl in Twitter posts due to its previous 140 character limiations, but the fact is, most of these limitations already become history thanks to technology improvements. For example, Twitter and Weibo both now internally support their own shortUrl features, so a third part shortUrl service is no longer a necessity. So I decided to just use the origin post url for share purposes.

Step 1 Create a share.html template

Thanks to Wenli Zhang’s post, it is a very good guidence to setup the sharing feature. I have comment out everything related to the shortUrl. To add a new share site, check out the code below.

<a class="social-share-element" id="social-weibo" href="http://v.t.sina.com.cn/share/share.php?title=来看看+%40[YOUR_WEIBO_USERNAME]+的博文吧：Support Social Share for Jekyll&url=http://embolon.github.io/blog-setup/2016/01/21/support-social-share-for-jekyll.html" target="_blank" title="Share this post on Sina Weibo">Weibo</a>

Different SNS sites have very similar sharing templates. For more information, please check my site’s source code (/_includes/share.html). At last, don’t forget to include share.html into _layouts/post.html.

TBD. Will update soon.

Find good looking icons.
Learn to modify css styles.

Step 3 Alternative Services

I have later found that services such as AddThis and JiaThis can provide a much easier solution to social network sharings. I used AddThis for my English posts and JiaThis for my Chinese posts. It is very straightforward to implement these two. Go to their websites. Use their GUI tool to design your share buttons. Then copy and paste the generated code to _layouts/post.html as suggested.

Setup tags and categories for Jekyll

Wed, 20 Jan 2016 03:46:50 +0000

Previously we setup the Disqus comment feature to the blog site, this time I am going to add tags and categories pages. Although there is no limitation on how many categories a post can have, I would consider category as a directory that a post belongs to only one category. As for tags, it is perfectly OK for one post to have multiple tags.

Step 1 Add tags in a post

Adding tags in a new post is easy. Just includes the tags in the front matter like this.

---
...
tags:
- jekyll
- github
- tags
- categories
...
---

Since space might bring issues in the future, if one the tag contains space, it is better to switch space into dash. For example, a tag “github page” should be “github-page”.

Step 2 Show the tags and categories on a post

It would be really nice to show categories and tags parallel to time right under the title of the post. So after trying a bit, I came up with this code to insert after the “time” and “author” session in the header part. This code can show both categories and tags like this: “Jan 19, 2016 | blog-setup | github jekyll tags categories”, where the category and tags can be clicked to go to their links.

    
{ % if page.categories % } | <a href='/categories/#{ {page.categories} }'>{ {page.categories} }</a> { % endif % }{ % if page.tags % } | { % for tag in page.tags % } <a href='/tags/#{ {tag} }'>{ {tag} }</a> { % endfor % } { % endif % }

Now, the tags and categories will show up on a new post. But we still need a tags and a categories page to show all the posts like a catalog.

Step 3 Create tags and categories pages

Lazy me, here I just copied other people’s tags.md to my own repo and it worked. And I copied this tags.md to categories.md and changed all “tags” into “categories” to make categories work. Most importantly, Github Page does not support many plugins, so we can only provide this tags and categories page in a static way. If a solution propose using some customized tag plugin, changes are, it might not work on Github Page. Secondly, since previously in the post.html we set the tags and categories link to be ‘/tags/#{ {tag}}’ and ‘/categories/#{ {categories}}’, we must add “permalink: /tags/” or “permalink: /categories/” to the tags.md and categories.md to make the two pages like a directory.

For detailed codes, you can check Joe Kampschmidt’s post. It is very helpful when I setup the tags and categories for my blog site.

Disqus comments support for jekyll

Mon, 18 Jan 2016 00:16:57 +0000

It is really nice to have some comment support for this blog, so I have googled around and added this Disqus support. Here, I documented the steps.

Step 0 Register the blog site on Disqus

Disqus is a pretty popular discussion and comment system online. It is pretty simple to set up for jekyll. We will first sign up an account on Disqus, and then register my blog site. The site registration requires a shortname, which does not seem to be connected with the actually site url, but I am not sure. After the registration, Disqus will lead us to a page with Universal Code, that will be used to insert in the “comment” session of our site.

Step 1 Edit the blog site

We will modify _layouts/post.html to include a “comment” session and create a _includes/disqus.html that holds the actual “comment” session Universal Code.

_layouts/post.html
<article>
  ...
  # header
  # content
  <div class="comments">
    { % include disqus.html % } # NOTE, no space between { and %, % and }
  </div>  
</article>


_includes/disqus.html
{ % if page.comments % }
<div class="comments">
  <div id="disqus_thread"></div>
    <script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */

    var disqus_config = function () {
        this.page.url = '{ { site.url } }{ { page.url } }';  // Replace PAGE_URL with your page's canonical URL variable
        { % if page.disqus_identifier % }
        this.page.identifier = '{ { page.disqus_identifier } }'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        { % endif % }
    };
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
    
        s.src = '//SITE_SHORTNAME.disqus.com/embed.js'; // put your site-shortname that is registered on Disqus here
    
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
{ % endif % }

The liquid template will read page front matter to parse into variables like page.url, page.layouts, page.comments. A typical way to use the liquid template is like this: { % if page.comments % } { % endif % }. This works like the C macro #ifdef and #endif. To enable such page.comments switch, we will further include the “comments” into the post front matter.

_posts/2016-01-17-This-is-a-test-post.md
---
layout: post
title:  "This is a test post"
date:   2016-01-17 18:16:57 -0600
categories: default
comments: true
disqus_identifier: 000000000001
---

## Testing

Optional Disqus Identifier

Since a page url can change when we decided to change the title of the post, a Disqus Identifier is better not set to the page url. People suggested different solutions to this situation including generating random numbers to assign to the new post or maintain a counter of the number of the posts. For the former one, as long as there are no random number conflicks, that is, a new generated number does not equal to any previous post, it should be fine. This is an easy soluation but not very reliable. The latter one can avoid possible identifier conflicks but will require the counter to be stored, which will add a little complexity.

Thanks to Ankur Gupta’s post on Perfectly Random. I found it very helpful when I set up the Disqus comments on my blog site.

Blog Setup

Sat, 16 Jan 2016 17:04:38 +0000

Step 0 Have a Github account

If you write programs, chances are, you already have an account. But no worries if you do not, it is super easy to setup a github account and you will find it very useful in the future.

Step 1 Create a Github Page repository

Assume you already know how to create a new repository on Github. The name of a Github Blog repository is usually like USERNAME.github.io, where USERNAME is user customizable. We can add a index.html into the repository for testing. Note that a blog page should use the normal master branch, but a project page should use a special gh-pages branch instead.

git clone https://github.com/USERNAME/USERNAME.github.io
cd USERNAME.github.io
echo "Hello World!" > index.html
git add index.html
git commit -a -m "Initial commit"
git push -u origin master

Once the repository is created, we can visit http://USERNAME.github.io to check out the new blog site. If you see a “Hello World” appear on the left cornor of the blog site, you are done!

Step 2 Setup jekyll

This step will enable us to use jekyll to locally run and test our blog before uploading. I would recommend using either a Ubuntu or Mac machine rather than Windows, since I run into various issues trying to get jekyll work on my cygwin terminal. Here, I used a Ubuntu 12.04 as an example.

Installing jekyll

Since the ubuntu default ruby and jekyll packages are out-dated, I used the rvm – Ruby Version Manager to install ruby. And using rvm can avoid issues such as requiring root privilege when installing gem tools.

# install RVM
gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
curl -L get.rvm.io | bash -s stable --auto

# install ruby
source ~/.rvm/scripts/rvm  # this will enable rvm and its enviroment settings
rvm install ruby-VERSION   # we can choose VERSION, if left none then will install the default version

# install jekyll
gem install jekyll

My current versions:

ruby -v
ruby 2.2.1p85
jekyll -v
jekyll 3.0.1

Now we have successfully installed jekyll!

Step 3 Edit your blog site locally

Now that we have blog repository set up and jekyll installed, we can start to edit our blog site locally. Assuming our local repo at USERNAME.github.io, we can add the jekyll base theme to it.

cd USERNAME.github.io
git rm index.html  # remove the previous index.html page
jekyll new .       # initiate jekyll theme
jekyll serve       # start jekyll serve

Now we can visit localhost:4000 to check our local blog site. It should be the standard jekyll theme. We can edit _config.yml to change the blog title, email, twitter and github account information, etc. There are a lot of things we can change to make our blog better. Just google around to find new jekyll themes and follow their instructions.

Once we have picked the ideal jekyll theme, it is time to bring the blog site online. One of the good thing I like Github page is that we can upload our blog site by simply pushing local repo to the remote.

git add ALL_FILES
git commit -a -m "SOME COMMENT"
git push -u origin master

It’s Alive!

Step 4 Start posting

Now we are good to post!

Let there be light!

Fri, 15 Jan 2016 21:21:38 +0000

GENESIS 1:3

“And God said, Let there be light: and there was light.”

In the beginning God created the heaven and the earth. And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. And God said, Let there be light: and there was light. And God saw the light, that it was good: and God divided the light from the darkness. And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.