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

development

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

big-blog 2020. 3. 18. 08:07

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

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

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

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

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이 중단되었습니다

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와 관련이 없습니다.

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

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

gh-pages를 분기하여 코드를 실행하거나이 확장 (Chrome, Firefox)을 시도해보십시오 : https://github.com/ryt/githtml

테스트가 필요한 경우 JS 파일을 http://jsperf.com/에 포함시킬 수 있습니다.

내 프로젝트 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/

다음은 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);

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

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

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

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

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

Chrome 및 Firefox에서 :

설치 크롬에 대한 Requestly 및 Firefox 용 Requestly
다음 헤더 수정 규칙을 추가하십시오 .

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/

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>

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

크롬 브라우저에서 "컨텐츠 유형 옵션 수정"확장자를 추가하십시오.
브라우저에서 "chrome-extension : //jnfofbopfpaoeojgieggflbpcblhfhka/options.html"url을 엽니 다.
원시 파일 URL에 대한 규칙을 추가하십시오. 예를 들면 다음과 같습니다.
- URL 필터 : https : ///raw/master//fileName.html
- 원본 유형 : text / plain
- 교체 유형 : text / html
규칙에 따라 URL을 추가 한 파일 브라우저를 엽니 다 (3 단계).

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

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

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

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

참고 URL : https://stackoverflow.com/questions/6551446/can-i-run-html-files-directly-from-github-instead-of-just-viewing-their-source

'development' 카테고리의 다른 글

변수를 undefined로 설정하거나 undefined를 인수로 전달할 수 있습니까? (0)	2020.03.18
Ruby에서 조건부 연산자 (? :)를 어떻게 사용합니까? (0)	2020.03.18
PHP 코드가 실행되지 않고 대신 코드가 페이지에 표시됩니다. (0)	2020.03.18
Vimeo에서 img 썸네일을 받으시겠습니까? (0)	2020.03.18
Visual Studio에서 자동 줄 바꿈을 전환하는 방법은 무엇입니까? (0)	2020.03.18

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

big-blog

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

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

깃 허브

전에:

후:

비트 버킷

전에:

후:

GitLab

전에:

후:

GitHub 요점

전에:

후:

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

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

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

깃 허브

전에:

후:

비트 버킷

전에:

후:

GitLab

전에:

후:

GitHub 요점

전에:

후:

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바