Fork me on GitHub

林德熙

If you have any language confusion,please talk to me lindexi_gd@163.com.

简单搭建自己的博客

本文主要讲如何使用Jekyll在Github搭建博客,其实我们还可以在国内网站搭建,本文是记下我从不知道github搭建博客,到成功搭建了博客遇到的问题

我在github建立了博客,博客地址:lindexi.github.io

使用技术得到ddatsh.com的支持,对他表示衷心感谢

搭建一个博客需要的技术很少,不需要在电脑安装什么,直接Clone一个主题,然后修改个人信息,放入博客就好。

首先解压一个主题到我们的文件夹,我们不需要安装复杂的技术,目标就是很简单如何使用。

Jekyll的主题可以到任意的Github上用Jekyll博客的git上,去clone。也可以到网站http://azeril.me/blog/Selected-Collection-of-Jekyll-Themes.html 还有 大神收藏的主题 jekyll主题,如果觉得不好看可以自己写,自己写需要复杂技术,建议直接用大神写的。

自己做一个主题很简单,参见:jekyllcn.com/docs/templates/

下载完主题,我们需要打开Github或git.oschina.com。

我们在github建立一个项目,这个项目需要建立一个空白项目,然后选择Setting,设置Github Page,下图是我设置好的

设置不需要管什么,直接就clone库,把我们解压出来的主题放进去

主题包含的文件夹有

├── _config.yml  配置
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes    在任意页面可以使用的页面
|   ├── footer.html  这是我主题,大家可以自己写自己需要的
|   └── header.html  这是我放在每页开头
├── _layouts
|   ├── default.html 所以页面继承的页面,在页面写 layout:default 就是使用他
|   └── post.html    博客继承的html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile  文章格式是 ---博客  格式有很多,可以在官网看
├── _site
└── index.html     

文件的作用可以到官方:http://jekyllcn.com/docs/structure/ ,写的很好,大家很容易就知道他是什么,如果有不懂的,可以联系lindexi_gd@163.com

我们做的就是修改下信息,把我的名字改为你的名字,其他的需要改的很少。

写博客

先删除博客的内容,博客放在_post,里面都是我的,你可以保留来,怕不知博客格式,博客格式在后面会写。

我们可以直接在博客文件夹写博客,博客支持很多类型,可以用 Markdown 编写,也可以用 Textile 格式编写

首先创建一个博客,需要安装文件名有开始是YYYY-MM-DD-博客名称后缀可以使用很多,在于用什么写。

但是和我们平时写的博客不太一样,需要在开头写一些让我们的Jekyll可以把博客转换

最简单是加上

---
layout: post
---

layout是指定,指定 _layouts 目录下的某个文件,我们这里指定post文件,post文件可以使用{{ content }}标签来调用内容,就是把博客内容放在post文件代换标签

layout还可使用include来包含 _includes 文件夹中的文件。文件夹主要放的是功能的东西,可以是播放器,或者评论还是flash

做完之后我们还需要写摘要和其他信息,我的模板使用的区分摘要是`

`

写出来的博客:

---
layout: post
---

摘要
<!--more-->

<div id="toc"></div>
正文

我们可以在文章定义区分摘要和正文,在头写上excerpt_separator

---
layout: post
excerpt_separator: <!--more-->

<div id="toc"></div>
---

摘要
<!--more-->

<div id="toc"></div>
正文

不想在每个文章写摘要是什么,可以进行全局,全局使用_config.yml添加代码

excerpt_separator: "<!--more-->

<div id="toc"></div>"

大概这样就可以把我们的博客写上,并且发在github,当然需要上传

写完上传就可以看到。

我们需要访问网站才可以,那么我们的网站是什么,其实很简单。假如我们的新建项目是lindexi

github名是lindexi,可以通过https://lindexi.github.io/lindexi 来打开

https:// 用户名.github.io/项目

统计访问

在百度统计注册,然后添加代码到_layouts/default.html

先在百度新增网站,然后获得网站代码

复制的地方和下面代码相同

<script src="{ { site.url } }/js/all.js"></script>

我们还可以让百度收录博客,需要我们使用 http://zhanzhang.baidu.com

我们可以在每个页面的js,我的所有的js都在一个文件,或在default.html上写百度给的

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


删除主题信息

如果需要把我信息去掉,换为你的,那么就继续看

首先打开_layouts/default.html文件,可以用vs,里面看到footer,就是最下面

代换为你需要写的,在每个页面都有这个页面

打开index.html

修改网站名称为你的

---
layout: default
title: 网站名称
---

选择一个128*128的ico格式作为你的网站图片,代换favicon文件

打开pages\about\index换为你的信息

打开_config.yml修改网站名称为你的,接着如果你仓库不是在xxx.github.io 那么如果你的仓库是 lindexi ,那么修改url为/lindexi。如果你的仓库是/xx,那么修改url为xx

author: lindexi  这里修改你的名字
url: /lindexi    修改仓库

加上Fork me on Github

很多博客都有下面这图

那么如何在博客加上Fork me on Github。

首先打开官网https://github.com/blog/273-github-ribbons,可以看到很多样式,我们复制一个,放在default.html

把代码放进去就看到我们博客有很好看的Fork github,需要你把地址改为你的,点击跳转到博客需要把github地址改为自己github

博客评论

我用的是多说,我们需要在http://duoshuo.com/申请账号,然后打开js\all.js

在http://duoshuo.com/添加站点,站点名称假如为lindexi,那么在all.js修改duoshuoQuery为lindexi

其实我们还可以在os.china.net 搭建,我的博客:http://lindexi.oschina.io/,搭建和github相同,他的page在新建项目,上传代码就可以

参见:http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

添加目录

首先添加 jq,建议使用百度的,链接是 http://libs.baidu.com/jquery/2.0.0/jquery.min.js

其他的可以到这个网站下 http://www.jq22.com/cdn/

添加的jq放在 Head ,当然看到这你也是有前端技术,知道一点,head在哪我就不说啦。

首先添加这个代码

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

地址可以自己修改为想要使用的地址。

然后去 https://github.com/ghiculescu/jekyll-table-of-contents 下载 js

地址是 https://github.com/ghiculescu/jekyll-table-of-contents/raw/master/toc.js

下载放在自己的博客,根目录的 js 文件夹里,命名为 toc.js ,如果你的命名和我一样,接下来看起来代码就一样。

在自己博客的head添加引用

    <script src="/js/toc.js"></script>

于是引用了他,接着在需要添加目录的博客,添加下面代码

<div id="toc"></div>
    

然后就可以看到和我博客一样的效果。

但是这时看到目录的表示不是中文,可以打开 toc.js 进行修改

    $.fn.toc = function(options) {
    var defaults = {
      noBackToTopLinks: false,
      title: '这是修改为标题',
      minimumHeaders: 3,
      headers: 'h1, h2, h3, h4, h5, h6',
      listType: 'ol', // values: [ol|ul]
      showEffect: 'show', // values: [show|slideDown|fadeIn|none]
      showSpeed: 'slow', // set to 0 to deactivate effect
      classes: { list: '',
                 item: ''
               }
    },

参见:http://www.jianshu.com/p/6c6d209aa0e3

添加公式

我经常需要添加公式,那么如何添加?

一个简单方法和上面一样,添加 MathJax

添加这两句在博客开始

    <script type="text/javascript" async src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">

</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

注意小于号和html相同,所以建议使用小于号添加空格

对于_ 也是,需要使用\_,简单方法是用代码把他放在里面

http://www.atjiang.com/markdown-present-math-formula-with-mathjax/

我还推荐一个博客搭建:如何使用LessOrMore这个Jekyll模版

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系