用github来展现你的前端页面吧

前言

常常会有人问我如何才能将本身作的静态页面放到网上供他人欣赏，是否是须要本身有一个服务器，是否是还要搞个域名才能访问？对于以上问题我都会回答：用github来展现你的前端页面吧。

工欲善其事，必先利其器。github是一个很好的代码管理与协同开发平台，在程序界又被称为最大的“同性交友网站”。若是你不懂git，没有本身的github帐户，那你就丢失了一把可以很好的展现自我，储存知识的利器。

固然知道github的人不在少数，可是大部分人可能仅知道它能够用于管理咱们的项目代码，而不知道其还能够用于展现咱们前端的静态页面。好比：

https://github.com/luozhihao/...

了解github的人都知道上方的地址指向的是一个github项目目录，同时你可能还会发现这样的一个地址：

https://luozhihao.github.io/demo

上方的地址就是对应demo项目的展现页面了。

步骤

其实利用github来展现前端静态页面的例子不少，好比各类插件、框架的demo演示地址都会这样作，那么下面咱们就来实际操做一下，体验一把展现本身前端项目成果的乐趣。

1.安装git

若是你是mac用户，那么恭喜你mac自带git命令功能，你无须安装git。若是你是windows用户，你能够前往windows地址下载并安装。

2.创建仓库

在你的github主页，咱们能够点击右上角的加号按钮下的“New repository”来新建一个项目仓库，如图所示：

点击以后咱们给仓库取一个名字并进行相应的描述和配置后点击“Create repository”就ok了。

3.上传代码

仓库创建完毕后，这时候就须要用咱们以前安装的git命令来将本地的代码推送到github上了。若是你仅为了展现本身的前端页面，那么只要掌握以下命令便可（不熟悉git命令的能够参考git - 简易指南）：

（1）打开你的目录

cd demo

（2）初始化版本库，用于生成.git文件

git init

（3）将全部文件添加到缓存区

git add *

（4）提交当前工做空间的修改内容

git commit -m "first commit"

（5）将仓库链接到远程服务器

git remote add origin <server>

（6）将改动推送到所添加的服务器上

git push -u origin master

上方server中的地址在github上建立仓库后能够找到，以下：

4.建立gh-pages分支

以前的工做只是将咱们的代码发布到了github上demo仓库的master分支上，固然你也能够不发布，而咱们的展现页面代码必须发布到名为“gh-pages”的分支上。方法很简单，咱们只须要在github的demo项目页面手动建立gh-pages分支便可。如图：

输入gh-pages后建立便可，这样的方式会直接拷贝master分支的全部文件到gh-pages分支，而你也能够用命令行的形式建立并从新上传一份新的代码：

（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.访问页面

建立并上传文件至gh-pages以后，咱们就能够访问以下url来查看本身的demo了：

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

这里咱们的demo地址为：https://luozhihao.github.io/d... 最终页面如图：

这样咱们便实现了利用github来展现前端静态页面的目标。

结语

不少时候方法就摆在眼前，就看你会不会捅破那层隔膜，敢不敢进行钻研与尝试。github之因此经久不衰是由于其不只解决了咱们代码提交、版本管理的问题，还提供了其余实用而独特的功能。

本文只针对Github Pages提供给咱们展现静态页面（不支持服务端语言）的功能作了基础的介绍，至于想真正掌握并了解更加深刻内容的同窗还请付诸于实践，好比利用gihub搭建博客等。

补充：根据读者反馈，如今github有一种更加简便的方式来实现上述功能，将代码上传至仓库后在settings里配置下GitHub Pages为你想展现的分支就好了。

本文为劳卜原创文章，首发于微信公众号：前端呼啦圈（Love-FED） 转载请注明来自——微信公众号：前端呼啦圈（Love-FED）