如何预览 GitHub 上的页面

1. 前言

作为一个前端程序员，使用github的仓库(repositories)来托管代码是一件再正常不过的事情了。很多的前端都会将自己的工程代码push到github上。然而上传之后发现自己的html文档是这样被显示的：

在仓库repositories点开html

发现点开之后只有html的源代码，并没有能预览的界面。那么如何能正确的预览项目中的html网页呢？

好在github已经推出了 GitHub Pages 功能，让大家方便的预览自己的 HTML。下面就给大家做一个简易教程。

2. 预览方法

1. 登录github，点击新建仓库(repositories)，如下图所示：

   
   点击新建仓库

2. 新建一个仓库(repositories):

   
   新建一个仓库

3. 在仓库中进入setting界面

   
   进入setting界面

4. 在setting界面中往下翻，找到并开启 GitHub Pages 功能，得到一个「预览地址」，我的「预览地址」是https://tinyfatboy.github.io/PageDemos/
   

   开启GitHub Pages 功能

5. 得到「预览地址」后就可以根据相对路径来预览自己的html文档了，我们先在仓库中新建一个test.html:

   
   新建test.html文件1
   新建test.html文件2

6. 编辑好后点击下方的create new file即可创建文件，根据刚才创建的文件名称的相对路径就可以用「预览地址」来预览html文件了
   

   页面地址
   在浏览器输入: https://tinyfatboy.github.io/PageDemos/test.html 进行预览 预览页面

3. 用git将本地仓库上传到github仓库预览（待续...）

4. 参考文件

1. 如何预览 GitHub 上的页面
2. GitHub Pages官方教程