前端白痴嘗試搭建GitHub Page的一天

動機

我在尋覓下一個寫筆記的地方，在下一個地方選好之前，還會在這裡寫。

大致流程

選地方

上午我研究了一番寫部落格去哪裡好，由於自己肯定不會搭自己的網站，也暫時不想花錢租域名，最終看中了GitHub Page，而且網上教程看起來很多。

自己試試

GitHub賬號我是有的，clone一個倉庫也不陌生。原來我打算找到一個專案fork過來套著用，可是看來看去沒有找到稱心如意的專案。我的期望是，功能極簡，主頁展示個人資訊+文章列表（可以有摘要），每個頁面除了文章之外只有返回鍵，文章佔的寬度不要像簡書這麼窄，程式碼塊一定一定要漂亮而且是等寬字型（這是底線），其餘字型簡潔易讀即可。最後突然想試試自己搭一個會如何？我能走到哪一步？

官方文件

我先看著jekyll的官方文件，自己搭好了資料夾的結構，對 index.html、default.html 和 _config.yml 做了最簡單的配置。

內容堆上去成功

由於希望在自己電腦上生成預覽一下，所以開始配環境：ruby, ruby dev-kit, 以及jekyll。除錯了一會並push上去，頁面生成成功啦！

程式碼塊高亮

下一個想收拾的地方是程式碼塊高亮。開始不知道 GitHub 現在只認 rouge ，所以還在按照之前的教程配 Pygments。後來還發現程式碼高亮還要一個 css 檔案，看得我一頭霧水，到處找教程，扒拉人家的專案，最後才弄明白相關設定應該怎麼寫。其實也就是在 head 部分加上一句話，_config.yml 裡面開一下。嘗試生成，最後的錯誤集中在 Pygments 沒有配好，可是我分明配好了呀。看 stackoverflow 的解決方案都是再裝一下 Pygments， 我還是不行。後來發現要用 rouge，就換掉了，根本沒有用
Pygments，專案也 clean 過了， 可是還是提示我 Pygments 沒有配好，我滿頭黑線。

後來重啟了一下電腦，又除錯了一會，電腦上莫名其妙能生成了，雖然沒有高亮效果。推到 GitHub 上的版本也終於有程式碼塊的高亮了。謝天謝地。

另一個 css

突然發現行內的程式碼沒有反應，右鍵檢查一下，是有一個 div 的，但是沒有底色、框框，也沒有高亮（沒寫語言，不亮是正常），而且我儘管 syntax.css 複製別人的，即便是程式碼塊也和別人字型不一樣，不好看。經人生導師指點，可能還有另外的 css 在控制這個，我找來這個人的專案，拉了他“檢查”裡面看到的一個 css 到我這裡，程式碼塊竟然變得和他的一樣好看了！這運氣真是神，我不知道這個 css 寫的什麼，竟然就能用了……習慣了拿人家程式碼就一定跑不通+不會調的我真是受寵若驚。

卡住

現在的頁面除了死死地卡著邊，圖片也不會居中之外，其實真的是可以看的，並不算醜。我還想把網頁往中間縮一下寬度，對圖片再設定居中+調整大小，這樣應該就很好看了。可是目前的我像鹹魚一樣，畢竟什麼都不懂，玩到這裡已經夠意思了，下面再想做的話就要認真學習一點前端了。

我試了一下把瀏覽器縮窄，然後居中，假想兩邊是白色的背景，還是很好看的。不信，我P一張：

我不會告訴你原來是這樣：

哈哈哈哈最順手的事情還是P圖了。假裝自己做的很好看。

我真是好可愛呢，雖然有點傻。(≧▽≦)