소스를 보지 않고 GitHub에서 HTML 파일을 직접 실행할 수 있습니까?

300

나는이있는 경우 .htmlGitHub의 저장소에 파일을 자바 스크립트 테스트 AA 세트를 실행하는, 내가 테스트를 실행 직접, 따라서 해당 페이지를 볼 수있는 방법이 예를 들면?

예를 들어, 어떻게 든 실제로 테스트 결과를 볼 수 있습니까? 리포지토리를 로컬 드라이브로 다운로드하거나 복제하지 않고 jQuery 테스트 스위트 에서 있습니까?

이것이 기본적으로 정적 콘텐츠 호스팅 비즈니스에 GitHub를 넣을 것이라는 것을 알고 있지만 다시 mime 유형을에서 text/plain로 변경해야 합니다 text/html.

javascript  html  github 
— 도 메닉
소스
2
흠 ... GreaseMonkey 스크립트가 헤더를 변경할 수 있습니까?
— Alex Howansky
1
이 답변에 허용 된 답변을 업데이트 할 수 있습니까? 이제이 작업을 수행 할 수있는 방법이 있습니다. @niutech의 답변 참조 ...
— Alex Dean
1
— Troy Alford
— Michael Freidgeim

답변:

366

raw.githack.com 을 사용하고 싶을 수도 있습니다 . GitHub, Bitbucket, Gitlab 및 GitHub 요점을 지원합니다.

깃 허브

전에:

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

귀하의 경우 .html연장

후:

개발

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

생산 (CDN)

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

귀하의 경우 .html연장

raw.githack.com 은 다른 서비스도 지원합니다 :

비트 버킷

전에:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

후:

개발

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

생산 (CDN)

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

전에:

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

후:

개발

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

생산 (CDN)

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitHub 요점

전에:

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

후:

개발

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

생산 (CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

업데이트 : rawgit이 중단되었습니다

— Chmanie
소스
예,이 질문을 오래 전부터 요청했기 때문에 이것을 추가해 주셔서 감사합니다.이 서비스로 전환했습니다. 당신에게 받아 들여지는 답을 만들어 봅시다 :).
— Domenic
13
참고로, 이것은 명백한 이유로 개인 저장소에 대해서는 전혀 작동하지 않는 것 같습니다.
— rfay
자바 스크립트를로드하지 않는 것 같습니다.
— PyRulez
1
어떤 이유로 든 HTML 페이지에 텍스트 / html 컨텐츠 유형이 표시되지 않으므로 소스 만 표시합니다. (
— benji
1
편집 후이 답변은 완전히 잘못되었습니다. jsDelivr에서는 HTML 파일을 직접 실행할 수 없습니다. HTML 파일의 일반 텍스트 만 표시합니다. js 또는 css 파일 전용입니다. 답변을 찾고있는 사람들에게는 rawgit 의 복제품 인 raw.githack.com을 사용하십시오.
— 스펜서 Wieczorek
194

GitHub HTML Preview 라는 새로운 도구가 있으며 원하는 도구를 정확하게 수행합니다. http://htmlpreview.github.com/?HTML 파일의 URL 앞에 추가 하십시오 (예 : http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html)

참고 :이 도구는 실제로 github.io 페이지이며 회사로서 github와 관련이 없습니다.

— 니우 테크
소스
2
내가 찾길 바랐던 것이 정확히 감사합니다.
— nana
2
개인 저장소에서도 가능합니까?
— Björn Andersson
프레임에서 작동하지 않습니다 (Javadoc) : htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
— Martin Thoma
크롬에서 자바 스크립트를 통해로드 된 상대 이미지에서는 작동하지 않습니다. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel
3
상대 경로를 올바르게로드하여 github 저장소 내부의 JS / CSS에 연결할 수 있습니다. 환상적이다.
— Nathan Lilienthal
18

@niutech의 답변을 피기 백하기 위해 매우 간단한 북마크 스 니펫을 만들 수 있습니다.
다른 브라우저와 비슷하게 작동하지만 Chrome 사용

  1. 북마크 바를 마우스 오른쪽 버튼으로 클릭
  2. 파일 추가를 클릭 하십시오
  3. Github HTML 과 같은 이름을 지정하십시오.
  4. 에 대한 URL의 유형javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. raw.github.com이 아닌 github 파일보기 페이지에있을 때 책갈피 링크를 클릭하면 황금색입니다.
— mraaroncruz
소스
6

내 프로젝트 Ratio.js에 대해 동일한 문제가 있었고 여기에 내가 한 일이 있습니다.

문제 : Github.com은 컨텐츠 유형 / MIME을 일반 텍스트로 설정하여 소스를 볼 때 파일 렌더링 / 실행을 방지합니다.

솔루션 : 웹 페이지에서 파일을 가져 오십시오.

예:

사용 jsfiddle.net 또는 jsbin.com를 그것을 저장 후 온라인 웹 페이지를 만들 수 있습니다. Github.com에서 파일로 이동 한 후 'raw'버튼을 클릭하여 파일로 직접 연결하십시오. 거기에서 적절한 태그와 속성을 사용하여 파일을 가져옵니다.

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

라이브 데모 : http://jsfiddle.net/jKu4q/2/

참고 : jsfiddle.net show의 경우 URL 끝에 추가하여 결과 페이지에 직접 액세스 할 수 있습니다 . 이렇게 : http://jsfiddle.net/jKu4q/2/show

또는 .... 프로젝트 페이지를 만들고 HTML 파일을 렌더링 할 수 있습니다. http://pages.github.com/ 에서 프로젝트 페이지를 만들 수 있습니다 . .

일단 생성되면 http://*accountName*.github.com/*projectName*/ 예를 통해 링크에 액세스 할 수 있습니다 : http://larrybattle.github.com/Ratio.js/

— 래리 배틀
소스
1
좋은 아이디어는 js fiddle을 사용하여 브라우저가 github에서 파일을로드 할 수있게하지만 JSFiddle의 "Add Resources"를 사용하지 않는 이유는 무엇입니까?
— Filippo Vitale
@Filippo 좋은 생각이야! 다음에해볼 게요.
— 래리 배틀
4

다음은 github의 html 페이지에 CDN 버튼을 추가하는 Greasemonkey 스크립트입니다.

대상 페이지는 https://cdn.rawgit.com/user/repo/master/filename.js 형식입니다.


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);
— 제임스 맥기 건
소스
스크립트 'cdn.rawgit.com'을 실행하지 못했습니다! $는 함수가 아닙니다
— xiaoyu2er
4

