Jekyll + Github 搭建屬於你的靜態博客

1. 搭建Jekyll環境

linux下jekyll的安裝很是簡單,這裏主要講一下windows下的jekyll的安裝過程
這是一臺剛剛裝完系統的win10系統,它什麼都沒有,讓咱們從零開始。css

enter image description here

1.1 Install Ruby and the Ruby DevKit

Jekyll是使用ruby語言進行開發的,因此咱們第一步須要安裝ruby以及ruby相關的開發工具
你能夠在 官網 下載咱們所須要的安裝包和開發工具
教程用的是 rubyinstaller-2.2.3-x64DevKit-mingw64-64-4.7.2-20130224-1432-sfxhtml

ruby 的安裝須要注意一點,就是將ruby的可執行文件加入到環境變量的PATH中,以下圖,將其勾上,而後安裝便可。python

enter image description here

接下來咱們安裝 Ruby DevKit,雙擊咱們剛纔下載的DevKit-mingw64-64-4.7.2-20130224-1432-sfx,將其解壓到某個文件夾下,這裏我選擇的是C:\RubyDevKit,解壓完畢後,咱們以此輸入以下命令
cd C:\RubyDevKit
ruby dk.rb init
ruby dk.rb installlinux

最後咱們能夠用gem -vruby -v 來確認一下ruby和gem是否已經安裝成功,若是安裝過程當中有什麼問題,能夠關閉cmd,再以管理員權限打開cmd嘗試從新操做。c++

enter image description here

1.2 Change the Gem's sources

咱們用gem sources查看原始的gem源,發現是https://rubygems.org/ ,這意味着什麼呢,,在這個CCFHQ的阻攔下,不少網站你是沒法訪問的,那咱們更換一個國內的源吧。
gem sources --remove https://rubygems.org/ 將原始的源刪掉
gem sources -a https://ruby.taobao.org/ 添加taobao的源
gem sources -u 更新緩存git

enter image description here

好了,如今咱們的gem能夠放心使用了,媽媽不再用擔憂我翻不了牆了。github

1.3 Install the Jekyll

終於,咱們能夠安裝jekyll了,只須要一調命令便可
gem install jekyll
通過些許的等待,咱們成功安裝了Jekyll,使用jekyll -v,咱們看到目前的最新版本已是jekyll 3.1.0,這裏稍微強調一下,這個版本和以前的2.x. x版本有些許不同,可能在後面_config.yml的寫法上可能有差別,不過不要緊,這並不影響我繼續前進。shell

enter image description here

1.4 Build your first blog

至此,咱們Jekyll 安裝完畢。。。。
咱們趕忙來測試一下。。。你期待已久的博客立刻誕生。
這裏我把當前工做目錄切換到desktop
使用jekyll new firstblog命令,咱們在桌面建立出了一個firstblog文件夾,是的,這個就是你博客源文件存放的地方。
咱們進入這個目錄cd firstblog,並jekyll serve
打開瀏覽器,輸入http://127.0.0.1:4000/,是的,你看到了你用jekyll原生的模板建立出來的博客,你成功了,你的第一個blog。windows

enter image description here

enter image description here

另外,不須要本地測試時,使用ctrl+c關閉端口哦。瀏覽器

你如今能夠進入firstblog這個文件夾下,查看下模板都生成了些什麼。
是的,這裏有若干個文件夾,和一些配置文件,這裏我簡要說明一下,
_includes_layouts 文件夾分別保存着一些html文件,而post文件夾,用來存放你要發佈的文章,通常咱們習慣用markdown來寫博客,而jekyll是徹底支持的。固然還有一個相當重要的文件_config.yml,這個文件用於設置站點的若干信息,很是重要。更多的細節,請參看官網。

1.5 Install a Syntax Highlighter

實際上前面你能夠看到,jekyll3.x版本沒有自帶wdm,那麼咱們用gem install wdm裝一個吧。

上面咱們成功生成了一個模板,如今咱們須要繼續改進。
做爲一名coder,,我想代碼高亮必定是咱們所必要的。so。。咱們須要一個代碼高亮插件。
jekyll 原生的代碼高亮是rouge,這裏,咱們使用一個叫Pygments代碼高亮插件,它是基於Python的,因此在這以前咱們須要先安裝Python。

1.5.1 Install Python

若是是python2.7.9之前的版本,除了安裝Python,你可能還須要安裝 pip,可是這以後的版本,安裝Python的同時會自動安裝pip,這裏我選擇的是最新版本python-2.7.11.amd64,因此我跳過了這一步,可是你記得在Python安裝完畢後經過命令python -m pip install --upgrade pip將pip升級至最新版本。
安裝時請務必把Python加入到環境變量PATH中,若是你忘記了,請手動添加。記得安裝完畢後重啓一次計算機。在命令行輸入Python -V 能夠查看當前版本,同時也確認Python成功安裝。

