用通俗的语言带初学者玩个人博客

来源：互联网发布：广州趣丸网络校招编辑：程序博客网时间：2024/05/08 21:28

因为刚学web前端不久，之前有了解了一下关于jekyll搭建博客，网上也搜过不少教程，google出来的，感觉都是大同小异的，基本上都是只讲到博客模板套上，然后就不了了之了，对于一个新手而言，留下了太多的疑问，还需要查阅各种资料。
我不敢保证新手看了这篇文章后，就不需要再查阅其他资料了，但自我感觉比普遍搜到的要适合新手理解一点。

说明：本文适合新手刚接触博客阅读，当然我是不怕高手来吐槽的！

创建一个库

第一种方法

在Github上新开一个库，名字叫做username.github.io，然后当别人在地址栏输入相应url的时候就可以访问进来了。
关于这个方法的具体步骤，我开头讲的google上搜到的答案大同小异就包含了这一点，“jekyll”和“github”这两个关键字一打，出来一大篇教你建一个github pages的答案，所以我就不再这伤感情了。

第二种方法

就跟我那样，简要说一下步骤：
1. 在github上新建一个项目,注意和第一种方法不一样，这里你没必要一定要用usernam.github.io，可随意取名，我取名blog；
2. 打开Git Bash, git clone你的项目，然后Git Bash进入项目的文件位置，输入git checkout -b gh-pages创建一个gh-pages分支。（github可以把gh-pages分支的内容生成出一个静态网页）
如果用此方法，后续的博客的更新要在gh-pages分支下完成。可将此项目的默认分支设置为gh-pages

在本地安装jekyll

这个读者google搜一下，挺容易的，我前期装的时候没有遇到什么问题。

设定目录结构

这里才是我要说的重点。
把自己的库clone到本地后，建立如下目录结构：

├── README.md├── _config.yml├── _includes│   ├── footer.html│   ├── header.html│   └── nav.html├── _layouts│   ├── base.html│   ├── page.html│   └── post.html├── _posts├── index.html├── pages│   └── atom.xml├── assets│   ├── css│   ├── fonts│   ├── img│   ├── js└── sitemap.txt

这个目录结构是我自己设定的，也可以有不同的目录结构，看[官网][2]。—我学习下来，感觉自己设定，能更好的理解jekyll的原理，建议一步一步自己设定。

接下来我主要解释这里面每一个目录的功能。
新手来倒腾博客，肯定希望把这些疑问解决了。所以下面的这些请看仔细。

配置文件

_config.yml里写有整个站点的主要配置项，我的如下：

# 作者信息author:   name: 走叉文武  email: zhaobin0511@qq.com    link: http://mrzhaoben.github.io  weibo: http://weibo.com/u/5658107209  github: http://github.com/mrzhaoben# 站点信息title: 走叉文武的博客 description: 走叉文武的博客url: http://mrzhaoben.github.io/blogrss_url: /pages/atom.xml# avatar头像及Faviconavatar: /assets/img/avatar.pngfavicon: /assets/img/favicon.ico

下面我用最通俗的方式解释一下这个配置文件。
请你先打开_includes文件下的nav.html，你应该可以看到有好几个{/{site.xxx}/}的形式(两边都是两个括号，中间没有“/”，此处是为了避免被解析成配置文件中对应的内容)。
例如{/{ site.author.email }/}就是上面配置文件中作者信息下面的email
{/{ post.title }/}就是上面配置文件中站点信息下面的title

你可能也还看到了，{/% for category in site.categories %/}（“/”同上原因），这个其实是在遍历每篇_post中文章里面的category，后面博客存放中会详细介绍_post中的文章。

博客存放

_posts下的所有目录中的所有博客，都会被Jekyll处理成为静态的html文件，然后放在_site下。我这里没有_site目录，是因为我在.gitignore文件中把这个目录屏蔽掉了，它不会上传到Github上。

_site/_drafts/.DS_Store

以上是我的.gitignore文件内容。

在_posts下的符合YYYY-MM-DD-xxxxxx.md的文件，都会被Jekyll认定为博客内容。也可在_posts下又新建了一些文件夹进行分类，注意可以方便自己本地管理博客。

在上述这些文件中，必须先定义一些配置项，例如这篇博客的md文件中，开头是这样的：

---layout: post                                   #这个博客的布局文件title: 用通俗的语言带新手玩博客                   #博客标题category: 前端之路                              #博客分类tags: Jekyll                                   #博客标签keywords: Jekyll,Github                        #自定义常量description:                                   #自定义常量---

