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

看板Soft_Job作者neversay (子不語)時間11年前 (2014/07/26 15:12)推噓9(9推 0噓 4→)

留言13則, 10人參與討論串1/1

圖文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給了眾多前端開發者一個免錢方便的途徑存放我們的展示作品。除了再也不怕硬碟壞掉作品救不回來，也因為有了版本管理，也不怕不小心把展示作品改爆了。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 50.156.87.148 ※ 文章網址: http://www.ptt.cc/bbs/Soft_Job/M.1406358727.A.4F1.html ※ 編輯: neversay (50.156.87.148), 07/26/2014 15:12:43

推

pkmilk

07/26 20:43, , 1^F

07/26 20:43, 1^F

推

jyunwei

07/26 22:25, , 2^F

07/26 22:25, 2^F

推

jaceka

07/26 23:37, , 3^F

07/26 23:37, 3^F