当没有自己的服务器时,可以使用 Github pages 服务来展示自己的前端页面。

目录速览

  1. 前言
  2. 步骤
  3. 参考链接

前言

相信大多数人都知道如何利用 Github 搭建自己的静态博客页面,那么要想展示自己的静态页面又或者是多个静态页面呢?一定要租用一个服务器再配上一个域名吗?暴殄天物!Github 既然都可以搭建一个静态博客页面了,那么搭建一个或多个普通的静态页面应该是不成问题的,这就需要不折不挠的捣鼓精神了!

平时我们在Github Page上搭建的静态博客访问地址格式一般为:

1
https://[github账号名].github.io

例如:

1
https://ironmaxtory.github.io

那么学习完本节之后,我们其他搭建在Github上的静态页面的访问格式就为:

1
https://[github账号名].github.io/xxx

例如:

1
2
3
4
5
https://ironmaxtory.github.io/ironmachloe

https://ironmaxtory.github.io/ironmax

https://ironmaxtory.github.io/chloe

其实利用github来展示前端静态页面的例子很多,比如各种插件、框架的demo演示地址都会这样做,那么下面我们就来实际操作一下,体验一把展示自己前端项目成果的乐趣。

步骤

  1. 安装 Git
    程序员这点素质还是得自带的
  2. 建立仓库
    在自己的Github中新建一个仓库,假设新仓库名为demo,且远程仓库地址为:`git@github.com:[你的github账号名]/demo.git`;然后在本地仓库下添加远程仓库地址,例:

    1
    $ git remote add origin git@github.com:ironmaxtory/demo.git
  3. 上传代码
    git addgit commit之后,进行远程推送

    1
    2
    3
    $ git add --all
    $ git commit -m '提交代码'
    $ git push origin master #将本地仓库所处分支的代码推送到远程仓库的master分支里
  4. 创建gh-pages分支
    输入gh-pages后创建即可,这样的方式会直接拷贝master分支的所有文件到gh-pages分支
    图片

  5. 进行访问
    在地址栏上直接输入:[你的github账号名].github.io/demo,就可以直接访问了,例:
    1
    https://ironmaxtory.github.io/demo

PS: 如果不想手动创建分支,也可以使用代码创建,并重新上传一份,且master分支也不需要有代码

1
2
3
4
5
6
# 新建并切换到gh-pages分支
$ git checkout --orphan gh-pages
$ git add *
$ git commit -m 'update'
# -u的作用是指定默认提交的仓库及分支,以后输入 git push,就直接相当于 git push origin gh-pages
$ git push -u origin gh-pages

参考链接

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