如何使用GitHub搭建自己的博客

關於爲什麼寫博客,以及爲什麼用GitHub寫,這其實是和博客同樣古老的話題,一百個人能給出一千個理由來。很多文章都有過介紹,推薦大家參考和菜頭的《開始寫作吧》,劉未鵬的《爲什麼你應該(從現在開始就)寫博客》,李笑來的《爲什麼你一定要學會寫作》,以及 Joshua Becker 的《Why you should write blog》。


這裏直接介紹怎樣使用GitHub搭建博客,搭建後的效果如鏈接:https://liclong.github.io


一、學習使用GitHub


首先進入GitHub並申請賬號,Google(也可以是度娘)輸入github,點擊第一條進入,如下圖。


wKiom1j0wwqQGd_UAAlnuI_lhHM707.png-wh_50


想了解GitHub的童鞋可參見知乎:https://www.zhihu.com/question/19968479/

進入GitHub主頁後請首先註冊賬號。並創建一個 Repositories,命名爲”username.github.io”。注意,這裏,username 是你剛纔註冊的 GitHub 賬號名,我的賬號名是 liclong,因此這裏填: “liclong.github.io”。

wKioL1j0w7Sz_MTvAAMk5oXrrJI287.png-wh_50

二、建立本地與GitHub的連接

1. 本地電腦安裝 git

接下來我們在本地環境中實際安裝 git,並進行各種設置。如果使用 Mac 可以忽略安裝過程,因爲系統已默認集成了這一功能,使用 Ubuntu 和 Windows 的童鞋可以參考:《Getting Started - Installing Git》

下面我們對本地計算機裏安裝的 git 進行設置,首先設置的是使用 Git 時的姓名和郵箱地址。

$ git config --global user.name "firstname lastname"
$ git config --global user.email "[email protected]"


設置完畢後可通過 ~/.gitconfig 文件進行更改。這裏設置的姓名和郵箱地址會用在 Git 的提交日誌。由於在 GitHub 上公開倉庫後,這裏的姓名和郵箱地址也會被一併公開,所以注意不要使用不便公開的隱私信息。


此外,在 GitHub 上公開博客或源碼後,前來參考的程序員可能來自世界任何地方,所以不要使用漢字,很多外國友人的中文水平遠不如我們的英文水平。當然,如果不想使用真名,完全可以使用網絡上的暱稱。

2. 本地創建密鑰

GitHub上連接已有倉庫時的認證,是通過使用 SSH 的公開密鑰認證方式進行的。現在我們來創建公開密鑰認證所需的 SSH Key,並將其添加至GitHub。如果已經創建過,可以使用現有的密鑰進行設置。

運行下面的命令創建 SSH Key。

$ ssh-keygen -t rsa -C "[email protected]

3. 添加公鑰到 GitHub

在GitHub上添加公鑰,今後就可以用私鑰進行認證了。

點擊右上角的賬戶設定按鈕(Account Settings),選擇 SSH and GPG Keys 菜單,就會出現如下界面。點擊 Add SSH Key,會出現 Title 和 Key 兩個輸入框。在 Title 中輸入適當的密鑰名稱,Key 部分粘貼 id_rsa.pub 文件裏的內容。

wKiom1j0xKTBl-LHAAQBsr5PrQk156.png-wh_50


如此一來,本地電腦和遠端的 GitHub 服務器就建立了可信的連接。以後可以通過 git 命令快捷的從 GitHub 克隆項目,並將修改後的項目更新到 GitHub。

三、先走一遍流程

要了解一個項目,最快捷的方法就是先從頭到尾過一遍。所以,我們首先創建一個最簡單的網頁,介紹從創建 GitHub 到訪問網頁到整個流程,以幫助大家理解。打開終端輸入如下命令:

$ git clone https://github.com/liclong/liclong.github.io

這樣可以將剛纔在 GitHub 上創建的 Repositories 克隆到本地,你會發現在當前路徑下多了一個文件夾:“liclong.github.io”。然後後續操作可以在本地進行,只需將最終版本再上傳回 GitHub 即可。我們在克隆到本地的 liclong.github.io 目錄下新建一個文件:index.html,這是網站的入口。文件編輯如下:

