前端也能變全端

前端也能變全端

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

堅持辦在濁水溪以南的 行動應用技術研討會!!