Create A Personal Website.

1. BOOTSTRAP X GITHUB PAGE
CREATE A PERSONAL WEBSITE
http://goo.gl/xJZbg2

2. WHO AM I?
• @taichunmin
• 天匠數位娛樂有限公司
• 中興⼤大學資⼯工系103級
• PHP, C++
• http://taichunmin.idv.tw/

3. 需要下載的程式清單
• Sublime Text 3
• Git GUI Tool
• Windows - TortoiseGit
• All - SourceTree
• SSH Key Tools （簡易說明）
• Windows: Putty
• Linux & OS X: 已內建, apt-get or yum

4. Windows: Git,Tortoise,Sublime,Putty
Mac: Sourcetree,Sublime
Ubuntu: Sublime

5. GOAL: PERSONAL WEBSITE
http://taichunmin.idv.tw/
No Dreamweaver!
No mobile + desktop version! No User-Agent!
Data Flow is IMPORTANT!
Grid System!
Mobile First! ( iPhone -> iPad -> Desktop )

6. DEMO:
http://taichunmin.idv.tw/

7. 網站架構
• 使⽤用 Github Pages 作為網⾴頁空間
• Responsive Website Design (Bootstrap 3)
• HTML5 + CSS 3 + jQuery
• No Dreamweaver!

8. TOOLS & SERVICES

9. 建⽴立公私鑰

10. 建⽴立GITHUB帳號
• http://github.com/
• 程式設計師的社交網站

11. 建⽴立GITHUB帳號

12. 使⽤用學校信箱申請
GITHUB EDU
• 使⽤用 s1030560XX@mail.nchu.edu.tw
• 到 http://github.com/edu
• 還有 Student Developer Pack 可申請

13. 建⽴立預設GITHUB PAGE

14. ADD SSH KEY TO GITHUB
• 將 public key 新增即可
• 請記得留好 private key

15. 安裝SUBLIME
PACKAGE CONTROL
• Package Control
• Emmet
• ConvertToUTF8
• Sidebar Enhancement
• BracketHighlighter

16. 安裝 PACKAGE CONTROL
https://sublime.wbond.net/installation

17. 安裝套件
CTRL + SHIFT + P

18. SUBLIME PREFERENCE
• http://sublime-text-unofficial-documentation.
readthedocs.org/en/latest/
customization/settings.html
• My Setting

19. SUBLIME HOTKEYS
• http://sublime-text-unofficial-documentation.
readthedocs.org/en/latest/
• http://zh.lucida.me/blog/sublime-text-complete-guide/
• http://shinychang.net/article/
52ce52cf04d725e41fa1b666