標簽： 前端開發(fā)
github pages
github page是github提供的一種可以顯示自己git庫上網(wǎng)頁的服務(wù)。
如何使用githbu pages
有兩種方法:
第一種，在github上創(chuàng)建新的倉庫，命名為username.github.io，username就是自己注冊的用戶名，master分支根目錄上創(chuàng)建index.html。打開網(wǎng)頁username.github.io，就可以看見新建的index.html。
第二種，沒有命名限制，可以基于現(xiàn)有的庫來創(chuàng)建，當然也可以開新的倉庫 。新建orphan分支git checkout --orphan gh-pages，分支名一定要是gh-pages。然后在username.github.io/reposname上就可以看見根目錄上的index.html，reposname就是庫名。
什么是jekyll
Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產(chǎn)機器。它有一個模版目錄，其中包含原始文本格式的文檔，通過 Markdown （或者 Textile） 以及 Liquid 轉(zhuǎn)化成一個完整的可發(fā)布的靜態(tài)網(wǎng)站，你可以發(fā)布在任何你喜愛的服務(wù)器上。Jekyll 也可以運行在 GitHub Page 上，也就是說，你可以使用 GitHub 的服務(wù)來搭建你的項目頁面、博客或者網(wǎng)站，而且是完全免費的。
以下是內(nèi)容都是介紹jekyll的簡單用法，詳細請看官方文檔
使用jekyll在github上搭建個人博客
github pages 支持jekyll，因此可以直接將源碼上傳到github pages上，會自動解釋并生成網(wǎng)頁。
1.目錄結(jié)構(gòu)
_name 的是jekyll的默認文件/文件夾，可通過liquid讀取_data/ 里面的文件可通過site.data.xx來讀取_includes/ 里面的文件可被引用到模板上_layouts/ 模板存放的地方_posts/存放博文，可通過page.xx來讀取相應(yīng)數(shù)據(jù)_site/運行生成的文件存放在這里，自動生成_config.yml配置文件，里面的屬性可通過site.xx來讀取index.html主頁404.html一定要是404.html才能作為404頁面
liquid的語法可參見該文: liquid用法筆記
2.配置文件_config.yml
有很多配置，詳細參見官方文檔，簡單的配置如下
encoding: utf-8 //網(wǎng)頁的編碼
baseurl: /reposname //用于site.baseurl, 適應(yīng)github pages的路徑, 不過好像不用這個，直接用相對路徑可以。
permalink: pretty //生成路徑的方法，詳細見文檔
markdown: kramdown //github 指定的markdown內(nèi)核
kramdown:
input: GFM //github markdown 寫法
3.模板_layouts
_layouts/下新建default.html
<!DOCTYPE html>
<html >
<head>
<title>{{page.title}}</title>
<!-- 調(diào)用page.title變量 -->
</head>
<body>
<main class="container">
<div class="wrapper">
{{content}}
<!-- 調(diào)用該模板的文件的主內(nèi)容全部顯示在content里 -->
</div>
</main>
{% include sidebar.html %}
<!-- 引用_include/sidebar.html -->
</body>
</html>
4.index.html
---
layout: default
title: Hello World
---
<p>hello world</p>
<!--
虛線中間layout 表示要調(diào)用的模板，其他變量可通過page.xxx來引用。
虛線下面的內(nèi)容為主內(nèi)容，顯示在content中。
-->
現(xiàn)在打開github page上的網(wǎng)頁(username.github.io 或者 username.github.io/reposname 視乎你用哪種方法創(chuàng)建github pages)應(yīng)該就能看見hello world。
5.post博文
在_posts文件夾里創(chuàng)建文件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 "" 是為了發(fā)布的地址設(shè)為/，方便測試
--watch 就是自動監(jiān)控文件變化了，使用中文件是刷新了，但網(wǎng)頁不會自動刷新，需要配合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文件夾內(nèi)里的內(nèi)容發(fā)布到gh-pages上，然后上http://username.github.io/baseurl/就可以看到了，不過好像github支持解析jekyll，只要直接將完整的項目上傳到gh-pages上就可以
7.語法高亮
想要引用的代碼塊語法高亮，要引用外部的資源
<link rel="stylesheet" >
<script src="http://yandex.st/highlightjs/7.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
這樣就有語法高亮了，其實也可以根據(jù)生成后的DOM元素自己加CSS.
例如code { background: #f0f0f0 ;}
結(jié)束
以上就是jekyll的簡單用法，大家可以看看我創(chuàng)建的博客，很簡單的，一看就懂。
源碼點這里
也可以看看別人的jekyll模板
