前端也能變全端

1,144 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,144
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

前端也能變全端

  1. 1. 前端也能變全端 ericpi MOPCON/KSDG http://goo.gl/lSx3YI
  2. 2. 這邊無線網路: Nsysu-Guest / 12345678
  3. 3. 今天投影片放在: http://goo.gl/lSx3YI 今天共筆筆記放在: http://goo.gl/iFNu1B
  4. 4. About ericpi •  KKBOX S.RDC Manager •  KSDG organizer •  MOPCON 2012/2013
  5. 5. 做過的系統 •  J2ME Games & Game Service •  KKBOX – Admin / CMS System – Login/Directory/Metering…API – Software SLB/Monitor – Follow Me back-end POC – …..
  6. 6. 看起來就是搞後端的…
  7. 7. 那還呼弄我們今天要講前端?!
  8. 8. 其實最初是為了 http://ksdg.me/
  9. 9. 6月15日嘴砲了要弄 ksdg.me
  10. 10. 結果… •  換工作的換工作 •  忙專案的忙專案 •  我自己也有個更重要的專案要進 行…
  11. 11. BYOC (Build Your Own Child) •  BYOC 來自於 hlb, 有興 趣請自行參考: http://www.youtube.com/ watch?v=26CIyVFUuf8
  12. 12. KSDG官網希望能提供… •  關於 •  新聞 •  歷屆活動訊息 •  工商服務 •  Blah…blah…
  13. 13. 這不就是個 CMS? (Content Management System)
  14. 14. 正常的工程師腦袋浮現… •  Database •  Dynamic Page •  Web Framework •  Template •  Front-end Design •  Web Hosting •  Domain.. Blah…blah…
  15. 15. 除了紅字以外都算是我熟悉的…
  16. 16. 即使用輕量級框架, 還是有不少 code 要堆 node.js+express php+ci python+flask Python+django
  17. 17. Front-end 那麼多煩人的問題要處理, 哪有時間管 Back-end 要堆什麼 code
  18. 18. 所以如果有好的文本管理機制.. •  輕量級標籤語言 •  樣板引擎 (Template) •  Static Page Generator
  19. 19. 加上… •  High-Performance Free Hosting •  版本控制 •  Web Base Admin/Editor
  20. 20. Github + Github Pages + Jekyll
  21. 21. Github + Github Pages + Jekyll •  版本控制 •  Markdown 標籤語言 •  Liquid Template •  Static Page Generator •  Free!!!
  22. 22. Hands-On! - Github •  https://github.com/ •  建立帳號 •  下載 Github App •  安裝 Github App
  23. 23. Github App Login Mac Windows
  24. 24. Github App Setup Mac Windows
  25. 25. Create New Repository Mac Windows
  26. 26. Create [id].github.io Repository (1) Mac Windows
  27. 27. Create [id].github.io Repository (1) Mac Windows
  28. 28. Add index.html Mac Windows
  29. 29. Say Hello World
  30. 30. Commit The Changes Mac Windows
  31. 31. Upload Pages with Git Mac Windows
  32. 32. Hello World?
  33. 33. Wait a minute…
  34. 34. Customize Domain •  在 repository 目錄下建 立名為 CNAME 檔案 •  把你的域名加入 CNAME 中 •  Commit & Push •  設定域名指向 –  Top-level domain: A record -> 204.232.175.78 –  Subdomain: CNAME record [id].github.com
  35. 35. Hello World again
  36. 36. Project Page (1) •  建立新的 repository (這邊用 prj_site) •  加入頁面檔案 & commit •  到 branch tab 從 master 建立新 branch 名為 gh-pages
  37. 37. Project Page (2) •  完成後記得要 push 出去
  38. 38. Project Page (3)
  39. 39. How About Jekyll •  Markdown 標籤語言 •  Liquid Template •  Static Page Generator •  Github Pages Support
  40. 40. Jekyll-Bootstrap (1) •  https://github.com/ plusjade/jekyll- bootstrap •  從以上網址右下方 “Clone In Desktop”
  41. 41. Jekyll-Bootstrap (2) •  切換到 Repository Jekyll 的 Setting Tab •  將 Primary Remote Repository 改為之前 網站的 uri •  Update Remote & Sync Branch
  42. 42. Jekyll-Bootstrap (3) •  切換到 History Tab •  找到之前 commit 的 前一項目 •  “Revert This Commit”& “Publish Branch”
  43. 43. Jekyll-Bootstrap (4)
  44. 44. Jekyll Directory Structure •  _config.yml •  _layout •  _include •  _post •  Index.md
  45. 45. _config.yml
  46. 46. Markdown •  Mac: http://mouapp.com/ •  Windows: http:// markdownpad.com/
  47. 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. 48. Thanks 官方網站 http://mopcon.org/ 粉絲群 https://www.facebook.com/mopcon 堅持辦在濁水溪以南的 行動應用技術研討會!!

×