經過GitHub Pages創建我的站點總結與體會

經過GitHub Pages創建我的站點總結與體會 ----Git+Github+Jekyll+Markdown

blog

---

Git

(不會?請參照簡易教程學習Git的總結)

首先感謝雨知網站做者博文指點.

Github

兩種pages模式

User/Organization Pages 我的或公司站點

1) 使用本身的用戶名，每一個用戶名下面只能創建一個

2) 資源命名必須符合這樣的規則username/username.github.com

3) 主幹上內容被用來構建和發佈頁面

Project Pages 項目站點

1) gh-pages分支用於構建和發佈

2) 若是user/org pages使用了獨立域名,那麼託管在帳戶下的全部project pages將使用相同的域名進行重定向,除非project pages使用了本身的獨立域名

3) 若是沒有使用獨立域名,project pages將經過子路徑的形式提供服務username.github.com/projectname

4) 自定義404頁面只能在獨立域名下使用,不然會使用User Pages 404

5) 建立項目站點步驟：

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
$ git clone https://github.com/USERNAME/PROJECT.git PROJECT$ git checkout --orphan gh-pages$ git rm -rf .$ git add .$ git commit -a -m "First pages commit"$ git push origin gh-pages

能夠經過User/Organization Pages創建主站，而經過Project Pages掛載二級應用頁面。

1)建立我的站點

2)設置站點主題,進入你的項目-setting

3)更新你的站點

4) 選擇主題併發布

簡明扼要步驟在github網頁上創建項目,本地克隆或建同名稱項目,在git bash上操做以下:
切換到項目目錄->git init->git add --all->git commit -m "xxx"->git remote add origin git@github.com:yourgithubname/yourdemo->git push origin master
其中克隆的話只需先後兩步.

使用Jekyll搭建博客

Jekyll是一種簡單的、適用於博客的、靜態網站生成引擎。它使用一個模板目錄做爲網站佈局的基礎框架，支持Markdown、Textile等標記語言的解析，提供了模板、變量、插件等功能，最終生成一個完整的靜態Web站點。說白了就是，只要安裝Jekyll的規範和結構，不用寫html，就能夠生成網站。jekyll本地環境搭建
須要下載ruby,我下的
Ruby 2.2.2

在下載時勾選環境變量，path中配置那一項，而後在電腦的開始->全部程序->Ruby文件夾->start command prompt命令行終端下輸入gem update --system來升級gem
此處可能會出現: gem update --system的Gem::RemoteFetcher::FetchError錯誤
方法:索性換成淘寶的鏡像。
gem source查看列表；
gem source -a http://ruby.taobao.org 加入淘寶的源，竟然沒用https，也就不存在這個問題了；
gem source -r https://rubygems.org/ 幹掉缺省的源；
gem update --system (此命令在Ruby文檔下完成)

下載最新的DevKit
在剛纔的命令行中敲入

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
cd C:\DevKitruby dk.rb initruby dk.rb install

繼續:gem install Jekyll

並使用命令檢驗是否安裝成功jekyll --version

安裝Rdiscount，這個用來解析Markdown標記的包，使用以下命令gem install rdiscount

此時再cd到工程目錄,可是在start command prompt是切換不過來的,應到Git bash 中切換到工程目錄

再敲擊jekyll serve

雨知博客中沒有記載的很明確到底這行代碼在那個命令端裏完成的,全部形成我諸多錯誤,以下:

此時博客環境已經搭建好了.
再進行博客等的建立:
到想要建立項目的文件夾下（如cd d:xxx），運行命令：jekyll new blog
這樣就會建立一個新文件夾d/blog，其結構以下：
1.文件夾_layouts：用於存放模板的文件夾，裏面有兩個模板，default.html和post.html,或許還有page.html.

2.文件夾_posts：用於存放博客文章的文件夾，裏面有一篇markdown格式的文章--2014-01-27-welcome-to-jekyll.markdown,可作自行修改成:

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
---layout: mylayouttitle: "myblog"date: 2015-07-18 06:53:46categories: jekyll update---Welcome to my blog

