GitHub Pages 搭建流程-基於jekyll-bootstrap


我寫這篇文章的目的是記錄本博客的搭建過程,自己從零開始逐步搭建起來了GitHub Pages,其中借鑒了很多的博客和模版,稍后會在后面列出,也為沒有用過gihub和jekyll的童鞋提供一點幫助。

學習使用github網頁的最好辦法就是clone別人的代碼,看懂他們的代碼,並修改成自己喜歡的樣子。這篇文章介紹了windows下從最初安裝軟件到使用的過程。

下面開始一步步講解Github Pages的使用流程:

一、安裝git工具

下載安裝 Git for Windows(選擇下載類似於 Git-1.7.*-preview.exe 的文件)
打開安裝好的 Git Bash,依次輸入:
git config --global user.name "your username"
git config --global user.email "username@email.com"

請確保 name 和 email 信息與在 GitHub 注冊時的信息相符。
緊接着創建一個 SSH Public Keys,輸入:
ssh-keygen -t rsa -C "username@email.com"
回車后,你會看到類似畫面:

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Tekkub/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Tekkub/.ssh/id_rsa.
Your public key has been saved in /c/Users/Tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
e8:ae:60:8f:38:c2:98:1d:6d:84:60:8c:9e:dd:47:81 tekkub@gmail.com

此時,你需要的 SSH Public Keys 就保存在 id_rsa.pub 文件中,找到並打開它,將里面的代碼復制到Account Settings 的相應區域。
后面就輕松多了,因為,除非重裝系統或換新機器,你都不必再重復操作以上步驟。

二、在windows下安裝ruby環境

1). 下載並安裝 RubyInstaller for Windows

版本可以選擇2.0或者1.9.3都可以。

雙擊安裝,安裝時選中“Add Ruby executables to your PATH”前的框將ruby添加到環境變量中。

安裝完成后,在 Windows 命令行窗口中執行以下命令,檢查ruby是否已經加到PATH中: ruby --version

2).  安裝 DevKit

請根據主頁上的描述下載對應的DevKit版本,下載后直接解壓到沒有空格的路徑(例如 E:\DevKit),然后在Windows的命令行窗口中執行以下命令:

E: 
cd E:\DevKit 
ruby dk.rb init 
ruby dk.rb install
3). 安裝Jekyll和相關的包。

安裝完成Ruby和DevKit 后繼續安裝jekyll,執行如下命令安裝:

gem install jekyll

等待安裝完成即可。

三、創建git版本庫

登錄到自己的Github賬戶,選擇New repository,Project Name命名為:”你的用戶名”.github.com,例如我的就叫“lslvxy.github.com”。

完成后在本地克隆jekyll-bootstrap模版,運行命令:

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com

將jekyll-bootstrap模版克隆到本地USERNAME.github.com文件夾下。

然后cd到文件夾內運行命令:

jekyll serve

成功后打開瀏覽器輸入地址:

http://localhost:4000 即可瀏覽本地生成的頁面。

四、關於jekyll-bootstrap模版

jekyll-bootstrap是一個搭建好的模版框架,里面提供了常用的插件等內容,包括google analytics 、disqus等。使用jekyll-bootstrap可以加快個人博客的搭建。

類似的模版還有Octopress ,不過Octopress 安裝使用較jekyll-bootstrap要麻煩許多,所以我就使用了jekyll-bootstrap。

jekyll-bootstrap的目錄結構分析:

其中includes文件夾下內容為包含文件,其他頁面可以直接引用。包含了常用的頁面和主題等,jekyll-bootstrap是支持更更換主題的。

layouts文件夾內為布局文件,在每個頁面的頭部都需要指定使用的布局:

---
layout: page
header : Post Archive
group: navigation
---

---之前不能包含空格等。

posts文件夾為自己寫的文章,文件格式必須按照“年-月-日-文章名”進行命名。

_config.yml 文件為必須配置項。

首頁為index.md文件。

可以根據自己的實際情況進行修改,可以自定義主題和頁面布局等。

五、關於jekyll使用過程中的問題

jekyll是不支持中文編碼的,若需要添加中文的話需要修改部分代碼:

找到ruby的安裝目錄,比如我本機的地址:D:\Ruby200\lib\ruby\gems\2.0.0\gems\jekyll-1.2.1\lib\jekyll

下的convertible.rb文件,用記事本打開修改第31行代碼為:

self.content = File.read(File.join(base, name), :encoding => "utf-8")

打開D:\Ruby200\lib\ruby\gems\2.0.0\gems\jekyll-1.2.1\lib\jekyll\tags目錄下的include.rb文件,

修改第58行代碼為:

   source = File.read(File.join(includes_dir, @file), :encoding => "utf-8")

這樣在include模版中也支持中文格式了。

六、附加插件

由於gitHub只支持靜態頁面,所以評論內容需要借助外部插件,可以使用jekyll-bootstrap提供的disqus,disqus是國外最流行的一個評論系統。國內的可以使用多說、友言等。

代碼高亮插件可以使用

用js插件:DlHightLightGoogle Code Prettify

gist:強烈推薦菜鳥使用,省心省事,支持語言多

pygment:要安裝python以及python的包管理軟件,又是個大坑,不建議菜鳥使用,尤其是使用windows的

分享插件:國內的jiathis和國外的addthis

圖片:國內的yupoopoco,國外的Flickrimgur

訪問量統計可以使用CNZZ

七、其他內容

博客想要做的漂亮並且訪問量足夠的話是需要下很多功夫的,計划着博客中添加Google+,文章搜索等內容現在還沒有添加進去,頁面效果這些都需要比較扎實的html和css基礎。這些就需要靠自己提高了。

暫時先寫這么多吧,以后在慢慢添加,如果有什么問題的話可以Q我或者給我Email都可以的哦!

最后附上我搭建博客時參照的網站:

Github Pages極簡教程

使用Github Pages建獨立博客

搭建一個免費的,無限流量的Blog----github Pages和Jekyll入門

Jekyll QuickStart

--本篇完--


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM