天天看點

使用GitHub建立個人網站使用GitHub建立個人網站

<a>1 Git簡介</a>

<a>2 為什麼使用Github Pages</a>

<a>3 建立Github Pages</a>

<a>3.1 安裝git工具.</a>

<a>3.2 兩種pages模式</a>

<a>3.3 建立步驟</a>

<a>3.4 常用指令</a>

<a>4 使用Jekyll搭建部落格</a>

<a>4.1 什麼是jekyll</a>

<a>4.2 jekyll本地環境搭建</a>

<a>4.3 jekyll目錄結構</a>

<a>4.4 Jekyll-Bootstrap建立部落格</a>

<a>4.5 Jekyll 寫博過程</a>

<a>4.6 個性化部落格</a>

<a>5 使用Markdown</a>

<a>5.1 簡介</a>

<a>5.2 基本文法</a>

<a>5.3 Notepad++支援Markdown文法高亮</a>

Git是一個開源的分布式版本控制系統,用以有效、高速的處理從很小到非常大的項目版本管理。

GitHub可以托管各種git庫的站點。

GitHub Pages免費的靜态站點,三個特點:免費托管、自帶主題、支援自制頁面和Jekyll。

1. 搭建簡單而且免費;

2. 支援靜态腳本;

3. 可以綁定你的域名;

4. DIY自由發揮,動手實踐一些有意思的東西git,markdown,bootstrap,jekyll;

5. 理想寫博環境,git+github+markdown+jekyll;

<a href="http://windows.github.com/">http://windows.github.com/</a>

<a href="http://mac.github.com/">http://mac.github.com/</a>

1) 使用自己的使用者名,每個使用者名下面隻能建立一個;

3) 主幹上内容被用來建構和釋出頁面

1) gh-pages分支用于建構和釋出;

3) 如果沒有使用獨立域名,project pages将通過子路徑的形式提供服務username.github.com/projectname;

4) 自定義404頁面隻能在獨立域名下使用,否則會使用User Pages 404;

5) 建立項目站點步驟:

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

3. 可以通過User/Organization Pages建立主站,而通過Project Pages挂載二級應用頁面。

第一步:建立個人站點

使用GitHub建立個人網站使用GitHub建立個人網站

第二步:設定站點主題

進入資源-setting

使用GitHub建立個人網站使用GitHub建立個人網站

 更新你的站點

使用GitHub建立個人網站使用GitHub建立個人網站

 選擇主題并釋出

使用GitHub建立個人網站使用GitHub建立個人網站
$ cd .ssh/username.github.com //定位到你blog的目錄下 $ git pull origin master //先同步遠端檔案,後面的參數會自動連接配接你遠端的檔案 $ git status //檢視本地自己修改了多少檔案 $ git add . //添加遠端不存在的git檔案 $ git commit * -m "what I want told to someone" $ git push origin master //更新到遠端伺服器上

jekyll與github的關系:GitHub Pages一個由 GitHub 提供的用于托管項目首頁或部落格的服務,jekyll是背景所運作的引擎。

cd C:\DevKit ruby dk.rb init ruby dk.rb install

3. 完成上面的準備就可以安裝Jekyll了,因為Jekyll是用Ruby編寫的,最好的安裝方式是通過RubyGems(gem):

gem install Jekyll

并使用指令檢驗是否安裝成功

jekyll --version

4. 安裝Rdiscount,這個用來解析Markdown标記的包,使用如下指令:

gem install rdiscount

5. 運作本地工程:

cd 到工程目錄,啟動服務:

jekyll --server

 _posts: _posts中的資料文檔,通過注入_layouts定義的模闆,通過jekyll --server最終生成的靜态頁面在_sites目錄。目錄是用來存放你的文章的,一般以日期的形式書寫标題。

 _layouts:_layouts中的模闆一般指向了_includes/themes中的模闆。目錄是用來存放模闆的,在這裡你可以定義頁面中不同的頭部和底部。

 _includes:

1) _includes/JB中有一些常用的工具,用于清單顯示、評論等; 2) _includes/themes中可參看主題的相關html文檔。 3) _includes/themes中的主題一般包含default.html、post.html和page.html三個文檔。default.html定義了網站的最上層架構(模闆),post.html和page.html是其子架構(模闆)。 4) 生成好的html子頁面通過default.html的{{ content }}變量調用,生成整個頁面。

 assets 渲染頁面的CSS和JS文檔在assets/themes中

 _config.yml 站點生成需要用到_config.yml配置檔案,站點的全局變量在_config.yml中定義,用site.通路;頁面的變量在YAML Front Matter中定義,用page.通路,更多的模闆變量可參考模闆資料。

 index.html是你的頁面首頁。

1. 建立個人站點,即建立一個新資源,格式為username.github.com;

2. 安裝Jekyll-Bootstrap:

$ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com $ cd USERNAME.github.com $ git remote set-url origin [email protected]:USERNAME/USERNAME.github.com.git $ git push origin master

3. 通路建立好的個人站點:username.github.com

4. 在本地測試檢視效果:

cd USERNAME.github.com

1) 修改标題:title : My Blog =)

2) 修改個人資訊:

author : name : Name Lastname email : [email protected] github : username twitter : username feedburner : feedname

3) 引用:_config.yml中的鍵值均引用到其他頁面{{ site.title }};

2、 寫文章

按照_config.yml的格式permalink: /:categories/:year/:month/:day/:title,可以修改格式,建立markdown格式檔案,就可以當初部落格釋出了。

3、 釋出

本地預覽修改:運作jekyll –server,預覽http:127.0.0.1:4000。

釋出到github上:通過指令送出或者用戶端送出。

Github Page完成了部落格的主要功能,寫作、釋出、修改,這些都是相對靜态的東西,就是你自己可以控制的事情,還有一些動态的東西Github Pages無法支援,比如說文章浏覽次數、文章的評論等,還有一些個性化的東西,像個性化頁頭頁尾、代碼高亮可以把部落格整的更漂亮一點,其實這寫都可以通過第三方應用來實作,個性化自己的部落格。

加上Disqus雲評論:

修改_config.yml: comments : disqus : short_name : tiansj

Markdown 的宗旨是實作「易讀易寫」。可讀性,無論如何,都是最重要的。

Markdown 的文法全由一些符号所組成,這些符号經過精挑細選,其作用一目了然。格式撰寫的檔案可以直接以純文字釋出,并且看起來不會像是由許多标簽或是格式指令所構成。

使用一個或多個空行分隔内容段來生成段落 &lt;p&gt;。

标題(h1~h6)格式為使用相應個數的“#”作字首,比如以下代碼表示 h3:

### this is a level-3 header ###

使用“&gt;”作為段落字首來辨別引用文字段落。這其實是 email 中标記引用文字的标準方式:

&gt; 引用的内容

&gt; 這個記号直接借鑒的郵件标準

使用“*”“+”“-”來表示無序清單;使用數字加“.”表示有序清單。如:

1. I am ordered list item 1...

2. So I should be item 2!?

使用 4 個以上 空格或 1 個以上 的 tab 來标記代碼段落,它們将被&lt;pre&gt; 和 &lt;code&gt; 包裹,這意味着代碼段内的字型會是 monospace家族的,并且特殊符号不會被轉義。

使用 [test](http://example.net "optional title") 來标記普通連結。

使用 ![img](http://example.net/img.png "optional title") 來标記圖檔。

引号内的 title 文字是可選的,連結也可以使用相對路徑。

使用 * 或 _ 包裹文本産生 strong 效果:

_語氣很重的文本_ 以及 **語氣更重的文本**

2. 将 userDefineLang.xml 放置到此目錄:C:\Users\Administrator\AppData\Roaming\Notepad++

3. 重新開機 Notepad++,在語言菜單下可以看到自定義的 Markdown 高亮規則