Jekyll 安裝第三方模版

實際上，Jekyll安裝主題是很是反人類的——它一點也不比本身寫模版簡單，學習成本真是高。
安裝主題不是把人家作好的template直接複製過來就能用了。
每一個模版設置的變量設置名、依賴的gem包都不同，還常常須要在本地安裝全部依賴包，安裝jekyll插件等。若是不懂Ruby gem的話，還真是不簡單。

到了這裏，通常人真的會問本身應不該該再繼續下去。由於明明簡單的東西，不知道是否是還值得了。

我相信全部堅持學習jekyll的人，都有本身非學不可的理由吧。

包管理器的理解

Jekyll是用Ruby語言構建的，且每一個主題都會有超多的Ruby依賴包。在這裏須要先理解一些基本概念才能進行下去。

• Ruby：是語言。這就不說了
• Gem：全稱RubyGems，是Ruby的包管理器。至關於Python的pip。每個包都叫a gem，在Python裏叫package.
• Bundler：是管理gem管理器的管理器……至關於Python的pipenv，管理每一個項目的gem包依賴。

簡單說，gem主要管理整個系統的Ruby包，下載安裝卸載之類。而Bundler只負責管理每一個項目的Ruby包依賴。

通常安裝方法

先講講通常通用的模板安裝方法：

• 首先到模版的Github網頁裏clone下來所有文件。
• 在命令行裏打開這個模版的文件夾（其實它就是一個完整的Jekyll文件夾結構）
• 首先直接運行這個主題：

$ jekyll serve

• 若是沒有出錯能直接使用最好，出錯的話就走下一步。
• 輸入如下命令安裝模版所需的依賴環境：

$ bundle install

• 這樣bundle命令就會會根據文件夾中的Gemfile文件下載安裝全部模版所需的依賴環境。
• 靜等結束以後，通常就能夠$ jekyll serve直接運行網站了。
• 打開jekyll提示的網站，處處點一點，若是網站能正常運行，那麼就能夠把本身的markdown文章導入到_posts文件夾裏了。
• 而後在每篇markdown文章的Front Matter裏，把theme改爲這個模版的名稱，layout改爲這個模版要求的layout等。
• 而後從新運行jekyll serve，開始運行服務。
• 複製命令行裏提示的本地url地址(每一個主題的地址都不一樣)，在瀏覽器裏打開，就能夠在網站上看到更新了。
• 若是出錯，能夠試試下面命令來啓動服務，強制服務在當前依賴環境下運行。

$ bundle exec jekyll serve

至此，通常簡單的模版均可以搞定了。若是超出任何以上說起內容，咱們就要到"特殊安裝方法"一節來分析了。

特殊安裝方法

通常安裝方法解決不了的，基本上算是特殊安裝方法了。

通過我嘗試了下載和安裝幾十個下載的主題後，發現若是遇見一個連bundle install命令都不用，直接jekyll serve就打開服務的，那簡直是像中大獎同樣的。
每一個主題的安裝都不太同樣，且遇到的錯誤都徹底不一樣。通用性極其小。

要想真正安裝好一個主題，必須掌握基本的Debug能力，命令行信息的理解能力，若是精通Ruby那麼就再好不過了。

基本上我不打算在這裏浪費時間把這些狀況列出來討論，只是想把坑分享出來，提醒你不要跳。

若是不是100%肯定真的想用這個主題，就不要浪費時間去調試和修改gem環境了，不值得。

個人經驗是：安裝越麻煩的，模版自己其實反而更醜更差勁👎。

涉及Node.js技術的模版安裝方法

Github社區裏的Jekyll模版流行使用nodejs的npm的gulp來編譯scss這些東西。
因此若是你沒注意到主題的說明文檔裏提到的gulp, npm之類，就會發現用jekyll serve沒法進行網站生成。

這種狀況下，只須要：安裝Node.js -> 使用npm -> 安裝gulp -> 命令行使用gulp編譯網站中的css文件。不過大多數狀況下你的機器已經自帶了nodejs和npm（Windows除外），因此：

$ cd <主題的目錄>

# 安裝此項目的依賴環境
$ npm install

# 編譯此項目中的相關文件
$ gulp run

小1分鐘後，就會看到gulp開啓了一個端口，並自動打開了你的chrome瀏覽器，打開了這個項目的網頁（你會看到沒法顯示出正常效果，由於這裏gulp這是用來編譯css的，它運行不了jekyll項目）。
而後ctrl+c退出，再打開jekyll命令編譯網站就好了-_-!

吐槽一下：請回想，爲了安裝個jekyll和主題，此時你已經經歷了一個真的不算短的學習歷程了：
GitHub Pages -> Jekyll框架 -> .yml文件語法和配置 -> Liquid動態語言 -> Ruby -> gem -> bundle -> HTML+CSS+JS -> nodejs -> npm -> gulp……
這其中哪一步都值得說上一段時間。
而後回想起當初，其實你只是想在GIthub Pages裏建個靜態網頁而已。

常見問題

運行Jekyll serve 總報錯： ERROR `/sw.js' not found

根據這個Stackoverflow的回答：
sw.js是Service worker的意思，是自動生成的。
基本上不會形成什麼影響，可是主要出現這個錯誤，jekyll就無法同步更新。

根據個人實際體驗，這不是主題的問題，而是jekyll的問題：對每一個主題都報有這個錯誤。