我寫這篇文章的目的是記錄本博客的搭建過程,自己從零開始逐步搭建起來了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插件:DlHightLight或Google Code Prettify
用gist:強烈推薦菜鳥使用,省心省事,支持語言多
用pygment:要安裝python以及python的包管理軟件,又是個大坑,不建議菜鳥使用,尤其是使用windows的
圖片:國內的yupoo 、poco,國外的Flickr、imgur
訪問量統計可以使用CNZZ
七、其他內容
博客想要做的漂亮並且訪問量足夠的話是需要下很多功夫的,計划着博客中添加Google+,文章搜索等內容現在還沒有添加進去,頁面效果這些都需要比較扎實的html和css基礎。這些就需要靠自己提高了。
暫時先寫這么多吧,以后在慢慢添加,如果有什么問題的話可以Q我或者給我Email都可以的哦!
最后附上我搭建博客時參照的網站:
搭建一個免費的,無限流量的Blog----github Pages和Jekyll入門
--本篇完--