标签： 前端开发
github pages
github page是github提供的一种可以显示自己git库上网页的服务。
如何使用githbu pages
有两种方法:
第一种，在github上创建新的仓库，命名为username.github.io，username就是自己注册的用户名，master分支根目录上创建index.html。打开网页username.github.io，就可以看见新建的index.html。
第二种，没有命名限制，可以基于现有的库来创建，当然也可以开新的仓库 。新建orphan分支git checkout --orphan gh-pages，分支名一定要是gh-pages。然后在username.github.io/reposname上就可以看见根目录上的index.html，reposname就是库名。
什么是jekyll
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。
以下是内容都是介绍jekyll的简单用法，详细请看官方文档
使用jekyll在github上搭建个人博客
github pages 支持jekyll，因此可以直接将源码上传到github pages上，会自动解释并生成网页。
1.目录结构
mulu.png
_name 的是jekyll的默认文件/文件夹，可通过liquid读取_data/ 里面的文件可通过site.data.xx来读取_includes/ 里面的文件可被引用到模板上_layouts/ 模板存放的地方_posts/存放博文，可通过page.xx来读取相应数据_site/运行生成的文件存放在这里，自动生成_config.yml配置文件，里面的属性可通过site.xx来读取index.html主页404.html一定要是404.html才能作为404页面
liquid的语法可参见该文: liquid用法笔记
2.配置文件_config.yml
有很多配置，详细参见官方文档，简单的配置如下
encoding: utf-8 //网页的编码
baseurl: /reposname //用于site.baseurl, 适应github pages的路径, 不过好像不用这个，直接用相对路径可以。
permalink: pretty //生成路径的方法，详细见文档
markdown: kramdown //github 指定的markdown内核
kramdown:
input: GFM //github markdown 写法
3.模板_layouts
_layouts/下新建default.html
<!DOCTYPE html>
<html >
<head>
<title>{{page.title}}</title>
<!-- 调用page.title变量 -->
</head>
<body>
<main class="container">
<div class="wrapper">
{{content}}
<!-- 调用该模板的文件的主内容全部显示在content里 -->
</div>
</main>
{% include sidebar.html %}
<!-- 引用_include/sidebar.html -->
</body>
</html>
4.index.html
---
layout: default
title: Hello World
---
<p>hello world</p>
<!--
虚线中间layout 表示要调用的模板，其他变量可通过page.xxx来引用。
虚线下面的内容为主内容，显示在content中。
-->
现在打开github page上的网页(username.github.io 或者 username.github.io/reposname 视乎你用哪种方法创建github pages)应该就能看见hello world。
5.post博文
在_posts文件夹里创建文件2016-05-01-this-is-post.html
注意post的命名格式是yyyy-mm-dd-title.html/md，之后生成链接可以用post.url来指向博文
//2016-05-01-this-is-post.html
---
layout: default
title: this is post 1
---
<p>this is post one</p>
修改index.html，加入新博文的链接
//index.html
---
layout: default
title: Hello World
---
<h1>hello world</h1>
{% for post in site.posts %}
<a href="{{ site.baseurl }}{{ post.url }}"> {{post.title}}</a>
{% comment %}
注意site.baseurl 与 post.url中间没有 "/" ,因为post.url自带了"/"
{% endcomment %}
{% endfor %}
6.命令行
jekyll serve --baseurl "" --watch #本地测试
jekyll build #生成文件
--baseurl "" 是为了发布的地址设为/，方便测试
--watch 就是自动监控文件变化了，使用中文件是刷新了，但网页不会自动刷新，需要配合gulp和chrome插件LiveReload来使用,gulp的配置可以参考我的。
var gulp = require('gulp'),
refresh = require('gulp-refresh')；
gulp.task('refresh', function(){
refresh.listen();
gulp.watch('blogJekyll/_site/**/*.*', function(){
gulp.src('blogJekyll/_site/**/*.*')
.pipe(refresh());
});
});
build之后可以将_site文件夹内里的内容发布到gh-pages上，然后上http://username.github.io/baseurl/就可以看到了，不过好像github支持解析jekyll，只要直接将完整的项目上传到gh-pages上就可以
7.语法高亮
想要引用的代码块语法高亮，要引用外部的资源
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.1/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
这样就有语法高亮了，其实也可以根据生成后的DOM元素自己加CSS.
例如code { background: #f0f0f0 ;}
结束
以上就是jekyll的简单用法，大家可以看看我创建的博客，很简单的，一看就懂。
源码点这里
也可以看看别人的jekyll模板
网友评论