<!DOCTYPE html>

<html>

    <head>
        <title>liclong.github.io</title>
    </head>

    <body>
        <p><a href="http://www.google.com">Link to another page</a>.</p>
    </body>
</html>

隨後,將修改的文件同步回 GitHub。現在我們看一下如何將修改的東西同步回去。

$ git status                //查看倉庫中文件修改狀況
$ git add index.html        //將文件加入暫存區
$ git commit -m "the content of update"
$ git push                  //現在,GitHub 上的倉庫被更新了

打開你的瀏覽器,輸入你剛建的 Repository 的文件名,例如我的是 liclong.github.io。如下圖所示,You get it!


wKioL1j0xdKyISHuAADsdF_COcw387.png-wh_50

說白了,GitHub 提供了這樣一種頁面解析功能,你既可以拿它製作博客,也可以拿它做個人主頁,功能就在那裏,用途任你選擇。詳情可參考 GitHub Pages 官方主頁。

四、使用Jekyll進行本地調試

有一個問題,每次微調後都要同步回 GitHub 查看頁面修改結果? NO!

理想的方式應該是,本地進行調試和預覽,只把最終的版本上傳至 GitHub 供大家瀏覽。幸運的是,Jekyll 提供這樣的功能。

打開 terminal, 安裝 Ruby (Mac上已經預裝了Ruby)。可以輸入 $ ruby –version 去驗證是否安裝。

接下來,輸入sudo gem install github-pages,安裝 Jekyll (gem update github-pages命令可以用來更新 Jekyll,以免 Github 服務器更新導致網站本地和線上表現不同)

之後你需要在 master 下新建一個 file,命名爲 Gemfile,輸入

source 'https://rubygems.org'
gem 'github-pages'

運行 terminal,使用命令行移至 repository 根目錄下(也就是剛纔從 GitHub 上克隆下來的 liclong.github.io 目錄)。之後運行

$ bundle exec jekyll serve

注意,如果沒有前面創建的 Gemfile 文件,這個命令是執行不通過的。

下面,就可以使用 Jekyll 啦,本地測試在瀏覽器輸入 http://localhost:4000 即可。

五、學會使用Jekyll個性化博客

從零寫一個漂亮的博客時間成本太高。更何況,每寫一篇博客還要重複大量以往的工作,既耗時又耗力。爲美化博客且最大限度的實現代碼複用,我們充分發揮拿來主義精神,它山之石可以攻玉。

瀏覽器中登錄 GitHub 網站,進入自己的 liclong.github.io 倉庫(再次強調,liclong是我的用戶名,大家在實際操作是將它改成自己的用戶名)。

隨後,進入 liclong.github.io 倉庫,並點擊菜單欄中的 Settings。

wKioL1j0xmjCeimGAA_Nt2L7gOA796.png-wh_50


在 theme 中,選擇你喜歡的主題。這裏我們以 slate 主題爲例,如下圖所示:


wKioL1j0xrHxPU8UAATKdITzqZk461.png-wh_50



可以查看它在 GitHub 中的代碼,並 git clone 到本地。現在將裏面的代碼全部複製到本地的 liclong.git.io 目錄,文件名重複的直接 replace。然後,進入 liclong.github.io 目錄,並執行:

$ git status        //查看哪些文件做過修改
$ git add .         //多個文件修改時,可以直接用.的方式實現全選
$ git commit -m "this is an update"
$ git push          //推送到 GitHub

打開瀏覽器,登錄 http://liclong.github.io,你會看到 slate 主題的網頁裏。修改 index.html 文件即可進行修改。具體細節可實際摸索。

注意,目前的 GitHub 進行了改版,以前各教程中提到的 theme 中的 “automatic page generator” 已經不在,大家不必糾結。

wKioL1j0xvqwo2zFAARoXOg4eo8048.png-wh_50



以上。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章