3.文件夾css：存放博客所用css的文件夾(或許還有sass文件,不須要就能夠刪掉)
4..gitignore：能夠刪掉，後面會將項目添加到git項目，因此這個不須要了.
5._coinfig.yml：jekyll的配置文件，裏面能夠定義至關多的配置參數，具體配置參數能夠參照其官網.
個人_coinfig.yml配置以下:

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
# Site settingstitle: myblogemail: sumo_dream@sina.comdescription: > # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.baseurl: "" # the subpath of your site, e.g. /blog/url: "http://ctct.github.com" # the base hostname & protocol for your sitetwitter_username: sumo_dreamgithub_username: sumodreamencoding: utf-8# Build settingsmarkdown: kramdowncomments :provider : disqusdisqus :short_name : tiansj

6.index.html：項目的首頁.
個人首頁以下:

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
---layout: defaulttitle: myblog---<div class="home"> <h1 class="page-heading">Posts</h1> <ul class="post-list"> {% for post in site.posts %} <li> <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span> <h2> <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> </h2> </li> {% endfor %} </ul> <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p></div>

根據實際須要，可能還須要建立以下文件或文件夾：
1. _includes:用於存放一些固定的HTML代碼段，文件爲.html格式，能夠在模板中經過liquid標籤引入，經常使用來在各個模板中複用如 導航條、標籤欄、側邊欄 之類的在每一個頁面上都同樣不變的內容，須要注意的是，這個代碼段也能夠是未被編譯的，也就是說也可使用liquid標籤放在這些代碼段中(會自動生成head.html,header.html,footer.html)
2. image和js等自定義文件夾：用來存放一些須要的資源文件，如圖片或者javascript文件，能夠任意命名
3.CNAME文件：用來在github上作域名綁定的(貌似目前的域名都是要錢的可在域名網站上購買,使用github便不收取費用,但可能不是你心儀的域名)

添加CNAME文件

在倉庫根目錄下添加一個CNAME文件，沒有後綴名，裏面內容爲你的域名(如:test.com),不須要添加http/www等前綴。打開cmd,
ping username.github.io記錄下IP地址

添加 DNS Service記錄
去DNSPod註冊個帳號，添加域名，設置兩個A記錄。分別是@和w w w，ip地址填上個步驟獲取的IP地址

設置域名的DNS
在相應域名的Csutom DNS裏，設置DNS service,添加兩條記錄f1g1ns1.dnspod.net和f1g1ns2.dnspod.net
漫長的等待

要全球解析生效，得等上一會了，也能夠先ping一下本身的設置對不對

1. favicon.ico：網站的小圖標

大體上jekyll生成html的流程，jekyll首先會讀取以下內容進入內存中：
1. _posts及文件夾下的全部文章，將其參數和文章內容組織保存在內存中，全部的文章的內容、參數都在site.posts對象（其餘文件夾下的文章不會放入site.posts中）
2. _layouts文件夾下的全部模板
3. _includes文件夾下的全部須要被引入的內容

能夠看一下_posts下的jekyll給的例子：

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
---layout: posttitle: "Welcome to Jekyll!"date: 2014-01-27 21:57:11categories: jekyll update---You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.Jekyll also offers powerful support for code snippets:{% highlight ruby %}def print_hi(name) puts "Hi, #{name}"endprint_hi('Tom')#=> prints 'Hi, Tom' to STDOUT.{% endhighlight %}Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].[jekyll-gh]: https://github.com/mojombo/jekyll[jekyll]: http://jekyllrb.com

能夠看到在博文的最上方有被兩個---包裹起來的一段，這裏就定義了文章的一些參數，更多參數在FrontMatter和Variables獲取，簡單的只須要關注幾個就好：
1. title：文章的標題
2. date：文章的日期
3. categories：定義了文章所屬的目錄，一個list，將會根據這個目錄的list來建立目錄並將文章html放在生成的目錄下，文章分類時候用，這裏就不使用了
4. layout：文章所使用的模板名稱，也就是_layouts中定義的模板的文件名去掉.html
5. tags：例子中沒有，定義了文章的標籤，也是一個list，文章分類時候用，這裏就不使用了.

