用github來展示你的前端頁面吧

前言

經(jīng)常會有人問我如何才能將自己做的靜態(tài)頁面放到網(wǎng)上供他人欣賞房维,是不是需要自己有一個服務(wù)器沼瘫,是不是還要搞個域名才能訪問?對于以上問題我都會回答:用github來展示你的前端頁面吧咙俩。

工欲善其事耿戚,必先利其器。github是一個很好的代碼管理與協(xié)同開發(fā)平臺阿趁,在程序界又被稱為最大的“同性交友網(wǎng)站”膜蛔。如果你不懂git,沒有自己的github賬戶脖阵,那你就丟失了一把能夠很好的展示自我飞几,儲存知識的利器。

當然知道github的人不在少數(shù)独撇,但是大部分人可能僅知道它可以用于管理我們的項目代碼屑墨,而不知道其還可以用于展示我們前端的靜態(tài)頁面。比如:

https://github.com/luozhihao/demo

了解github的人都知道上方的地址指向的是一個github項目目錄纷铣,同時你可能還會發(fā)現(xiàn)這樣的一個地址:

https://luozhihao.github.io/demo

上方的地址就是對應(yīng)demo項目的展示頁面了卵史。

步驟

其實利用github來展示前端靜態(tài)頁面的例子很多,比如各種插件搜立、框架的demo演示地址都會這樣做以躯,那么下面我們就來實際操作一下,體驗一把展示自己前端項目成果的樂趣。

1.安裝git

如果你是mac用戶忧设,那么恭喜你mac自帶git命令功能刁标,你無須安裝git。如果你是windows用戶址晕,你可以前往windows地址下載并安裝膀懈。

2.建立倉庫

在你的github主頁,我們可以點擊右上角的加號按鈕下的“New repository”來新建一個項目倉庫谨垃,如圖所示:

點擊之后我們給倉庫取一個名字并進行相應(yīng)的描述和配置后點擊“Create repository”就ok了启搂。

3.上傳代碼

倉庫建立完畢后,這時候就需要用我們之前安裝的git命令來將本地的代碼推送到github上了刘陶。如果你僅為了展示自己的前端頁面胳赌,那么只要掌握如下命令即可(不熟悉git命令的可以參考git - 簡易指南):

(1)打開你的目錄

cd demo

(2)初始化版本庫,用于生成.git文件

git init

(3)將所有文件添加到緩存區(qū)

git add *

(4)提交當前工作空間的修改內(nèi)容

git commit -m "first commit"

(5)將倉庫連接到遠程服務(wù)器

git remote add origin <server>

(6)將改動推送到所添加的服務(wù)器上

git push -u origin master

上方server中的地址在github上創(chuàng)建倉庫后可以找到匙隔,如下:

4.創(chuàng)建gh-pages分支

之前的工作只是將我們的代碼發(fā)布到了github上demo倉庫的master分支上疑苫,當然你也可以不發(fā)布,而我們的展示頁面代碼必須發(fā)布到名為“gh-pages”的分支上纷责。方法很簡單缀匕,我們只需要在github的demo項目頁面手動創(chuàng)建gh-pages分支即可。如圖:

輸入gh-pages后創(chuàng)建即可碰逸,這樣的方式會直接拷貝master分支的所有文件到gh-pages分支乡小,而你也可以用命令行的形式創(chuàng)建并重新上傳一份新的代碼:

(1)新建并切換到gh-pages分支

git checkout --orphan gh-pages

(2)之后的操作和之前一樣,只是push的時候是gh-pages

git add *
git commit -m "update"
git push -u origin gh-pages

如此饵史,我們的demo項目就多了一個gh-pages分支满钟,里面的代碼文件就可以用來展示頁面了。

5.訪問頁面

創(chuàng)建并上傳文件至gh-pages之后胳喷,我們就可以訪問如下url來查看自己的demo了:

http://(user_name|org_name).github.io/repo_name

這里我們的demo地址為:https://luozhihao.github.io/demo/, 最終頁面如圖:

這樣我們便實現(xiàn)了利用github來展示前端靜態(tài)頁面的目標湃番。

結(jié)語

很多時候方法就擺在眼前,就看你會不會捅破那層隔膜吭露,敢不敢進行鉆研與嘗試吠撮。github之所以經(jīng)久不衰是因為其不僅解決了我們代碼提交、版本管理的問題讲竿,還提供了其他實用而獨特的功能泥兰。

本文只針對Github Pages提供給我們展示靜態(tài)頁面(不支持服務(wù)端語言)的功能做了基礎(chǔ)的介紹,至于想真正掌握并了解更加深入內(nèi)容的同學(xué)還請付諸于實踐题禀,比如利用gihub搭建博客等鞋诗。

補充:根據(jù)讀者反饋,現(xiàn)在github有一種更加簡便的方式來實現(xiàn)上述功能迈嘹,將代碼上傳至倉庫后在settings里配置下GitHub Pages為你想展示的分支就行了削彬。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末全庸,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子融痛,更是在濱河造成了極大的恐慌壶笼,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雁刷,死亡現(xiàn)場離奇詭異覆劈,居然都是意外死亡,警方通過查閱死者的電腦和手機安券,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門墩崩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氓英,“玉大人侯勉,你說我怎么就攤上這事÷敛” “怎么了址貌?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長徘键。 經(jīng)常有香客問我练对,道長,這世上最難降的妖魔是什么吹害? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任螟凭,我火速辦了婚禮,結(jié)果婚禮上它呀,老公的妹妹穿的比我還像新娘螺男。我一直安慰自己,他們只是感情好纵穿,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布下隧。 她就那樣靜靜地躺著,像睡著了一般谓媒。 火紅的嫁衣襯著肌膚如雪淆院。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天句惯,我揣著相機與錄音土辩,去河邊找鬼。 笑死抢野,一個胖子當著我的面吹牛脯燃,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蒙保,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼辕棚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逝嚎,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤扁瓢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后补君,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體引几,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年挽铁,在試婚紗的時候發(fā)現(xiàn)自己被綠了伟桅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡叽掘,死狀恐怖楣铁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情更扁,我是刑警寧澤盖腕,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站浓镜,受9級特大地震影響溃列,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膛薛,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一听隐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧哄啄,春花似錦雅任、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至虑润,卻和暖如春成玫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拳喻。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工哭当, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人冗澈。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓钦勘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親亚亲。 傳聞我的和親對象是個殘疾皇子彻采,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容