enter image description here

1.5.2 Install Pygments

先執行python -m pip install Pygments
再執行gem install pygments.rb
這樣 pygments 就裝好了。
而後咱們打開前面說到的_config.yml文件,在裏面添加一行highlighter: pygments,這樣咱們就將默認的高亮換成了pygments

咱們本身寫一篇post來測試吧

enter image description here

將寫好的post命名爲20xx-xx-xx-xx-xx.md的形式,如2014-06-30-manacher-algorithm.md,並放入_posts文件夾下。
咱們再次jekyll serve,能夠看到,pygments代碼高亮測試成功

enter image description here

1.6 Using MathJax with Jekyll

做爲一名acmer,恐怕數學公式是你必需要用到的,那麼,咱們用mathjax,使得咱們的博客支持LaTex數學公式,,那是否是很美妙啊。。。哈哈。

咱們打開_includes文件夾中的head.html文件。
加入以下代碼
{% highlight c++ %}

{% endhighlight%}

上面的代碼是引用了mathjax的js,下面還處理的 $ ,這樣咱們能夠經過使用 $ 在行內插入公式,使用$$ 在行間插入公式
咱們的博客就支持數學公式啦,等什麼,再寫一篇post來測試吧。

enter image description here

beautiful,LaTex,大愛!!!

至此,基本的設置,告一段落,更多驚喜請參考jekyll官方網站

2. 用Github展現你的博客

這裏,再次說明,Ubuntu下,自帶Python,安裝jekyll幾行命令能夠搞定,安裝pygments一行命令搞定,安裝git也是一行命令能夠搞定。
因此這裏仍是講windows端的安裝,其餘命令行下的操做,windows與linux幾乎是同樣的。

2.1 安裝git

官網下載git for windows,直接安裝便可。
如下全部的操做,均在git(windows端的git bash)下進行,再也不使用前面用到的cmd命令行了

2.2 使用Github

首先咱們註冊一個Github賬號。
這裏個人賬號暱稱是cainiaonidongde

2.2.1 配置ssh

  1. 設置Git的user name和email:
    git config --global user.name "cainiaonidongde"
    git config --global user.email "842212859@qq.com"
  2. 查看是否已經有了ssh密鑰:cd ~/.ssh
    若是沒有密鑰則不會有此文件夾,有則備份刪除,你第一次玩github是確定沒有的
  3. 生成密鑰:
    ssh-keygen -t rsa -C 「842212859@qq.com」 按3個回車,密碼爲空。很明顯能看到這裏用的是RSA的加密體制,因此生成的文件必然有兩個,一個公鑰,一個私鑰,不瞭解的同窗記得去學習數論哦。再次cd ~/.ssh,ls以後你會發現兩個文件,就是剛纔說的,公鑰(id_rsa.pub)和私鑰
  4. 在github上添加一個ssh密鑰,這要添加的是id_rsa.pub文件裏面的內容。
  5. 測試:
    ssh -T git@github.com
    最後一行顯示Hi cainiaonidongde! You've successfully authenticated, but GitHub does not provide shell access.,沒錯,咱們成功了。

enter image description here

2.2.2 Create a new repository

這時候,咱們建立一個新的倉庫
這裏倉庫的名字必須爲你github的名字+github+io,即yourname.github.io

enter image description here
enter image description here

我將當前工做目錄切換到桌面。cd Desktop/

  1. 而後將咱們建立的倉庫克隆下來,固然,目前裏面什麼都沒有
    git clone https://github.com/cainiaonidongde/cainiaonidongde.github.io.git
  2. 這時候你看到桌面上出現了一個文件夾cainiaonidongde,咱們把firstblog下的全部文件複製過去。
  3. 切換到cainiaonidongde.github.io文件夾 cd cainiaonidongde.github.io/
  4. git add . 添加全部文件
  5. git commit -m "my new blog" 提交修改信息
  6. git push origin master push到遠程倉庫

另外這裏使用https協議的在push時須要輸入賬號密碼,若改爲ssh則能夠不用輸入,具體方法能夠自行百度谷歌。

2.3 Just enjoy it

如今,咱們在瀏覽器中輸入http://cainiaonidongde.github.io/,查看咱們的博客。

enter image description here
enter image description here

嗯,很是棒,,咱們,成功了!!

3. 關於linux

linux下搭建很是簡單,就是依次安裝gem,jekyll,git。。而後就該怎麼搞怎麼搞就好了。

4. 參考文獻

Run Jekyll on Windows
Installation
Git SSH Key 生成步驟
jekyll

相關文章
相關標籤/搜索