搭建你的技术博客： 基于GitHub Pages + Jekyl

前言

如果你想搭建一个blog网站，我想你会遇到两个问题

• 花钱买web server
• 花时间学习网站开发的基本知识（html， css， javascript等）

有没有办法能快速免费搭建一个blog网站呢？答案是肯定的 - GitHub Pages

我的这个blog就是基于GitHub Pages + Jekyll搭建的。简单普及一下名词。

• GitHub Pages就是GitHub免费提供的，可以用来保存你的网站的一个服务
• Jekyll是一个静态网页生成器， 支持markdown，会自动把你的markdown的文本转成网页

下面我就是详细的把我搭建blog的整个过程，跟大家分享下，希望对大家搭建blog有所帮助

具体过程

• Git安装
• Jekyll安装

gem install jekyll

• 创建一个博客

jekyll new blog
jekyll serve // 在浏览器打开 localhost:4000

• 用你的GitHub的账号创建一个你的账号.github.io的仓库（比如derekcoder.github.io)
• 把你的blog关联到你的仓库。然后提交。

cd blog
git init
git commit -m "first commit"
git remote add origin https://github.com/derekcoder/derekcoder.github.io.git
git push origin master

• 打开网站：http://derekcoder.github.io. Now everything is done.

添加评论功能

• 创建一个disqus.html, 把它放在_includes文件夹下。注意修改disqus_shortname

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'derekzhoublog'; // required: replace example with your forum shortname
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (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>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

• 修改_layouts文件夹下面的post.html,在{ { content } }下面加一句 { % include disqus.html % }

总结

• jekyll提供了很多主题模板。 你在GitHub看到喜欢的也可以直接fork修改
• 因为要用markdown语法写作，要简单学习下markdown语法。推荐使用Atom Editor