資訊創意課程 - create a personal website 1

BOOTSTRAP X GITHUB PAGECREATE A PERSONAL WEBSITE

http://goo.gl/xJZbg2

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帳號

• http://github.com/

• 程式設計師的社交網站

建⽴立GITHUB帳號

使⽤用學校信箱申請 GITHUB EDU

• 使⽤用 s1030560XX@mail.nchu.edu.tw

• 到 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