用Github Pages展示你的项目

767 查看

Github Pages

Github Pages,websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Github Pages,让用户能够自定义项目首页,同时,让其编写的网页能够通过域名访问直接展示出来。Github Pages被当作是用户编写的、托管在github上的静态网页,Github提供了一定的空间供开发者存放静态网页。

Github Pages类型

  1. User/Organization Pages(个人或公司站点)

    • 这种类型的Pages通过新建一个仓库建立,以自己的用户名命名,且每个用户名只能建立 一个;

    • 仓库主干(master)上内容被用来构建和发布页面

    • 多用于建立个人博客

  2. Project Pages 项目站点

    • 这种类型的仓库通过修改项目的Setting建立,一个项目只能建立一个;

    • 仓库新建了一个gh-pages分支用于构建和发布页面;

    • 多用于展示项目效果

而这次我们要讲的就是Project Pages(项目站点),过程十分简单,10分钟搞定。

Project Pages

操作

  1. 进入项目仓库,点击Settings

  2. Options选项右侧,有一Panel为Github Pages,点击Launch automatic page generator

  3. 设置参数:name、tagline、body。
    body为首页内容(为第6点所示),支持markdown语法:

  4. 选择首页模板,不同模板,展示效果不同:

  5. 创建pages成功,在settings页面可看到page域名,可通过此域名访问你的page:

  6. 刚刚选择的是默认模板,访问域名http://ferunner.github.io/IFE/后效果如图:

  7. 那么,如何自定义自己想要的页面样式呢?
    去往code界面,你会发现分支下多了个gh-pages分支,这是刚刚生成page后自动创建的分支,用于管理(构建和发布页面)Project Page:

  8. 进入gh-pages分支,可往分支增删文件,以实现自己想要的效果:

  9. 那么,克隆该仓库到本地,切换到gh-pages分支。
    在这里,我新增了t_1.1t_1.2两个文件夹,里面均放着对应的html和css文件。推送到远程仓库,更新文件。

  10. 进入远程仓库:

  11. 访问http://ferunner.github.io/IFE/t_1.1/t_1.1.html,即可看到你要展示的html页面:

自此,你的项目的Project Page算是完成。若要更改首页效果,则更改gh-pages分支下的index.html文件及样式文件。