將這個寫完的文章保存爲 「年-月-日-標題.markdown」的名字形式，由於若是不修改permlinks，jekyll會根據文章的標題來建立文件夾，如2014-01-27-hello會建立成/2014/01/27/hello.html。這裏就保存成2014-01-27-hello.markdown

ps：文章的文件名不要使用中文，不然會出現bug，由於在url中會escape，而服務器查找倒是按照escape後的字符串去查找
，就會出現找不到文章的狀況，使用英文代替就好，定義了title變量就無所謂文件名中標題的內容了.

咱們能夠打開jekyll給的例子default.html看一看模板的結構:

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{ page.title }}</title> <meta name="viewport" content="width=device-width"> <!-- syntax highlighting CSS --> <link rel="stylesheet" href="/css/syntax.css"> <!-- Custom CSS --> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="site"> <div class="header"> <h1 class="title"><a href="/">{{ site.name }}</a></h1> <a class="extra" href="/">home</a> </div> {{ content }} <div class="footer"> <div class="contact"> <p> Your Name<br /> What You Are<br /> you@example.com </p> </div> <div class="contact"> <p> <a href="https://github.com/yourusername">github.com/yourusername</a><br /> <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br /> </p> </div> </div> </div> </body></html>

能夠看到，模板和普通的html文件幾乎是同樣的。jekyll使用的是一個叫liquid的模板引擎建立html文件，這個模板引擎也有詳細的文檔，如今就只關注其中比較核心的部分，文章的標題和文章的內容.

能夠看到模板的有這麼兩句{{ page.title }}, {{ content }}，這兩句就分別是文章標題和文章內容的佔位符，若是有文章使用了這個模板，如過使用上面寫的那篇welcome的文章，標題就是myblog，content就是Welcome to my blog，這裏定義一個本身的新模板，保存爲mylayout.html

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> {{ page.title }} {{ page.date }} {{ content }} </body></html>

第一行是標題，而後是博文時間（在文件名中定義），而後是博文內容
這樣一個簡單的模板就建立好了.

在博客文件夾下，在命令行中輸入jekyll build --trace就能夠將全部文章文件根據其模板進行編譯，生成結果，放在根目錄下的_site中，這裏咱們使用後，會出現以下結果：\blog_site\2015\07\18文件夾下有一個welcome.html，其內容爲：

  
  
  
  
  

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Sumo</title> </head> <body> Welcome to Myblog! 2015-07-18 14:53:46 +0800 <p>Welcome to my blog</p> </body></html>

能夠看到，這就是編譯完的博文文件，如咱們設定的，第一行是標題，而後是文件名定義的時間，而後是博文內容，若是編譯錯誤，將會在命令行中看到一個錯誤棧，能夠方便調試，具體哪裏出錯了，若是不須要看錯誤棧，直接使用jekyll build就好了

以後在瀏覽器打開yourgithubname.github.io(com)進入site主頁,或是直接打開yourgithubname.github.io/blog就能夠看見index.html的內容中，點擊文章的標題就能夠跳轉到具體的博文了.

Github Page完成了博客的主要功能，寫做、發佈、修改，這些都是相對靜態的東西，就是你本身能夠控制的事情，還有一些動態的東西Github Pages沒法支持，好比說文章瀏覽次數、文章的評論等，還有一些個性化的東西，像個性化頁頭頁尾、代碼高亮能夠把博客整的更漂亮一點，其實這寫均可以經過第三方應用來實現，個性化本身的博客。加上Disqus雲評論:註冊http://disqus.com/

使用Markdown

Markdown的宗旨是實現「易讀易寫」。可讀性，不管如何，都是最重要的。

Markdown 的語法全由一些符號所組成，這些符號通過精挑細選，其做用一目瞭然。格式撰寫的文件能夠直接以純文本發佈，而且看起來不會像是由許多標籤或是格式指令所構成。(我仍是使用的原始化馬克飛象,>...<)在谷歌應用裏添加的馬克飛象,話說目前以爲仍是很便利的(儘管沒有css樣式,好吧,>...<)...

剩下的活就是給我的站點定製樣式和特效啦,我也得慢慢琢磨啦......逃:)