Jekyll + GitHub Pages 架設Blog

以jekyll與github page快速打造免費靜態網站

操作環境

• macOS

安裝所需套件

gem install bundler jekyll

(其實macos預設就有安裝ruby，但蠻舊的

如果無法成功安裝jekyll

就以brew安裝新的一個ruby，再將路徑加入zsh的環境變數)

brew install ruby

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

簡易的jekyll配置

僅僅一行指令即可做出一個demo的blog page!!!

jekyll new blog-name

cd blog-name

接下來將建立的檔案夾中的文件內容，改成自己喜歡的設定

或是git clone或fork漂亮的theme下來用，根據theme建立環境

這裡推薦minimal-mistakes這個theme

這裡簡單介紹幾個重要配置

• _post:

裡面放置blog的文章，以jekyll支援的語法編寫即可

• _config.yml:

網站的簡介設定，旁邊註解都挺清楚的

需要注意的是要用

remote_theme           : "mmistakes/minimal-mistakes"

才可以正常推到gh-pages上使用

• Gemfile：

裡面是jekyll所需的ruby套件

local和remote的配置可以參考官方文件

但如果想先在local測試

bundle exec jekyll serve

並在瀏覽器開啟

127.0.0.1:4000

就可以看到你的網頁了

將Jekyll上到Github page

登入github，創repo

repo名稱如果使用your_github_name.github.io

做出來的github page就會直接在http://your_github_name.github.io上面

如果是用一般的名字，github page就會在http://your_github_name.github.io/project-name上面

cd到剛剛jekyll的資料夾

git init

git add .

git commit -m "first jekyll"

git remote add origin https://your_github_name/your-repo-name.git

git branch -M gh-pages

git push -u orgin gh-pages

接下來就可以在http://your_github_name.github.io上看到你的網站囉

如果沒有出現的話，setting->GitHub Pages

選擇gh-pages這個branch，選擇/(root)，save

(不過照理來說，選擇gh-pages為主要的branch，就會自動設定了)

Custom Domain

如果想使用自訂的domain

可以建立CNAME檔案

並寫下你的domain name

再到將你的Domain的DNS紀錄

配置一個CNAME到http://your_github_name.github.io

即可使用自己的domain了!!!

總結

Jekyll配置快速，且支援Markdown，不需要太多前端技巧也能輕鬆駕馭

再搭上GitHub Pages免費的服務，真的非常方便

作為該blog的的第一篇文章，當然就是介紹一下這個blog的出生

這個blog應該會放置一些心得與筆記

除了紀錄自己的所見所聞以外，也分享給大家