使用Github搭建我的博客網站

1 新建一個repo,建立一個沒有父節點的分支gh-pages(github規定,只有該分支中的頁面,纔會生成網頁文件):   

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


 

2 在github上新建一個同名的repo,而後在本地倉庫執行推送命令(username改成本身的用戶名):

     $ 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

相關文章
相關標籤/搜索