在github pages建立一個主頁
之前在github上面建立了一個主頁,分享一下經驗。請看如下步驟:
1,安裝nodejs(直接下載二進制安裝、編譯安裝、或者使用nvm都可以),安裝yo,請參考“ http://yeoman.io/learning/ ” ,命令:
npm install -g yo bower grunt-cli gulp
2,我們打算使用AngularJS,所以需要安裝:
npm install -g generator-angular
3,創建自己的主頁項目目錄,然后在里面生成應用框架,比如我在一個叫“me”的目錄里面建立:
mkdir me
cd me
yo angular
過程中會詢問是否使用bootstrap,根據自己的需要,默認會使用。
4,完成后使用grunt serve可以看到,已經有簡單的頁面了,如果不想使用bootstrap,而是使用foundation框架可以這樣安裝:
bower install foundation –save
運行完后,可以對“app”目錄里面默認生成的項目文件進行一些清理,刪除自己不需要的代碼或文件
5,使用grunt build生成項目,完成后可以去dist目錄里面查看,如果需要本地預覽,可以安裝http-server:
npm install -g http-server
cd dist
http-server
默認使用了8080端口,可以使用 -p ???? 來指定新端口
6,發布到github(請自己申請github賬號),根據自己的情況,如果是在普通項目倉庫,則發布dist目錄到gh-pages,而username.github.com倉庫則發布dist目錄到master分支,下面示范第二種情況:
先登陸github,創建倉庫“username.github.com”(替換username為你自己的用戶名,com可以為io),然后初始化git倉庫 git init
git add .
git commit -m “init”
git remote add origin git@github.com:username/username.github.com
由于我們要發布dist目錄到master分支,所以創建一個source分支來保存源碼: git checkout -b sourcegit push origin source
遠程master分支不需要了,刪除以免下一步出錯: git push origin –delete master
同時可以也刪除本地master分支: git branch -d master
打開文件.gitignore,刪除里面的/dist,然后添加dist目錄到倉庫中: git add dist && git commit -m “Initial dist subtree commit”
然后就可以將生成的網站發布到github master分支了: git subtree push –prefix dist origin master
以后每次改動,就重新執行grunt build,然后重新發布即可。可以程序化這個步驟,根據自己的習慣。
7,經過以上步驟,我們已經在github pages建立了自己的主頁,如果需要綁定域名,則需在master分支根目錄添加CNAME文件,參考 http://pages.github.com/ 說明文檔,剩下的就是自己開發了。
備注: 如果遇到npm安裝過慢的現象,可以使用淘寶的NPM鏡像,鏈接: http://npm.taobao.org/