mkdir jekyll_demo
cd jekyll_demo
git init
git checkout --orphan gh-pages
而後在該分支下建立以下目錄和文件: html
_config.yml是jekyll的配置文件,咱們在裏面填入以下內容: baseurl: /jekyll_demo
_layouts 目錄,用於存放模板文件, default.html文件,做爲Blog的默認模板,內容以下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body> {{ content }} </body>
</html>
_posts 目錄,用於存放blog文章,能夠在這裏建立文章 2012-08-25-hello-world.html(文件名必須爲"年-月-日-文章標題.後綴名"的格式,git
若是網頁代碼採用html格式,後綴名爲html;若是採用markdown格式,後綴名爲md),文章內容以下:github
---
layout: default title: 你好,世界 --- <h2>{{ page.title }}</h2> <p>個人第一篇文章</p> <p>{{ page.date | date_to_string }}</p>
//每篇文章必須有一個yaml頭部,用來設置一些元數據。
//"layout:default",表示該文章的模板使用_layouts目錄下的default.html文件;
//"title: 你好,世界",表示該文章的標題是"你好,世界",若是不設置這個值,默認使用嵌入文件名的標題,即"hello world"
index.html文件,爲博客首頁,內容以下:markdown
--- layout: default title: 個人Blog --- <h2>{{ page.title }}</h2> <p>最新文章</p> <ul> {% for post in site.posts %} <li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>
//首頁使用了{% for post in site.posts %},表示對全部帖子進行一個遍歷
//{{site.baseurl}}就是_config.yml中設置的baseurl變量
以上內容寫好後,提交到本地庫 git add * git commit -m "first post" post
$ git remote add origin https://github.com/username/jekyll_demo.git ui
$ git push origin gh-pages url
大功告成,等待一會,訪問http://username.github.io/jekyll_demo/ 就能夠看到第一篇文章了。spa