Home 在 windows 10 使用 Jekyll 與 GitHub Pages 建立部落格
Post
Cancel

在 windows 10 使用 Jekyll 與 GitHub Pages 建立部落格

前言

其實最近一直有想要來寫部落格,畢竟程式也寫了好幾年了,隨著年紀增長,越來越覺得記憶力在下降,沒有像以前年輕的時候那麼好了。

之後開始上網東找西找,想找個能夠使用得比較久的部落格網站,多方比較過後本來打算使用自由度較高的 WordPress.org 來架站,因為想說如果網站出問題,之前寫過的文章要打包帶走也比較方便,而且身為一位工程師,使用一些程式寫寫東西也是很合理的,但因為某些原因讓我一直在猶豫。

再之後意外地翻到這篇文章: 安德魯的部落格 - Blogging as code,優點都寫在裡面了,還可以趁機來熟練一下 markdown 語法,也想到之前有玩過 GitHub Pages,就再來重新摸索一下吧。

安裝 Jekyll

部落格格建立工具有很多,不只有 Jekyll ,但上面那篇使用的是 Jekyll,wiki 也號稱 Jekyll 是最受歡迎的靜態站點生成器,那就來使用看看吧。

首先 Windows 並不是 Jekyll 官方支援的平台,所以要在 Windows 安裝 Jekyll 是有些麻煩的,但我本身在工作環境是 Windows,所以還是嘗試來解決這個問題。步驟如下:

這邊也可以參考官方的安裝步驟

1. 安裝 Windows Subsystem for Linux

這邊建議如果是 Windows 10 version 1607 以後的版本,推薦使用 Windows Subsystem for Linux,安裝方式可以參考這裡,打開系統管理員 PowerShell,輸入

1
wsl --install

安裝完輸入

1
wsl -l -v

會出現所有安裝的版本,如果你的作業系統版本比較舊,也可以參考官方網站提供的其他方式來安裝 Jekyll。WSL 安裝完成後重新開機。

2. 打開 PowerShell 輸入 Bash 進入 Ubuntu Terminal

1
Bash

3. 接著更新套件列表

1
$ sudo apt-get update -y && sudo apt-get upgrade -y

4. 安裝 Ruby

這邊先說明一下,目前 Ruby 最新版是 3.1.2,而官方的安裝步驟裡裝的是 Ruby 2.5 的版本,我個人在裝了這版本之後,裝 Jekyll 會出現 ERROR,找了網路上的解法是改成安裝 2.7 版,相關問題與解法可以參考這篇

ERROR: While executing gem … (ArgumentError) wrong number of arguments (given 4, expected 1)

然後,照官方的步驟在更新 Ruby gems 會一直出現 ERROR: While executing gem ... (Gem::FilePermissionError),這邊花了許多時間在解決這個問題,因為實在是不熟 Linux,官方的步驟是沒有使用 sudo,但最後還是用 sudo 硬給他更新過去了。

1
$ sudo gem update

5. 安裝 Jekyll 和 bundler

1
$ sudo gem install jekyll bundler

檢查有沒有安裝成功,看一下版本

1
$ jekyll -v

有出現版本資訊就成功了

開始使用 Jekyll

這邊可以照官方的方式 new 一個出來,或者去 google Jekyll Theme,就有很多好看的範本可以用了,例如這個網站,裡面範本點進去都會有範本的使用方式,還會教你如何在 Github Pages 放上你的靜態網站。

這邊以其中一個範本 no style, please 為例,一開始點擊 Homepage 進到他的 github,可以選擇用 git clone 下來,或是直接下載下來,然後使用 bash 進到資料夾內,在含有 Gemfile 檔案的那一層,輸入

1
$ bundle

套件安裝完了之後,輸入

1
$ bundle exec jekyll serve

便會在本機啟動你的部落格網站了。接著看到 Console 輸出中,Server address 的那一行(通常是 http://127.0.0.1:4000/),貼到你的瀏覽器就可以進到網站了。

最後補充一個 Tip,一般改完文章需要重啟你的 Jekyll 才能在本機網站看到更改後的樣子,如果不想一直重啟的話,在啟動網站時加入一個參數 --force_polling ,在修改完文章只需要重新整理瀏覽器便會看到最新的狀態了。

1
$ bundle exec jekyll serve --force_polling

參考資料

  1. 安德魯的部落格 - Blogging as code
  2. Win10 安裝 Jekyll 部落格網站產生器教學
  3. Jekyll
  4. Jekyll Themes
  5. 什麼是 Windows 子系統 Linux 版
  6. Jekyll on Windows 10 WSL2 with auto-regeneration
  7. 使用Jekyll自架部落格
This post is licensed under CC BY 4.0 by the author.