如何预览Github上的页面

前言

很多新手把自己的网页上传到github仓库中却发现点进去相应的html文件显示出来的是下面代码,而不是自己想在网上看到自己仓库中的demo(也就是网页的效果)

 
img

那么我们有没有办法预览项目中的html网页呢?好在github已经推出了 GitHub Pages 功能,让大家方便的预览自己的 HTML。下面就给大家做一个简易教程。

步骤

1. 登入 GitHub,新建一个 repo,设置如下:

 
img1
 
img2

2. 进入「settings」页面:

 
img3

3. 往下滚,按照图片中1-2-3的顺序,开启 GitHub Pages 功能,得到一个「预览地址」,我的「预览地址」是 https://phoebe-choi.github.io/demo/.

 
img5

4. 以后你就用这个「预览地址」来预览你的 html,比如你的 html 路径是 test/index.html,那么预览链接就是 https://phoebe-choi.github.io/demo/test/index.html 步骤如下:

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

  • 在浏览器输入: https://phoebe-choi.github.io/demo/test/index.html进行预览

这样,你就能自己随时预览 GitHub 里的页面了!

以后,你只需要用 git 上传代码到这个仓库,就可以拿到作业的预览链接了!

猜你喜欢

转载自www.cnblogs.com/ziyoublog/p/9957165.html
今日推荐