搭建你的技术博客: 基于GitHub Pages + Jekyll

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

  • 花钱买web server
  • 花时间学习网站开发的基本知识(html, css, javascript等)

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

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

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

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

一、具体步骤

1. Git安装

2. Jekyll安装

1
gem install jekyll

3. 创建一个博客

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

4. 关联GitHub账号

  • 用你的GitHub的账号创建一个你的账号.github.io的仓库(比如derekcoder.github.io)
  • 把你的blog关联到你的仓库。然后提交。
1
2
3
4
5
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

5. 打开网站

http://derekcoder.github.io.

二、添加评论功能

  • 创建一个disqus.html, 把它放在_includes文件夹下。注意修改disqus_shortname
1
2
3
4
5
6
7
8
9
10
11
12
<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