Requestly 와 같은 Chrome 및 Firefox 확장 프로그램으로 수행 할 수있는 응답 헤더 를 수정 하면 쉽게 수행 할 수 있습니다 .

Chrome 및 Firefox에서 :

  1. 설치 크롬에 대한 Requestly 및 Firefox 용 Requestly

  2. 다음 헤더 수정 규칙을 추가하십시오 .

    여기에 이미지 설명을 입력하십시오

    a) 컨텐츠 유형 :

    • 수정
    • 응답
    • 헤더: Content-Type
    • 값: text/html
    • 소스 URL 일치 : /raw\.githubusercontent\.com/.*\.html/


    b) 콘텐츠 보안 정책 :

    • 수정
    • 응답
    • 헤더: Content-Security-Policy
    • 값: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • 소스 URL 일치 : /raw\.githubusercontent\.com/.*\.html/
— 오스트 로카 치
소스
정보 제공을 위해 규칙을 공개 Urls로 공유 할 수도 있습니다. 이 경우이 규칙을 만들고 다른 사용자와 공유 할 수 있습니다. 다른 요청이 많은 사용자는 직접 가져 와서 사용할 수 있습니다. 이것을 확인하십시오 : requestly.in/documentation/introducing-shared-list
— sachinjain024
위의 내 의견을 편집 할 수 없으므로
— sachinjain024
3

github에서 html과 js를 편집하고 미리보기를 원했습니다. 나는 즉시 커밋하고 저장하기 위해 github에서하고 싶었습니다.

rawgithub.com을 시도했지만 rawgithub.com은 실시간이 아닙니다 (1 분에 한 번씩 캐시 새로 고침).

그래서 나는 내 자신의 솔루션을 신속하게 개발했습니다.

이것에 대한 node.js 솔루션 : https://github.com/shimondoodkin/rawgithub

— 시몬 두킨
소스
2

raw.github.com/user/repository 가 더 이상 존재하지 않습니다

href를 github의 소스 코드에 연결하려면 다음과 같이 github 링크를 원시 소스에 사용해야합니다.

raw.githubusercontent.com/user/repository/master/file.extension

예

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>
— 아미 아흐마드 토우 세프
소스
2

github에 각도 또는 반응 프로젝트가있는 경우 https://stackblitz.com/ 을 사용 하여 브라우저에서 온라인으로 응용 프로그램을 실행할 수 있습니다 .

온라인으로 애플리케이션을 보려면 Github 사용자 이름과 리포지토리 이름을 입력하십시오-stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Node_Modules를 Github에 업로드하지 않아도 작동합니다

현재 @ angular / cli 및 create-react-app를 사용하는 프로젝트를 지원합니다. Ionic, Vue 및 사용자 정의 웹팩 구성이 곧 지원 될 예정입니다!

— 수지 투 익스
소스
1

이 솔루션은 크롬 브라우저에만 해당됩니다. 다른 브라우저에 대해 잘 모르겠습니다.

  1. 크롬 브라우저에서 "컨텐츠 유형 옵션 수정"확장자를 추가하십시오.
  2. 브라우저에서 "chrome-extension : //jnfofbopfpaoeojgieggflbpcblhfhka/options.html"url을 엽니 다.
  3. 원시 파일 URL에 대한 규칙을 추가하십시오. 예를 들면 다음과 같습니다.
    • URL 필터 : https : ///raw/master//fileName.html
    • 원본 유형 : text / plain
    • 교체 유형 : text / html
  4. 규칙에 따라 URL을 추가 한 파일 브라우저를 엽니 다 (3 단계).
— 비제이
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.