在github中使用pages上傳本身的網頁

轉載自：http://www.cnblogs.com/lijiayi/p/githubpages.html

學了前端小半年，現在寫了個本身的網頁想要去應聘，卻發現部署很麻煩，部署到阿里雲之類，買域名啊啥的還要收費，說貴也不貴，但我就是傲嬌~

google一下了解到Github有一個Github pages的功能能夠搭建博客或者託管網頁，並且免費耶，搜了下教程，猛地一看感受步驟也不是很麻煩，因此就用這個了！

教程一大堆，卻沒有幾個能看懂的，問題一：90%的都在講解如何搭建博客，和我想要將本身的網頁部署到上面仍是有點區別的。問題二：全部的教程都用到了Git，而我只知道Git是一個開源的分佈式版本控制系統。徹底不知道命令行是什麼鬼，只能照貓畫虎的小白來講，那些教程只能幫我到橋頭，但想要成功過河，還須要深夜裏的一包特濃咖啡。

 

開始教程以前的準備工做：

一、須要你本身寫的網頁文件。

二、註冊Github。

三、下載安裝git。下載地址https://git-scm.com/downloads

 

教程開始：（如下出現的test指你的網頁名或者你想起的一切名字）

步驟一：登陸到Github上，新建一個repo，命名爲test，勾選 initialize this repository with a README，點擊create repository。

 

 

 

步驟二：打開settings，有一個Github Pages 的設置，點擊Launch automatic page generator（啓動自動頁面生成器）。

 

 

步驟三：點擊頁面最後的continue to layouts，而後就能夠進入設置你的頁面主題，你會說這不是個人網頁呀，別急嘛，先選擇一個主題，點擊 publish pages。

 

 

這個時候會出現你的網頁的網址，也就是下圖的 http://jiayili.github.io/test.複製打開這個網址，你看到了什麼？

 

哇塞，這不是剛本身設置選擇的主題頁面嗎？

 

好了，別激動了，真正讓一個小白你發瘋的階段開始了，有了本身的網址，但頁面顯示的是什麼鬼？

至此以上，github上要處理的操做告一段落，該上Git了！

 

步驟四 ：打開此電腦，選擇一個盤，好比 f 盤，右鍵空白處點擊 git bash here。

 

步驟五：輸入以下命令，用來在 f 盤建立 test 文件放你的github上的test repository，克隆test repository到 test 文件中。

 

這個時候你的 f 盤，就會多一個 test 文件，打開它，

 

會看到一個 README.md 的文件，這個文件是從哪來的呢？追溯到gihub上，你會發現你有兩個分支（branches），而 README 文件是來自 master 分支。

 

而咱們須要編輯的是另外一個分支——gh-pages，由於這個分支纔可以真正定義github pages的內容和樣式，也就是能夠呈現你網頁的地方。

 

步驟六：輸入如下命令，爲了在本地新建一個gh-pages分支，而這個分支是遠程分支origin/gh-pages的鏡像，也就是咱們能夠在本地的gh-pages看到github上的gh-pages的內容。

 

這個時候咱們再打開 f 盤，發現變樣了

剛纔仍是README呢，怎們如今成了3個文件了，這3個文件來自哪？

 

來自github 上的 gh-pages 分支下的文件。

打開f 盤中的 index.html，你會發現就是我們一開始選擇主題的頁面。那咱們將這個頁面替換成本身coding的網頁不就行了？

 

步驟七：執行以下命令，刪除原有的gh-pages文件，並提交（commit）本次修改。

 

這個時候 f 盤沒有文件。

 

步驟八：將本身的網頁文件複製粘貼至 f 盤的 test 文件中

 

 

輸入以下命令，爲了本地gh-pages中的網頁文件同步到遠程的gh-pages中。

 

輸入最後一行 git push origin gh-pages，按回車，等一會，會有彈出框讓你輸入你的 github 帳號和密碼。

 

ok以後耐心等待。

當出現像下圖中的命令行以後，你已經完成了99%。

 

最後一步：打開瀏覽器輸入給你的網址加上 test.html，而後重重的按下回車。

 

 

恭喜你，成功了！！！哦不，還差一步，不評論關注一下我？

 

 

附錄一：經常使用git命令：

$ git clone  //本地若是無遠程代碼，先作這步，否則就忽略

$ cd //定位到你blog的目錄下

$ git status //查看本地本身修改了多少文件

$ git add . //添加遠程不存在的git文件

$ git commit  -m "what I want told to someone" //提交修改

$ git push  //更新到遠程服務器上

$ git rm //移除文件

 

附錄二：如何修改你的網頁？

方法一：在github上的gh-pages分支中直接進行修改。（若是不添加新的文件推薦此法）

方法二：在github客戶端進行修改在同步。（若是添加了新的文集推薦此法）