[技術]善用 Github 的免費網頁服務 -- 使用者等級

作者: neversay (子不語)   2014-07-26 15:12:00
圖文step by step版:
http://neversaycoding.tumblr.com/post/92879698627/github
PS:放在github上的檔案基本上是完全公開的,所以如果有老闆要你趕出來的網頁
或者不想被人看光的東西,請不要放上去!
最近為了找個網路伺服器來放自己的展示網頁,搜尋了一些商業網頁網站方案,才
赫然發現原來Github就有提供免費的簡單網頁伺服器!
雖然他只能使用純粹的HTML網頁,不能使用PHP/RoR/Nodejs等真正的網頁伺服器,
但是拿來放展示概念的概念網頁已經很夠用了,更何況它本身整合了git,所以還可
以享受到無痕整合版本管理的功能。實在是很方便!
Github提供兩種形態的網頁服務,第一種是以使用者或組織等級的網頁,第二種是
專案等級的網頁空間,我們先來認識怎麼設定使用者等級的網頁空間。
1.一開始你必須登入Github。在Github的主頁面,按下"+New repository"進入創
造專案頁面。
2.在創造專案的頁面,輸入專案名稱"使用者帳號.github.io",如果是組織帳號則換
成組織帳號。
例如我的帳號是test1234,那我要創造的專案名稱就是test1234.github.io。
這點老實說有點違反直覺,因為取專案名稱時,幾乎沒有人會使用點”.”這個符號,
第一次看到還真的有點看不懂。
創造專案時請將它選成公開專案(public),否則其他人無法看到頁面。最後按下
"Create repository"完成創造步驟。
3.專案剛創造完之後,專案頁面應該是乾乾淨淨啥都沒有的狀態如下圖:[圖]
這時候請把新專案用git clone複製到自己的電腦,然後在裡面建立一個index.html
頁面,之後將它用git add .;git ci上傳到新建的master分支。在我的Linux上指令
大概像這樣:
[ ~] $ git clone git@github.com:neversay/neversay.github.io.git
Cloning into 'neversay.github.io'...
warning: You appear to have cloned an empty repository.
[ ~] $ cd neversay.github.io/
[ ~/neversay.github.io] (master) $ echo "Hello world!" > index.html
[ ~/neversay.github.io] (master) $ git add .
[ ~/neversay.github.io] (master) $ git ci
[master (root-commit) 3747b23] Hello world!
1 file changed, 7 insertions(+)
create mode 100644 index.html
[ ~/neversay.github.io] (master) $ git push origin master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 264 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To git@github.com:neversay/neversay.github.io.git
* [new branch] master -> master
[ ~/neversay.github.io] (master) $
因為master這個分支在新建專案根本還不存在,所以在使用git push把程式推
到上游時要用git push origin master指明是推到master這個分支,這樣git會
幫你在Github上自動建立master分支。之後就不用這麼麻煩了。
4.index.html頁面上傳後,在Github的專案頁面就能看到它了,例如我的專案頁
面在這裡:https://github.com/neversay/neversay.github.io
5.根據Github的說明,新的頁面需要五分鐘才能更新完成,所以請耐心等待再打
開頁面。這裡是我的展示頁面:http://neversay.github.io/
6.而事實上,我們也可以在這個專案之內創造資料夾,然後在資料夾內放入頁面,
例如我就開了一個叫做dirdemo的資料夾,放了另一個index.html:
http://neversay.github.io/dirdemo/,這樣就能分門別類把不同專案的展示頁
面分開儲存了。
7.除此之外,你也能把各種檔案放上去,圖檔/JS/CSS都可以正常取用,例如這張
展示圖檔:http://neversay.github.io/dirdemo/image.jpg。
簡而言之,Github給了眾多前端開發者一個免錢方便的途徑存放我們的展示作品。
除了再也不怕硬碟壞掉作品救不回來,也因為有了版本管理,也不怕不小心把展示
作品改爆了。
作者: pkmilk   2014-07-26 20:43:00
作者: jyunwei (jyunwei)   2014-07-26 22:25:00
作者: jaceka (3247 三等長 >)))   2014-07-26 23:37:00
作者: happyqaz (( ))   2014-07-26 23:40:00
推!
作者: SmallDruid (小d)   2014-07-26 23:47:00
剛好有機會研究git了
作者: SansWord (是妳)   2014-07-27 04:36:00
推,dropbox 的public 也有這個功能,但github 速度快很多! 搭配一些 js framework 真的很好用!
作者: andreli (小狗跟正妹是我的死穴)   2014-07-27 11:46:00
我七月初也剛好講過類似的東西 http://goo.gl/VFQugw搭配 parse.com, 就前後端都通了。
作者: leochen0818 (Leo)   2014-07-28 11:25:00
第三個步驟看不懂@@" github給的那串指令是要打在哪裡
作者: neversay (子不語)   2014-07-29 12:55:00
第三點在終端機裡面,沒有終端機的話可以用下一篇不需要終端機的方法
作者: jmarr (生鏽的吉他弦)   2014-07-29 14:15:00
推 不知道還有這樣的用法

Links booklink

Contact Us: admin [ a t ] ucptt.com