1. 前端也能變全端
ericpi
MOPCON/KSDG
http://goo.gl/lSx3YI

2. 這邊無線網路:
Nsysu-Guest / 12345678

3. 今天投影片放在:
http://goo.gl/lSx3YI
今天共筆筆記放在:
http://goo.gl/iFNu1B

4. About ericpi
• KKBOX S.RDC Manager
• KSDG organizer
• MOPCON 2012/2013

5. 做過的系統
• J2ME Games & Game Service
• KKBOX
– Admin / CMS System
– Login/Directory/Metering…API
– Software SLB/Monitor
– Follow Me back-end POC
– …..

6. 看起來就是搞後端的…

7. 那還呼弄我們今天要講前端?!

8. 其實最初是為了
http://ksdg.me/

9. 6月15日嘴砲了要弄 ksdg.me

10. 結果…
• 換工作的換工作
• 忙專案的忙專案
• 我自己也有個更重要的專案要進
行…

11. BYOC (Build Your Own Child)
• BYOC 來自於 hlb, 有興
趣請自行參考:
http://www.youtube.com/
watch?v=26CIyVFUuf8

12. KSDG官網希望能提供…
• 關於
• 新聞
• 歷屆活動訊息
• 工商服務
• Blah…blah…

13. 這不就是個 CMS?
(Content Management System)

14. 正常的工程師腦袋浮現…
• Database
• Dynamic Page
• Web Framework
• Template
• Front-end Design
• Web Hosting
• Domain.. Blah…blah…

15. 除了紅字以外都算是我熟悉的…

16. 即使用輕量級框架,
還是有不少 code 要堆
node.js+express
php+ci
python+flask
Python+django

17. Front-end 那麼多煩人的問題要處理,
哪有時間管 Back-end 要堆什麼 code

18. 所以如果有好的文本管理機制..
• 輕量級標籤語言
• 樣板引擎 (Template)
• Static Page Generator

19. 加上…
• High-Performance Free Hosting
• 版本控制
• Web Base Admin/Editor

20. Github + Github Pages + Jekyll

21. Github + Github Pages + Jekyll
• 版本控制
• Markdown 標籤語言
• Liquid Template
• Static Page Generator
• Free!!!

22. Hands-On! - Github
• https://github.com/
• 建立帳號
• 下載 Github App
• 安裝 Github App

23. Github App Login
Mac
Windows

24. Github App Setup
Mac
Windows

25. Create New Repository
Mac
Windows

26. Create [id].github.io Repository (1)
Mac
Windows

27. Create [id].github.io Repository (1)
Mac
Windows

28. Add index.html
Mac
Windows

29. Say Hello World

30. Commit The Changes
Mac
Windows

31. Upload Pages with Git
Mac
Windows

32. Hello World?

33. Wait a minute…

34. Customize Domain
• 在 repository 目錄下建
立名為 CNAME 檔案
• 把你的域名加入
CNAME 中
• Commit & Push
• 設定域名指向
– Top-level domain: A record ->
204.232.175.78
– Subdomain: CNAME record
[id].github.com

35. Hello World again

36. Project Page (1)
• 建立新的 repository
(這邊用 prj_site)
• 加入頁面檔案 &
commit
• 到 branch tab 從
master 建立新 branch
名為 gh-pages

37. Project Page (2)
• 完成後記得要 push
出去

38. Project Page (3)

39. How About Jekyll
• Markdown 標籤語言
• Liquid Template
• Static Page Generator
• Github Pages Support

40. Jekyll-Bootstrap (1)
• https://github.com/
plusjade/jekyll-
bootstrap
• 從以上網址右下方
“Clone In Desktop”

41. Jekyll-Bootstrap (2)
• 切換到 Repository
Jekyll 的 Setting Tab
• 將 Primary Remote
Repository 改為之前
網站的 uri
• Update Remote & Sync
Branch

42. Jekyll-Bootstrap (3)
• 切換到 History Tab
• 找到之前 commit 的
前一項目
• “Revert This
Commit”& “Publish
Branch”

43. Jekyll-Bootstrap (4)

44. Jekyll Directory Structure
• _config.yml
• _layout
• _include
• _post
• Index.md

45. _config.yml

46. Markdown
• Mac:
http://mouapp.com/
• Windows:
http://
markdownpad.com/

47. Yeoman Integration
• Jekyllrb generator
• Live reload tools
• Put the source in “devel branch”
• Deploy:
– git push origin `/usr/bin/git subtree split --
prefix dist`:master --force

48. Thanks
官方網站
http://mopcon.org/
粉絲群
https://www.facebook.com/mopcon
堅持辦在濁水溪以南的
行動應用技術研討會!!