如何预览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 上传代码到这个仓库,就可以拿到作业的预览链接了!

原文地址:https://www.cnblogs.com/ziyoublog/p/9957165.html

时间: 2024-10-24 15:50:48

如何预览Github上的页面的相关文章

预览 GitHub 项目里的网页

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/

小议头像预览裁剪上传的实现

在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 HTML5 是可以的.不过IE6-8怎么破?目前比较通用的方案都是 flash 解决. 说道头像预览和裁剪,我最熟悉的就是 Discuz 的那个了,非常方便好用.不仅可以选择本地图片,还能直接调用摄像头拍摄,当然前提是你必须有个摄像头. 于是我心血来潮的想把他剥离出来给项目用,于是有就了此文..我就不说怎么提取怎么调用,就简单的谈谈他是怎么处理图片好了,反正不是我们想的那样,和我想的出入非常大. 这个插件呢,差不多分为四步处理:1. 前台

Android手势识别 Camera 预览界面上显示文字 布局注意事项(merge布局)

通常在Surfaceview作为预览视频帧的载体,有时需在上面显示提示文字.以前我弄的都好好的,今天忽然发现叠加的TextView不管咋弄都出不来文字了,跟Surfaceview一起放在FrameLayout也不行,后来想到merge布局,发现也不行.大爷的,奇了怪了,最后发现了原因,原来是顺序问题.也即无论是在RelativeLayout里还是merge布局里,View是逐个叠加上去的,一层一层铺上去的.如果你先放TextView在最前面,那肯定被后面的全屏Surfaceview覆盖了.用常规

js实现图片预览以及上传

HTML 代码: <input  type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/>  <input  type="hidden" id="hidden_s&quo

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能, 比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览, 很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消上传,弃用这次的上传), 这整个过程都白费了.我们希望能够在图片上传之前就能进行图片的预览,这样就避免了不必要的网络请求和时间等待. 在IE中有如下方式 var url; var file

图片选择,预览及上传

记得以前老师教我们写项目,要实现图片上传的功能,我们都是先用一个input选好图片,然后单独做一个提交图片的按钮,点击按钮,使用form表单提交到后台,然后通过 // 获取上传的文件 HttpPostedFileBase file = Request.Files[0]; 这一行来获取上传到后台的文件,然后来验证上传的文件是不是图片,其实在前台,通过设置input属性,就可以限制我们只能选择图片文件了,当然,后台的验证也是不能少的, // 设置accept属性,限制能选择的文件类型为图片 <inp

如何修改 VC6.0 4.0 2010 打印预览界面上的文字

前言:虽然早已下决心不再碰微软的东西,但手头的项目还得需要维护.遇到问题还能解决. 问题由来: 之前的软件开发是基于中文环境开发的,建立项目的时候,选择了中文,为了方便客户使用,我们使用了静态编译的方法,这样用户用我们的软件就不用费尽心思的去装微软的库了,如此以来,像诸如调用"打印预览"功能时,界面上显示的是 "打印", "下一页"等全部是中文.后期需要做成其他语言的版本.我们自己开发的对话框全是以语言文件的格式来存放的,只需替换语言文件而不需要

图片预览剪裁上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #mask { float: left; w

如何预览github中的html页面

在github里面的文件路径是https://github.com/gavin125/Sass-test/blob/master/html/index.html 那么我们需要在这个地址前面加上http://htmlpreview.github.io/? 最终生成为http://htmlpreview.github.io/?https://github.com/gavin125/Sass-test/blob/master/html/index.html