注意，上面用到的- - -线必须要有，而且前面不能有空格
现在你再回过头看下前面那节讲的关于category的，想必应该可以理解了吧。

模版文件

剩余的目录，基本都属于模板文件了，我解释一下各自的作用：

_includes 可以在模板中随时包含的文件，其实就是在_layouts文件夹下面的html里面的组成部分
_layouts 布局文件，在博客头配置中可以选择
pages 站内固定的页面
assets 公共资源，包括js,css,img等，还有我博客中调用的图片，我都放这里
index.html 站点的首页，整个站的入口文件
sitemap.txt 给搜索引擎看的，如何爬取这个站

创建自己的主题

上面讲了如何布局好站内文件结构，接下来主要就是如何创建一个自己的主题了。

布局文件是整个主题最重要的文件，这些文件告诉Jekyll如何去形成一个html页面。

首先我说一下我最基础的page.html文件，因为它决定了入口文件index.html的布局。

---layout: base---<article id="post__content">  <h1 id="post__title" data-identifier=    "{/{ page.date | date: "%Y%m%d" }/}">{/{ page.title }/}</h1>  {/{ content }/}</article> <!-- end #post__content -->{/% include share.html %/}{/% include disqus.html %/}

从这里可以看到这个文件写起来一点都不复杂，但是为什么开头还有个layout呢？因为它也不是最基本的布局文件，最基本的是base.html，我们看一下它的内容。

<!DOCTYPE html><html>  <head>    {/% include header.html %/}  </head>  <body>    {/% include nav.html %/}    <div id="post">      <div id="pjax">        {/{ content }/}        {/% include copyright.html %/}      </div> <!-- end #pjax -->      <div id="post__toc-trigger">        <div id="post_toc_ico">博文目录</div>        <div id="post__toc">          <span id="post__toc-title">Table of Contents</span>          <ul id="post__toc-ul"></ul>        </div>      </div>    </div> <!-- end #post -->    {/% include footer.html %/}    {/% include googleanalytics.html %/}  </body></html>

这个文件就更像一个HTML文件了，用PHP或者Python写过web应用的人看到{\% %}这样的标签应该不陌生，这不就是模板标签嘛。其实Jekyll也是借用了一下模板系统的，官网说明在[这里][3]，看到开头第一句讲的它用了[Liquid][4]了吧。如果Jekyll的文档不能满足你的话，可以去Liquid那里查查。

我解释一下base.html中几个标签的功能。

{\% include header.html %} 从_includes中把header.html包含进来放在这里
{\% include nav.html %} 同上
{\{ content }} 这句的作用是将继承这个Layout的文件中的代码，放在这里

所以再看page.html文件就很容易了，它就是把配置项下面的内容，填补到base.html中的{\{ content }}处形成了一个文件。那么page.html中的{\{ content }}做什么用呢？因为别人也可以以page.html来作为自己的布局文件。

入口文件index.html就是这么干的：

layout: pagetitle: 首页...

这里看到选择了page作为布局文件，那么title干嘛用的呢？其实它是在被包含的header.html中被用到了。来看看header.html怎么写的：

<meta charset="utf-8"><title>{\{ page.title }} | {\{ site.title }}</title><meta name="author" content="{{ site.author.name }}">{\% if page.keywords %}  <meta name="keywords" content="{{ page.keywords }}">{\% endif %}{\% if page.description  %}  <meta name="description " content="{{ page.description  }}">{\% endif %}...

这里又使用了一些新标签——{\{ }\}，这个标签就是用来书写变量的，通过在配置处配置变量，或者使用系统的自定义变量，可以轻松改变页面内的一些元素或者内容。

系统变量查询可以去[这里][5]

其实整个主题书写就是这么简单，多动手很快就会明白的。如果还有疑惑的地方，可以学习试着去参阅相关文档，也可以联系我，只要我能解决。

本地预览及提交

本地预览自己的修改很容易，只要进入username.github.io目录，执行

jekyll serve

然后访问http://localhost:4000就OK了

自己预览过没有问题以后，就提交到服务端吧，Git三步走

git add .git commit -m "xxx"git push

其他

我觉得自己的这个主题设定的算是比较好修改和移植的了，如果大家有什么问题，可以尽管问。

另外一些特别的功能，比如三栏、评论、谷歌分析，这些都不难，相信你稍微打开Github读一下这个主题的代码就很快明白了。

代码地址戳这里
个人主页：http://mrzhaoben.github.io

0 0