如同第一节课的讲义所述，Jekyll使用html模板来建立网站，其模板就放在了_layouts和_includes两个文件夹下。
同时，jekyll使用markdown来写博客，其博客就放到了_posts文件夹下。所有的配置都在_config.yml文件中。
☐ 要在github中使用jekyll，我们先要在github中新建一个project，将其命名为your_account_name.github.io.
添加一下readme和license。
☐ 将新的project复制到你的文档中
cd ~/Documents/
git clone https://github.com/pokemon-liyc/pokemon-liyc.github.io.git
☐ 现在，用ST3打开你的网站文件夹，我们来新建几个文件夹，分别是：
css, image, js 可以直接从上节课的目录中copy过来
_layouts
_includes
category1/_posts + index.html
css
js
image
.gitignore
Gemfile
index.html
_config.yml
☐ 在.gitignore中添加：_site/
☐ 在Gemfile中添加：
source "https://rubygems.org" gem "github-pages"
☐ 我们现在在layouts里添加第一个HTML模板，把它叫做default.html：
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<title>{\{ page.title }}</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/liyc.css">
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<script type="text/javascript" src="/js/jquery2.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<!-- 方便google搜索并定义你的网站 -->
<meta name="description" content="{\{page.description}}">
</head>
<body>
<!-- Navigation bar -->
<div name="this is navigation bar">
{ \% include nav_bar.html %}
</div> <!-- END Navigation bar -->
<!-- Header -->
<div name="this is header">
{ \% if page.header == "main" %}
{ \%include main_header.html %}
{ \% elsif page.header == "category1" %}
{ \%include cat1_header.html %}
{ \% else %}
{ \%include cat2_header.html %}
{ \% endif %}
</div> <!-- END Header -->
<!-- content -->
<div name="content" >
{\{ content }}
</div> <!-- END content -->
<!-- footer -->
<div name="footer">
{ \%include footer.html %}
</div> <!-- END footer -->
</body>
</html>☐ 我们现在在includes里添加nav_bar.html. 内容与第三节课的navbar一样。但是，现在，每次我们写一个新的博客时，就不用总是copy这个navbar的code了。这就是HTML模板的好处。
☐ 我们现在在includes里添加main_header.html,cat1_header.html,cat2_header.html. 这个header也跟上次课的一样。
☐ 我们现在在includes里添加footer.html。不用说了，还是一样的。
☐ 回到你的主页，index.html. 为了与上节课一样，我们这里还是直接copy上次的内容：
---
layout: default
title: Everything about me
header : main
---
<div class="row" style="margin-top:30px;">
<div class="col-xs-3">
<!-- normal -->
<div class="ih-item circle effect1"><a href="#">
<div class="spinner"></div>
<div class="img"><img src="./image/2.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end normal -->
</div>
<div class="col-xs-3">
<!-- colored -->
<div class="ih-item circle colored effect2 left_to_right"><a href="#">
<div class="img"><img src="./image/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a></div>
<!-- end colored -->
</div>
<div class="col-xs-3">
<div class="ih-item circle effect5"><a href="#">
<div class="img"><img src="./image/5.jpg" alt="img"></div>
<div class="info">
<div class="info-back">
<h3>Heading here</h3>
<p>Description goes here</p>
</div>
</div></a>
</div>
</div>
<div class="col-xs-3">
<div class="ih-item circle effect6 scale_up"><a href="#">
<div class="img"><img src="./image/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
</div>
</div>好，现在运行jekyll，看看效果。
bundle exec jekyll serve -w
部署到github上：
git add *
git commit -m “my website”
git push origin master
主页有了，我们现在来做文章列表。
☐ 在layouts中新建post_list.html.
---
layout: default
header: category1
---
{ \% assign cat = page.url | split:'/' | last %}
{ \% for post in site.categories.[cat] %}
<div class="container container-fluid" style="margin-top:15px;margin-bottom:20px;">
<div class="row">
<div class="col-xs-9 list_post_box" >
<div class="col-xs-3 ">
<img class="img-rounded img-responsive " src="/image/{\{post.header_image}}" style="height:180px">
</div> <!-- END image -->
<div class="col-xs-9 abstract ">
<div class="row date_align_bottom" >
<div class="col-xs-8">
<h3 style="margin-top: 0px;"><a href="{\{ post.url }}">{\{ post.title }}</a></h3>
</div>
<div class="col-xs-3">
<h4 style="text-align:right;margin-bottom: 0px;"> {\{ post.date | date_to_string }}</h4>
</div>
</div>
<hr style="width: 100%; color: black; height: 1px; background-color:black;margin-top: 0px;margin-bottom: 0px;" />
<h4>{\{post.abstract}}</h4>
</div> <!-- END abstract -->
</div> <!-- END list post box -->
</div> <!-- END outter row -->
</div><!-- END container -->
{\% endfor %}
{\{content}}☐ 我们要给这个文章列表配一个header，我们来编辑cat1_header.html。直接把上节课我们文章列表所使用的header复制上去即可。
☐ 接下来打开category1/index.html，你只需要写一下front matter就行了，例如：
---
layout: post_list
title: post_list
---☐ 这个时候，这个页面是空的，因为我们还没有添加任何post。现在，在category1/_posts/里面，添加几个post，例如, 2016-07-22-something-here.md:
---
layout: post
title: post1
abstract: sdfsdfsdfsdf
header_iamge: post1.png
---☐ 我们再来在layouts下添加一个模板，叫做post.html
---
layout: default
---
<div class="container container-fluid" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-9">
<h1>{/{ page.title }}</h1>
<hr>
{/{ content }}
</div>
<div class="col-xs-3 hidden-xs hidden-sm" id="post_sidebar">
{ /% include side_bar.html %}
</div>
</div>
</div>☐ 我们在includes下添加一个side_bar.html:
{ /% assign total = page.keywords.size|minus:1 %}
{ /% if total > 0 %}
<ul class="nav" data-spy="affix" data-offset-top="320" style="top: 30px;">
{ /% for i in (0..total) %}
<li ><a href="#" style="font-size:20px"> {/{page.keywords[i]}} </a></li>
{ /% endfor %}
</ul>
<script>
$('body').scrollspy({
target:'#post_sidebar',
offset:40
});
</script>
{ /% endif %}在一个post中，我们就可以这样使用了：
---
layout: post
title: post3
abstract: this is post 3 whatever
header_image: pikachu.png
header: category1
keywords:
- keyword 1
- keyword 2
- keyword 3
anchors:
- a1
- a2
- a3
---
# keyword 1 {#a1}
# keyword 2 {#a2}
# keyword 3 {#a3}
好，我们的web design课程就到这里结束了。主要是教会了大家：
-
如何使用html模板
-
如何在github上部署自己的网站
-
一个网站的布局
-
怎么做一个简单的博客