[網站架設] 用不少人推薦的方式來架設網站：GitHub Pages + Jekyll

這篇是我搬運自己以前在 GitHub Pages 上 2020年 7 月的文章，最近要開始慢慢搬家、把那個網站改成實驗其他東西的地方，剛好搬到這一篇是那個網站誕生的文章，內心百感交集。想當年我也是蠻自豪在一個不熟悉的環境架站，還嘗試了一系列好像很厲害的設計，沒想到要被我親自終結掉了啊QQ

和其它篇搬運過來的文章一樣，內容都有再次潤飾過，並更新少許內容，希望有比較好讀一些。

---

雖然之前用過幾個寫文章的平台，也架過一些網站，但終於以個人的名義弄了一個屬於自己的空間，心情還是蠻興奮的。當時似乎有不少人是用 Heroku （2022 年終止免費服務）或是 Hexo 等方式搭配，我仍想試試看被 GitHub 支持的 Jekyll。

這次是在 Windows 10 中使用 GitHub Pages + Jekyll 的方式建置我的網站。必須先聲明一下我雖然我有架設網站的經驗，但這部分對我來說是完全陌生的領域……　所以當時可以說是瞎子摸象的純紀錄。

安裝 Jekyll

Jekyll 是一個靜態網站生成器，可以根據 Markdown 文件自動生成靜態的 HTML 文件。最重要的是 GitHub 支持這項服務。省了不少步驟，又免費（重點XD）、簡單、好用。

因為 Jekyll 是基於 Ruby 環境開發的 framework，所以要使用的話自己的環境也得有個 Ruby。 安裝 Ruby 的頁面進去後，點 Download 會看到一個列表，可以參考右手邊說明文字，若沒意外的話通常是要下載粗體的那一個。

安裝過程中的預設我都沒改，盲人安裝法 XD。裝完之後會跳出這個，他說不確定就按 Enter，所以我也是就不用腦按了 Enter。

接著開啟剛裝好的 start command prompt with ruby （這時應該可以搜尋得到），確定一下 Gem 有沒有正常運作，看看版本：

gem -v

Gem 負責 Ruby 的套件安裝與管理，而 Jekyll 正是要透過 Gem 來安裝與管理。當時的我沒用過也是略懵，暫時把它想成windows裡面的安裝與管理程式，這樣好理解一點（不確定有沒有觀念錯誤）。 剛剛確認 Gem 可以正常運作了，接著就先更新它：

gem update --system

到目前為止正常來說應該都順利，可以開始透過 Gem 去安裝 Jekyll 了！

gem install jekyll

安裝完後一樣看一下版本確認有沒有安裝到：

jekyll -v

建置網站

接著要用 Jekyll 建立一個新的專案。至於 GitHub Pages 的相關設置這裡先不多說，已經有很多網友分享了。簡單來說和建立程式專案一樣，先建立一個 Repository，名字必須是 XXX.github.io，XXX 必須是你的 GitHub 帳號，最後把可見度設定為公開。

至於本機上，我們使用 Jekyll 建立新的專案：

jekyll new XXX

XXX 是專案名字。如果之前已經有建立自己的資料夾，或是有要指定儲存位置的話，記得要改一下 XXX 那部分的路徑。（像我已經建置好網站，相關的資料夾放在 D 槽，所以我這裡的工作位置須改選 D 槽）

再來我們用 Jekyll server 在本機看自己的網站：

cd XXX
jekyll serve

接著進入網址為 http://127.0.0.1:4000/，如果沒錯誤，就可以在本機看到網頁的樣子了，即使沒有預先有的網站資料，應該也會發現 Jekyll server 建置好後有一個預設的樣式。 看一下資料夾裡面的結構，像是有個 _posts 資料夾就是放文章用的，還有404、關於等等的簡單頁面。至於網站架構就是之後自己要去規劃了。

推上去 git

先前已經有新增好專案了，再來只是推上去而已。紀錄一下這邊會用到的指令。 git init 把專案目錄初始化後，加入版本控制。

git add .
git commit -m "jekyll commit"
git push

把當前資料夾的內容給 git 追蹤後，把電腦的東西放去本機的儲存庫，引號內是自己要 commit 的訊息（打啥都可），並且最後把儲存庫內的東西 push 上去。

再來測試有沒有正確完成 輸入自己的網址 https://XXX.github.io，XXX 改成自己的 GitHub 帳號，將會看到剛架設的網站已經建置完成囉！

---

（後續是 2023 年新增或結合 2020 文章更新。）

主題建置

剛開始 Jekyll 給的預設主題沒記錯的話應該是 minima？若不喜歡這個主題，或是想用其他架構更改的話，可以使用「jekyll themes」這一類的關鍵字搜尋，有很多免費的主題可以預覽和下載，甚至手把手教你怎麼安裝，因此我這裡就不多講。

有茶煲！

錯誤訊息 Could not find gem…

在 Ubuntu 上安裝 Jekyll ，遇到不少問題，好險有各種強大的網友們。直到今天真正要使用 Jekyll 去生成我的網站時，各種錯誤訊息來襲，只好認命繼續看哪裡出錯了…

錯誤內容：
Could not find gem 'jekyll-paginate (~>1.1)', which is required by gem ......
Could not find gem 'jekyll-sitemap (~>1.3)', ......（後面都差不多）

看起來應該是安裝 Jekyll 漏了什麼東西我沒發現，當時為了除掉其他的bug已經太混亂。 根據 jekyll issue 這篇我輸入以下命令：
sudo gem install pygments.rb
gem install bundler
bundle install

執行完就正常了。之後有查一下 bundler 到底是什麼東西，似乎是另一個套件管理工具。

