利用GITHUBpage搭建個人部落格

黃思喆發表於2015-05-10

今天終於把這個部落格建起來了,基本功能算是全。這是個純靜態的blog,託管在github上,生成器是jekyll。 除了這些基本的以外,一些其他功能需要依賴第三方工具。站內搜尋用的google的自定義搜尋工具; 同樣網站分析也是谷歌的analytics工具。評論用的多說。用的某位大大 的模板,還參考了另一位大大模板的一些功能。頭一次弄折騰了兩天,也算弄明白了 些裡面的執行邏輯。接下來我會詳細講解如何搭建一個類似的小站。

各種申請

申請github賬號

sign up for github 就是建立賬號了

申請google賬號

然後利用谷歌賬號開通站長工具, 站內搜尋,分析工具

申請多說賬號

一般來說用新浪微博賬號就行了

利用gitpage搭建靜態網站

先進入你的github主頁,這裡你可以檢視和管理你的所有專案

從上倒下的點紅筆圈中的地方新建一個專案,

設定的時候上面把我的賬戶替換成你的賬戶就可以了,點綠色按鈕提交. 於是你就有了一個自己的站點位置(https://yourgitname.github.io)

然後是下載github的客戶端windowsmac下(linux用命令列工具就不介紹了,略多不直觀),安 裝好後不同平臺會有不同,但是基本的還是一樣的,

上圖中按鈕是同步用的,會將本地倉庫內容覆蓋github上的主倉庫中, 每次同步必須在summary中填上同步的主題,下面的描述可以不填,再下面的內容是提示你哪些有改變。

你已經建立好了專案,剩下的就是在你的專案網頁點選圈中的按鈕,然後再你的客戶端中將該專案clone下來.

選好你希望該專案本地所在的位置後等待克隆成功吧~~ok!

本地配置jekyll

安裝ruby環境

window 下這裡下載ruby,安裝好後順手把rails一起安了吧~

安裝完成後記得設定環境變數, 具體就是把安裝好的ruby位置放到環境變數裡去。

win+R 調出執行,然後輸入cmd 撥出terminal,敲入gem install rails等待安裝完成吧~~

mac下自帶ruby。。。就是任性!

安裝gitpage相同的jekyll環境

命令列輸入gem install bundler等待安裝完,

命令列輸入gem install jekyll等待安裝完,

接下來下載我的模板到你clone下來 的地址,記得解壓,你該看到大約是這樣

其中資料夾hsz1273327.github.io位置應該是你的專案位置

令行輸入cd XXXXX XXXX是你的專案位置,

命令列輸入bundle install

會自動給你安裝GEMfile中提到的幾個庫

這樣jekyll環境就算搭建好了

執行jekyll

配置_config

根據我的模板主頁的readme文件設定

注意,本地試執行先把 production_url 改為http:\localhost:4000

執行jekyll

命令列依然cd到你的專案目錄,輸入 jekyll build ,執行完了後再輸入 jekyll serve。 tips:沒事terminal不要關。

瀏覽器裡輸入地址http:\localhost:4000你就能看到部落格主頁了 (不過這個時候搜尋功能無法使用)!

實現功能

站內搜尋功能

這個功能用的谷歌的自定義搜尋,需要註冊後才能用。 除了自己的程式碼設定外還要在谷歌自定義搜尋頁面上做些設定 具體如圖

點選後彈出如圖

enter image description here

enter image description here

enter image description here

如果你通過站長工具提交過sitemap了,那這樣就能搜尋了~~

留言評論功能

這個沒啥好說的,註冊設定都弄好了就有了,雖然自己倒騰了好久,結果發現模板自帶這個功能。。。

瀏覽器中撰寫更新部落格功能

這個只是簡單的用超連結實現的,分別連結到git上專案所在頁面的相應功能而已,不過這樣確實方便了不少。 不過方便是有代價的,斷網沒儲存就orz了(已經吃過一次虧)。安全性應該還行,畢竟要修改本來就要用自己的 github賬號才有許可權。

經過上面的其實你的小站已經建成了,你只要將它同步到你的github上,然後等個幾分鐘就能用了~~

接下來的是給希望用自己域名的同學的~~

配置域名

購買域名

避免廣告嫌疑我就不多說了,總之找個買就行

CNAME設定

參考我的CNAME檔案,注意只能放一個域名,如果是作為部落格的話我建議不要用1級域名,略浪費

域名解析

到你買域名的供應商那邊,之後選擇域名解析,選CNAME作為解析方式,然後把自己的原始網址放上去就行了。 這個就不截圖了要不有廣告嫌疑。我的是二級域名,一級域名我沒試過,據說是用A解析。

弄好了記得_config檔案要改下url

撰寫部落格

總結

jekyll邏輯簡述

模板放在 *_includes* 裡 靜態檔案放在 asset

模板內用 {{ }}來傳遞模組或頁面的屬性

用{\% \%} 描述邏輯

每個頁面開頭用--- ---分隔出獨立位置記錄這個頁面的屬性,其中layout:title:是 必須的屬性,id:預設為最終的網址位置去掉域名。

前端模板知識點歸納

html5 的 <from><input>標籤可以用來傳遞引數,用GET方法是將input的內容傳遞到物件頁面的位 置後面作引數

POST方法需要物件頁面用指令碼獲取該值

相關文章