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