資訊創意課程 - create a personal website 1
DESCRIPTION
Create A Personal Website.TRANSCRIPT
WHO AM I?
• @taichunmin
• 天匠數位娛樂有限公司
• 中興⼤大學資⼯工系103級
• PHP, C++
• http://taichunmin.idv.tw/
需要下載的程式清單
• Sublime Text 3
• Git GUI Tool • Windows - TortoiseGit • All - SourceTree
• SSH Key Tools (簡易說明) • Windows: Putty • Linux & OS X: 已內建, apt-get or yum
Windows: Git,Tortoise,Sublime,Putty
Mac: Sourcetree,Sublime Ubuntu: Sublime
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 )
DEMO: http://taichunmin.idv.tw/
網站架構
• 使⽤用 Github Pages 作為網⾴頁空間
• Responsive Website Design (Bootstrap 3)
• HTML5 + CSS 3 + jQuery
• No Dreamweaver!
TOOLS & SERVICES
建⽴立公私鑰
建⽴立GITHUB帳號
使⽤用學校信箱申請 GITHUB EDU
• 使⽤用 [email protected]
• 到 http://github.com/edu
• 還有 Student Developer Pack 可申請
建⽴立預設GITHUB PAGE
ADD SSH KEY TO GITHUB
• 將 public key 新增即可
• 請記得留好 private key
安裝SUBLIME PACKAGE CONTROL
• Package Control
• Emmet
• ConvertToUTF8
• Sidebar Enhancement
• BracketHighlighter
安裝 PACKAGE CONTROLhttps://sublime.wbond.net/installation
安裝套件CTRL + SHIFT + P
SUBLIME PREFERENCE
• http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/customization/settings.html
• My Setting
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