No such file or directory – git ls-files

不知道是巧合還是真的是 Windows 更新有問題，每次更新完一定有一個東西或環境需要除錯……

這次遇到的狀況是寫完文章後習慣先用 Jekyll 建置本機網站運作測試，看看我的文章是否有正確地按照我想要的方式呈現。兩天前才用的沒啥問題。結果昨天更新完 Windows 後今天突然噴出我完全沒看過的錯誤：
[!] There was an error parsing `Gemfile`:
[!] 這裡我忘了寫啥……
There was an error while loading : No such file or directory - git ls-files -z. Bundler cannot continue.

難得遇上錯誤結果忘了截下珍貴畫面，簡而言之錯誤應該差不多長這樣。

後來嘗試了：
bundle install，失敗
bundle exec rake test，失敗
gem install pygments.rb，有跑東西
gem install bundler，有跑東西
bundle install，依然失敗

看了看錯誤應該是有裝到 bundle 才會跑出無法運行的錯誤，所以我的方向（嘗試安裝 bundle）可能是錯的。後來看到此篇 Stack Overflow 的問題 No such file or directory – git ls-files — WINDOWS，感覺和我遇到的狀況應該比較相近。

於是照著裡面給的方式跑去新增我的兩個環境變數：
C:\Program Files\Git\bin
C:\Program Files\Git

完全是瞎子摸象。因為還是跑不出啥鳥，接著將 Ruby 的命令環境先關閉再重啟跑一次 jekyll s（也就是再次建置網站）。有趣了，這次噴出另一種錯誤：

You have already activated public_suffix 4.0.6, but your Gemfile requires public_suffix 4.0.5. Prepending bundle exec to your command may solve this. (Gem::LoadError)

看到數字直覺是版本錯誤，原本要開啟瘋狂 update 模式，但看見後面有個命令建議，想說先照著做做看：
bundle exec rake

噴出以下訊息：

rake aborted!
Don't know how to build task 'default' (See the list of available tasks with rake --tasks)

哈哈哈總覺得被嗆了XD 不知哪來的想法，突然想試試 bundle update rake，結果還真有運行一些東西（欸不是，跟建議的不一樣啊）。好吧，既然有運行了一些東西，那應該是成功了嗎？又再次建置 jekyll s 測試，果然還是失敗！因此回到最初，更新 bundle 呢？

bundle update

神奇的是跟剛剛 bundle update rake 時跑出的進行的動作明明完全一模一樣，但再次執行 jekyll s 時，卻成功建置了！

後來還是認真想回溯問題，但因為我剛剛有關閉過命令視窗，因此只能就最近的修正來做測試，將一開始新增的環境變數將它刪除。想說若有錯誤，那應該就是因為環境變數的問題了，結果……

即使刪除了還是可以跑啊！！！！！那到底是怎麼回事QQ

（2023 更新：我當時怎麼看起來這麼崩潰XDD）

實際網站樣貌

既然都要關了，還是要留下當時努力過的痕跡，這樣以後能好好緬懷哈哈哈。

首頁長相，也是大部分人在挑主題時最在意的部分。當時覺得背景一定要黑的才夠帥，標題要來點霓虹燈的感覺，現在回頭看真的有夠騷。有一陣子標題很流行留左邊邊框的方框，不知道是不是因為一堆網站架設教學這樣做，因為這個清一色的標題樣式，有好多人網站看起來大同小異。

目前部落格、架站的工具和平台都有所謂的「後臺」，GitHub Pages 的後台就是你電腦上的編輯器，不會有什麼華麗的操作界面，想要客製化就得摸透整個架構。我自己的話是用 Visual Studio Code。

有關樣式的配置和文章大約會是長這樣：

雖然對於用慣一般平台的人來說，一開始要面臨一堆程式碼可能有點可怕，還不能及時看到網站建置完成的樣子。但實際上痛苦的在最開始的設計和環境架設，若都已經完成了，之後完全可以專注在文章寫作。至於修改樣式方面，若有遇上任何困難都可以再回頭找那個主題的 Demo 慢慢抓，或是甚至寫信、發 issue 等等直接聯絡作者。

---

後記

這邊只介紹到網站架設，如何把最初的架構推上去，但實際的維護和設計還是需要一段時間熟悉，在摸熟的同時讓我更了解另一種網站設置的方式。雖然只能建置靜態網站，但對於想要專注於寫文章的人來說綽綽有餘，尤其是它還是目前完全免費的東西！

我在這兩年使用 GitHub Pages 除了更理解了我不想熟悉的 CSS 外（好煩人QQ），包含文章設置、Markdown、網站架構、更省時省力的方式等等，概念上都有大幅度的增長，這也是我架本站的時候更為得心應手的原因。我架的第一個網站正是因為沒有這些概念，所以架構相當鬆散凌亂，幾乎都以一個不知不覺耗費資源的方式進行，目前正在還債想辦法把它重新組織。

剛開始看到 Windows 對於 Ruby 的支援性較差，有想說要不要裝在我另一台電腦上（Linux系統）。但因為當時工作上比較常接觸 Windows，這台電腦目前也沒計畫裝雙系統，所以還是硬著頭皮裝裝看。原本很緊張，因為對 Ruby 真的是只有聽過的等級，但或許是 Jekyll 使用者很多，所以相關文件也很多，矇著眼照著裝一裝似乎還行，遇到怪怪的就砍掉重練也沒差。

未來不排除會再更新這篇，畢竟服務的變化超乎預期地快速，例如當時以為超級大方的 Heroku 竟然也步入到須收費的階段了，收到通知是完全意想不到。