Github+Jekyll —— 创建个人免费博客（四）jekyll第一个页面

摘要：

本文中我将介绍一下如何在github上搭建个人Blog（博客），也顺便让我们掌握一下github Pages功能，另外还涉及到Jekyll技术。

===============================分割线====================================

在前面的文章中我们已经完成了开发个人博客的所有环境配置工作，接下来我们就要开始在这些环境上尝试搭建我们的第一个个人博客了。

一、创建博客本地书写目录：

打开命令行，定位到本地用于存放博客工程的目录（可以自定义），然后运行创建jekyll工程目录的指令“jekyll new "工程文件夹名称"”创建工程：



创建成功后，可以在windows资源管理器下查看此工作目录，发现自动创建了一个My_Blog文件夹，且文件夹下生成了一些文件，这些就是博客的基本文件：



二、启动jekyll管理进程：

以上步骤完成了工程的创建，那么接下来我们尝试启动jekyll的管理进程（相当于网页开发中常用到的apache）,然后在浏览器中查看效果。启动的指令是“jekyll
serve”：



好事多磨，像这样的事怎么可能一次性成功嘛，遇到问题没关系，解决了就好，其实这是一个很低级的错误，我们很容易看出导致错误的原因是找不到文件，其实是因为我们没有进入到工程目录下再运行指令：



正常启动管理进程后，我们可以看到日志中有服务器访问地址：http://127.0.0.1:4000/，直接在浏览器中访问此地址，看到如下结果则表示启动成功：



三、个性化设置：

由于我们启动进程之前并未对jekyll自动生成的博客框架进行格式修改，所以显示出来的结果都是使用默认值设置的。我们在将第一版博客发布到github之前，还需要进行一些个性化的设置操作（也可以保留默认设置直接发布），比如：博客名称还有个人信息等。

这些设置的默认值其实是在_config.yml中配置的:



我们可以稍微对这个配置文件做一些修改，由于修改不是实时同步的，而是在启动进程时读取之后就不再改变的，所以我们修改完之后，回到命令行按Ctr + C结束进程，然后再重新启动管理进程：



在浏览器刷新一下，可以看到修改内容已经生效：



我们发现_config.yml文件只能修改一些边缘资料的内容，而网页中间的主体部分，其实是在工程根目录下的index.html的内容，我们也可以尝试修改一些内容：

<span style="font-size:18px;">---
layout: default
---

<div class="home">

<h1 class="page-heading">第一个博客页面</h1>

<ul class="post-list">
{% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<h2>
{{ post.excerpt }}
</h2>
</li>
{% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div></span>

修改了内容的标题和添加一个{{ post.excerpt }}这是内容简介（这是基于liquid的模板语法），它所引用的内容其实就是_posts目录下面.markdown文件中的内容，具体的调用关系后面再做详细解析，这里我们只是查看效果：