最近的 Task 就是完成公司的 blog 架設。
其實 blog 的部署方式非常多，現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。
不過這次選擇使用 Jekyll ，Jekyll 可以讓你用 Markdown 的方式寫完文章，再幫你產生靜態的 HTML 頁面（最主要是因為公司也用 Markdown 寫內部技術文章），並且有很多現成的變數可以用，不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...，其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P，還蠻值得接觸看看的)
Jekyll 官網
使用 Jekyll ，需要 Ruby 的環境，以 Mac 來說，比較 friendly，之前曾經陪我朋友一起在 windows 安裝 Jekyll，發現困難重重，除了 ruby 之外，也需要裝一些 Python 的套件。
通常不會只需要 Jekyll ，你還會想要有現成的 Theme （畫面樣式）， 可以考慮這套 jekyllbootstrap ，http://jekyllbootstrap.com/usage/jekyll-quick-start.html （不過他畫面改版了我不太會用....）。
用 Jekyll 的好處是沒有任何 Database 的事情需要處理，基本上都是靜態頁面，而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github，使用 github.io 專頁，部署自己的 Blog 。
像公司之前使用 jekyllbootstrap.com 的 Theme，用起來的 UI 大概是像這樣：
不過因為是內部文件，不方便公開內容。
以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說，我有改過一些 css 樣式，部署起來像這樣：
不過，因為樣式很難脫離現在在線上找得到的 Theme ，我自己還蠻想要一些不太一樣的感覺，因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。
Semantic UI
http://semantic-ui.com/
Semantic UI，我第一次用，有種相見恨晚的感覺，也許是之前太常用 bootstrap，突然換個口味，感覺不錯，如果你要問我他像什麼，其實就是另外一種前端 html/css Framework 的選擇，如果你的 team 或公司沒有特別找 UI 設計 blog 樣式，這些 framework 就很常被 developer 拿來使用。
接下來的工程就是整合 UI 到 jekyll build 出來的 theme ， 大部份是搬移 css / js ，然後整頓一下畫面的 UI，麻煩的是整合，好看的 css 樣式就算不用這些 Framework 也能上網輕鬆找到現成的 html/css，只是整合很耗時間。
將 Theme 都設計好之後，Jekyll Build 出來的網站架構有些 Config 可以設定，把預設的 theme 切到自己做的 Theme 就大功告成了。在不影響架構之下的情況，這種做法有個好處就是既能保留最原始的 Theme，也能有一份自己開發的 Theme，當公司今天不想使用這個 Theme 的時候，也能透過切換 Theme ，變回原本的樣子。
這個是做完之後的成果，UniSharp Blog
我做好的 Theme 很容易辨識就是 Semantic（xdd）的 UI。左側的選單可以收合，這是 Semantic UI 本來就有的效果。
文章還要有留言的功能，如果要使用 DISQUS 的話，只要去申請 account，取得 blog 的代碼，嵌入到自己的 blog 就可以了。
接著再調整一下再其他 device 上的樣子：
就差不多完成了80% (剩下的20%等 bug 出現就知道是什麼了xdd)
Hosting
當 blog 整個 layout 都整頓好之後，公司給了我一個 ubuntu 的空間去設定網站，是一個乾淨無暇的 linux 空間，也給我機會練練架設 apache 之類的服務，還蠻有趣的，等我弄好再把網址貼上來。
其實 blog 的部署方式非常多，現成的像是 Blogger, Wordpress, 自己架設的像是 Joomla 等等都是很好的選擇。
不過這次選擇使用 Jekyll ，Jekyll 可以讓你用 Markdown 的方式寫完文章，再幫你產生靜態的 HTML 頁面（最主要是因為公司也用 Markdown 寫內部技術文章），並且有很多現成的變數可以用，不論你是要取得 文章列表 , 上一篇, 下一篇, 等等...，其實以 Blog 的功能來說也已經夠用了。
(有機會再寫個 Jekyll 教學 :P，還蠻值得接觸看看的)
Jekyll 官網
使用 Jekyll ，需要 Ruby 的環境，以 Mac 來說，比較 friendly，之前曾經陪我朋友一起在 windows 安裝 Jekyll，發現困難重重，除了 ruby 之外，也需要裝一些 Python 的套件。
通常不會只需要 Jekyll ，你還會想要有現成的 Theme （畫面樣式）， 可以考慮這套 jekyllbootstrap ，http://jekyllbootstrap.com/usage/jekyll-quick-start.html （不過他畫面改版了我不太會用....）。
用 Jekyll 的好處是沒有任何 Database 的事情需要處理，基本上都是靜態頁面，而且只需要用 Markdown 編輯。另外也可以 Host 到自己的 github，使用 github.io 專頁，部署自己的 Blog 。
像公司之前使用 jekyllbootstrap.com 的 Theme，用起來的 UI 大概是像這樣：
不過因為是內部文件，不方便公開內容。
以我的自己 host 在 github.io 的 blog 使用 jekyllbootstrap 來說，我有改過一些 css 樣式，部署起來像這樣：
不過，因為樣式很難脫離現在在線上找得到的 Theme ，我自己還蠻想要一些不太一樣的感覺，因此我才會想到用個 Semantic UI 來另外寫個 Theme 來套用。
Semantic UI
http://semantic-ui.com/
Semantic UI，我第一次用，有種相見恨晚的感覺，也許是之前太常用 bootstrap，突然換個口味，感覺不錯，如果你要問我他像什麼，其實就是另外一種前端 html/css Framework 的選擇，如果你的 team 或公司沒有特別找 UI 設計 blog 樣式，這些 framework 就很常被 developer 拿來使用。
接下來的工程就是整合 UI 到 jekyll build 出來的 theme ， 大部份是搬移 css / js ，然後整頓一下畫面的 UI，麻煩的是整合，好看的 css 樣式就算不用這些 Framework 也能上網輕鬆找到現成的 html/css，只是整合很耗時間。
將 Theme 都設計好之後，Jekyll Build 出來的網站架構有些 Config 可以設定，把預設的 theme 切到自己做的 Theme 就大功告成了。在不影響架構之下的情況，這種做法有個好處就是既能保留最原始的 Theme，也能有一份自己開發的 Theme，當公司今天不想使用這個 Theme 的時候，也能透過切換 Theme ，變回原本的樣子。
這個是做完之後的成果，UniSharp Blog
我做好的 Theme 很容易辨識就是 Semantic（xdd）的 UI。左側的選單可以收合，這是 Semantic UI 本來就有的效果。
接著是文章內文的 layout，嵌入一些 social link/share 的功能，已經是 blog 的基本配備了。
文章還要有留言的功能，如果要使用 DISQUS 的話，只要去申請 account，取得 blog 的代碼，嵌入到自己的 blog 就可以了。
接著再調整一下再其他 device 上的樣子：
就差不多完成了80% (剩下的20%等 bug 出現就知道是什麼了xdd)
Hosting
當 blog 整個 layout 都整頓好之後，公司給了我一個 ubuntu 的空間去設定網站，是一個乾淨無暇的 linux 空間，也給我機會練練架設 apache 之類的服務，還蠻有趣的，等我弄好再把網址貼上來。
超漂亮的，等教學！
回覆刪除好的，的確有計劃要寫這類的教學 ;)
刪除