在github中使用pages上传自己的网页
轉(zhuǎn)載自：http://www.cnblogs.com/lijiayi/p/githubpages.html
學(xué)了前端小半年，如今寫了個(gè)自己的網(wǎng)頁(yè)想要去應(yīng)聘，卻發(fā)現(xiàn)部署很麻煩，部署到阿里云之類，買域名啊啥的還要收費(fèi)，說(shuō)貴也不貴，但我就是傲嬌~
google一下了解到Github有一個(gè)Github pages的功能可以搭建博客或者托管網(wǎng)頁(yè)，而且免費(fèi)耶，搜了下教程，猛地一看感覺(jué)步驟也不是很麻煩，所以就用這個(gè)了！
教程一大堆，卻沒(méi)有幾個(gè)能看懂的，問(wèn)題一：90%的都在講解如何搭建博客，和我想要將自己的網(wǎng)頁(yè)部署到上面還是有點(diǎn)區(qū)別的。問(wèn)題二：所有的教程都用到了Git，而我只知道Git是一個(gè)開源的分布式版本控制系統(tǒng)。完全不知道命令行是什么鬼，只能照貓畫虎的小白來(lái)說(shuō)，那些教程只能幫我到橋頭，但想要成功過(guò)河，還需要深夜里的一包特濃咖啡。
?
開始教程之前的準(zhǔn)備工作：
1、需要你自己寫的網(wǎng)頁(yè)文件。
2、注冊(cè)Github。
3、下載安裝git。下載地址https://git-scm.com/downloads
?
教程開始：（以下出現(xiàn)的test指你的網(wǎng)頁(yè)名或者你想起的一切名字）
步驟一：登錄到Github上，新建一個(gè)repo，命名為test，勾選 initialize this repository with a README，點(diǎn)擊create repository。
?
?
?
步驟二：打開settings，有一個(gè)Github Pages 的設(shè)置，點(diǎn)擊Launch automatic page generator（啟動(dòng)自動(dòng)頁(yè)面生成器）。
?
?
步驟三：點(diǎn)擊頁(yè)面最后的continue to layouts，然后就可以進(jìn)入設(shè)置你的頁(yè)面主題，你會(huì)說(shuō)這不是我的網(wǎng)頁(yè)呀，別急嘛，先選擇一個(gè)主題，點(diǎn)擊 publish pages。
?
?
這個(gè)時(shí)候會(huì)出現(xiàn)你的網(wǎng)頁(yè)的網(wǎng)址，也就是下圖的 http://jiayili.github.io/test.復(fù)制打開這個(gè)網(wǎng)址，你看到了什么？
?
哇塞，這不是剛自己設(shè)置選擇的主題頁(yè)面嗎？
?
好了，別激動(dòng)了，真正讓一個(gè)小白你發(fā)瘋的階段開始了，有了自己的網(wǎng)址，但頁(yè)面顯示的是什么鬼？
至此以上，github上要處理的操作告一段落，該上Git了！
?
步驟四?：打開此電腦，選擇一個(gè)盤，比如 f 盤，右鍵空白處點(diǎn)擊 git bash here。
?
步驟五：輸入如下命令，用來(lái)在 f 盤創(chuàng)建 test 文件放你的github上的test repository，克隆test repository到 test 文件中。
?
這個(gè)時(shí)候你的 f 盤，就會(huì)多一個(gè) test 文件，打開它，
?
會(huì)看到一個(gè) README.md 的文件，這個(gè)文件是從哪來(lái)的呢？追溯到gihub上，你會(huì)發(fā)現(xiàn)你有兩個(gè)分支（branches），而 README 文件是來(lái)自 master 分支。
?
而我們需要編輯的是另一個(gè)分支——gh-pages，因?yàn)檫@個(gè)分支才能夠真正定義github pages的內(nèi)容和樣式，也就是可以呈現(xiàn)你網(wǎng)頁(yè)的地方。
?
步驟六：輸入以下命令，為了在本地新建一個(gè)gh-pages分支，而這個(gè)分支是遠(yuǎn)程分支origin/gh-pages的鏡像，也就是我們可以在本地的gh-pages看到github上的gh-pages的內(nèi)容。
?
這個(gè)時(shí)候我們?cè)俅蜷_ f 盤，發(fā)現(xiàn)變樣了
剛才還是README呢，怎們現(xiàn)在成了3個(gè)文件了，這3個(gè)文件來(lái)自哪？
?
來(lái)自github 上的 gh-pages 分支下的文件。
打開f 盤中的 index.html，你會(huì)發(fā)現(xiàn)就是咱們一開始選擇主題的頁(yè)面。那我們將這個(gè)頁(yè)面替換成自己coding的網(wǎng)頁(yè)不就好了？
?
步驟七：執(zhí)行如下命令，刪除原有的gh-pages文件，并提交（commit）本次修改。
?
這個(gè)時(shí)候 f 盤沒(méi)有文件。
?
步驟八：將自己的網(wǎng)頁(yè)文件復(fù)制粘貼至 f 盤的 test 文件中
?
?
輸入如下命令，為了本地gh-pages中的網(wǎng)頁(yè)文件同步到遠(yuǎn)程的gh-pages中。
?
輸入最后一行 git push origin gh-pages，按回車，等一會(huì)，會(huì)有彈出框讓你輸入你的 github 賬號(hào)和密碼。
?
ok之后耐心等待。
當(dāng)出現(xiàn)像下圖中的命令行之后，你已經(jīng)完成了99%。
?
最后一步：打開瀏覽器輸入給你的網(wǎng)址加上 test.html，然后重重的按下回車。
?
?
恭喜你，成功了！！！哦不，還差一步，不評(píng)論關(guān)注一下我？
?
?
附錄一：常用git命令：
$ git clone??//本地如果無(wú)遠(yuǎn)程代碼，先做這步，不然就忽略
$ cd //定位到你blog的目錄下
$ git status //查看本地自己修改了多少文件
$ git add . //添加遠(yuǎn)程不存在的git文件
$ git commit ?-m "what I want told to someone" //提交修改
$ git push ?//更新到遠(yuǎn)程服務(wù)器上
$ git rm //移除文件
?
附錄二：如何修改你的網(wǎng)頁(yè)？
方法一：在github上的gh-pages分支中直接進(jìn)行修改。（如果不添加新的文件推薦此法）
方法二：在github客戶端進(jìn)行修改在同步。（如果添加了新的文集推薦此法）
轉(zhuǎn)載于:https://www.cnblogs.com/ztoz/p/5515475.html
總結(jié)
以上是生活随笔為你收集整理的在github中使用pages上传自己的网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vscode-扩展插件
- 下一篇： 重量级框架