用github来展示你的前端页面

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
(6)将改动推送到所添加的服务器上

git push -u origin master
上方server中的地址在github上创建仓库后可以找到

4.创建gh-pages分支

之前的工作只是将我们的代码发布到了github上demo仓库的master分支上,当然你也可以不发布,而我们的展示页面代码必须发布到名为“gh-pages”的分支上。方法很简单,我们只需要在github的demo项目页面手动创建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

我们这里的访问地址是
https://ormoots.github.io/Merory-Challenge/

posted @ 2017-02-28 22:14  刘威益佰  阅读(290)  评论(0编辑  收藏  举报