如何使用 GitHub Pages 预览 HTML

梯子恢复后请重新选择github上的图床

  • 前言

        很多时候,我们在打开一个web项目想做的第一件事,并不是查看CSS样式,也不是JS脚本逻辑,更不是背后的 后台交互逻辑。我们只是想很直观的看到整个web页面的呈现。但问题就来了

梯子恢复后请重新选择github上的图床

        我们通常的做法是,选择 git clone来将整个仓库down到本机,再打开项目进行浏览。但能否有更简洁的方法能够直接观看页面效果呢。这个时候GitHub内置的GitHub Pages就很好的满足了这一点。(若是要编写页面实时查看效果还是建议clone到本地进行操作)

GitHub Pages 可以托管网页
  • 操作过程

首先我们打开一个创建并上传了的项目,并点击Settings

梯子恢复后请重新选择github上的图床

下划找到GitHub Pages部分,将Source选项里的None,更改为master branch

梯子恢复后请重新选择github上的图床

随后你就会得到这个一个网址,点击即可进入观看到项目的HTML文件

梯子恢复后请重新选择github上的图床

  • 结语

是不是非常方便?越是去了解github就越是体会到这个平台的精妙。其实到了后面我关注到的重点并不是简便的查看页面效果。而是Github Pages可以搭建博客,绑定域名,是基于什么原理的呢??

这里现将答案附上,但无奈水平问题只能读个一知半解。待以后复习回顾之。

作者:Rainux Luo
链接:https://www.zhihu.com/question/26609475/answer/37395382
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

1. GitHub/GitCafe Pages 服务会为每个包含 gh-pages/gitcafe-pages 分支的项目创建包含该分支内容的 wwwroot 目录,这些目录符合特定命名规则。
2. Web server 被配置为使用 name-based virtual server 方式 publish 所有以上 wwwroot 目录。这些 virtual server 的域名就包括大家熟知的 {username}.http://gitcafe.io 和 Pages 用户绑定的任意域名。
3. Pages 用户将绑定的域名通过 A 记录或 CNAME 记录(具体哪个并不重要,CNAME 记录的好处只在于 GitHub/GitCafe Pages 服务器变更 IP 时用户无需修改域名指向)将绑定的域名指向以上 Web server 所在主机,我们所有人就可以像访问任何普通静态网站一样访问到 Pages 站点。至于 blog,原本不必是 GitHub/GitCafe Pages 服务的功能。以上原理告诉我们 GitHub/GitCafe Pages 可以将任意静态页面内容 host 为一个网站,所以我们可以使用 Jeklly、Ocotopress、Hexo 等任何输出静态页面内容的工具生成 blog 或是普通网站。只是因为这些工具中 Jeklly 最流行且简洁灵活,GitHub/GitCafe Pages 选择了直接在服务器端支持它,在 publish 前对 gh-pages/gitcafe-pages 分支内容执行 Jeklly build。

神奇的GitHub Pages