如何在Github Pages搭建自己寫的頁面?


 

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

 

開始教程之前的准備工作:

1、需要你自己寫的網頁文件。

2、注冊Github。

3、下載安裝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客戶端進行修改在同步。(如果添加了新的文集推薦此法)

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM