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

前言

如果你想搭建一个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

添加评论功能

  • 创建一个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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容