在 Win10 安裝 Jekyll 部落格網站產生器及簡單起步教學

  Jekyll 是一個非常方便的靜態部落格框架,可以讓想架部落格的人可以不受平台的限制架設網站,如果有程式基礎的話,他的靈活性也相對比部落格平台高上許多,可以自行修改成具有個人特色的網站。

  什麼是靜態網頁呢?簡單來說就是不包含資料庫等能和使用者互動的單純網頁,這對於單一網頁不常變動的部落格來說是一個不錯的選擇,唯一的缺點是一般部落格都會需要的留言系統會需要資料庫,但這部分已經有相當多平台提供服務,像本站是使用 Disqus,其他像是 Facebook 留言外掛程式 也是不錯的選擇。

要怎麼安裝呢?

  Jekyll 主要是使用 Ruby 開發的,Ruby 本身有 Windows 版本,但相對麻煩,我個人最推薦的方式還是使用 Windows Subsystem for Linux 來安裝 Ruby,WSL 安裝方式可以參考這篇,這裡安裝的是 Ubuntu 版本,所以在接下來的範例你會看到 apt-get。如果你想要使用其他的方式安裝,可以參考 Jekyll 官方教學,這篇文章主要也是翻譯自官方教學。如果你懶得看說明,就把從這個段落的的所有指令一行一行複製輸入就好囉。

  打開剛安裝好的 Ubuntu Terminal,先輸入以下指令更新套件列表

[email protected]:~$ sudo apt-get update -y && sudo apt-get upgrade -y

  接著安裝要 Ruby,我們先加入 BrightBox 的 ppa,然後就可以直接安裝

[email protected]:~$ sudo apt-add-repository ppa:brightbox/ruby-ng
[email protected]:~$ sudo apt-get update
[email protected]:~$ sudo apt-get install ruby2.3 ruby2.3-dev build-essential

  更新一下 Ruby gems

[email protected]:~$ sudo gem update

  安裝 Jekyll 和 bundler

[email protected]:~$ sudo gem install jekyll bundler

  呼叫以下指令看看能不能看到 Jekyll 版本,確認我們有安裝成功

[email protected]:~$ jekyll -v

  大功告成!(好快?)

要怎麼開始呢?

  從這裡需要會使用 Git,如果你還不會用的話,建議先去學一下最基礎的四個指令: git clone, git add, git commit 以及 git push。

  Jekyll 起步我認為最簡單的方式還是找個樣板來改,他的樣板很多,Google Jekyll Theme 就可以找到一大堆,選好 theme 以後通常你也會找到他的 github,最簡單的方式就是把他 clone 下來。

  我這裡以 jekyll bootstrap 這個常見的樣板做為範例,其他的樣板大多可以依樣畫葫蘆,如果不行的話多注意他的 README 說明,首先先 clone 他

[email protected]:~$ git clone https://github.com/llorephie/jekyll-bootstrap.git
[email protected]:~$ cd jekyll-bootstrap

  安裝個 bundle,過程中有可能需要輸入你的 Ubuntu 密碼

[email protected]:~$ bundle install

  在 Local 端執行以下指令運行看看

[email protected]:~$ bundle exec jekyll serve

  接著就可以到瀏覽器輸入 localhost:4000 看看運行結果囉!有沒有非常簡單?

再更進階一點,我想要把部落格放到 Github 上?

  Github 有提供一個 Github Pages 的服務,可以把靜態網站放在 Github 上運行,對於本來就有在使用 Github 來說我想這一定不是難事。

  首先到你的 Github 上建立一個新的 repository,名稱為 USERNAME.github.com。注意不要真的用 USERNAME 建立內,這裡指的是你的 github 帳號

  接著把 clone 下來的樣板 remote 換成剛剛建的 repository

[email protected]:~$ git remote set-url origin [email protected]:USERNAME/USERNAME.github.com.git

  PUSH 上去

[email protected]:~$ git push origin master

  大功告成!如果網頁建立有問題的話,你應該會收到 github 寄來的信告知建立狀況,如果沒問題,就可以到 USERNAME.github.io 看看你的網頁運行的成果!

參考文獻

Jekyll on Windows 官方教學 https://jekyllrb.com/docs/windows/

Lin Chieh ( Jayce )

Lin Chieh ( Jayce )
設定目標、執行、回顧,人生就是在一次又一次的短跑衝刺中不斷成長前進!一個機械系的資訊人心得分享。

Visual Studio Code Remote - WSL 安裝教學

Visual Studio Code Remote - WSL可以讓 VS Code Server 實際執行在 WSL 裡面,只留 UI 介面在 Windows。這對某些插件非常有用,因為有些東西跑在 Linux 環境是比較容易的。另外 Visual Studio Code Remote 系列還包含 Remote - SSH 模式,這東西就更猛了,如果你的 Build Machine 是遠端的 Linux Server ,他可以直接透過 SSH 跑在 Linux Server 端,像是檔案搜尋等動作,直接執行在遠端 Linux 就會比透過 Samba 或 NFS 快上很多。 Continue reading