programing

HTML 파일은 소스만 보는 것이 아니라 GitHub에서 직접 실행할 수 있습니까?

randomtip 2022. 9. 14. 21:44
반응형

HTML 파일은 소스만 보는 것이 아니라 GitHub에서 직접 실행할 수 있습니까?

만약 내가 가지고 있다면.html예를 들어 자바스크립트 테스트 세트를 실행하기 위해 GitHub 저장소에 있는 파일을 직접 볼 수 있는 방법이 있습니까? 테스트를 실행하는 대신 이 페이지를 직접 볼 수 있는 방법은 없습니까?

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

이것이 기본적으로 GitHub를 정적 콘텐츠 호스팅 사업에 투입할 것이라는 것을 알고 있지만, 다시 한 번 말하지만, 그들은 그들의 MIME 타입을 에서 로 바꾸면 된다.text/html.

raw.githack.com 를 사용하는 것이 좋습니다.GitHub, Bitbucket, Gitlab 및 GitHub gists를 지원합니다.

깃헙

이전:

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 gists

이전:

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.io/?HTML 파일의 URL(http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html 등)로 이동합니다.

주의: 이 툴은 실제로 github.io 페이지이며, 회사로서 github에 소속되어 있지 않습니다.

@niutech의 답변을 참고하기 위해 매우 간단한 북마크 스니펫을 만들 수 있습니다.
로 Chrome이 동작합니다.

  1. 책갈피 줄 오른쪽 클릭
  2. [ Add File ]을 클릭합니다.
  3. Github HTML과 같은 이름을 붙입니다.
  4. URL 유형의 경우javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. github 파일 뷰 페이지(raw.github.com가 아닌)에서 북마크 링크를 클릭하면 골든이 됩니다.

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' 버튼을 클릭하여 파일에 대한 직접 링크를 표시합니다.여기서 적절한 태그와 속성을 사용하여 파일을 Import합니다.

<!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를 참조해 주세요.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);

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

Chrome 및 Firefox의 경우:

  1. Chrome용 Requestly 설치 및 Firefox용 Requestly 설치

  2. 다음 헤더 수정 규칙을 추가합니다.

    여기에 이미지 설명 입력

    a) 콘텐츠 유형:

    • 수정하다
    • 대답
    • 머리글:Content-Type
    • 값:text/html
    • 소스 URL 일치:/raw\.githubusercontent\.com/.*\.html/


    b) Content-Security-Policy:

    • 수정하다
    • 대답
    • 머리글:Content-Security-Policy
    • 값:default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • 소스 URL 일치:/raw\.githubusercontent\.com/.*\.html/

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

rawgithub.com을 시도했지만 rawgithub.com이 실시간이 아닙니다(캐시 리프레시는 1분에 1회).

그 때문에, 곧바로 독자적인 솔루션을 개발했습니다.

node.displaces 솔루션: https://github.com/shimondoodkin/rawgithub

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

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

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>

github에 angular 또는 react 프로젝트가 있는 경우 https://stackblitz.com/을 사용하여 브라우저에서 애플리케이션을 온라인으로 실행할 수 있습니다.

애플리케이션을 온라인으로 표시하려면 Github 사용자 이름과 저장소 이름을 입력하십시오(stackblitz.com/github/ {GITHUB_USERNAME}/{REPO_NAME}).

이것은 Node_Modules가 Github에 업로드되지 않아도 동작합니다.

현재 @angular/cli 및 create-react-app을 사용하여 프로젝트를 지원하고 있습니다.Ionic, Vue 및 커스텀 웹 팩 구성 지원이 곧 제공될 예정입니다.

이 솔루션은 크롬 브라우저 전용입니다.다른 브라우저는 잘 모르겠습니다.

  1. Chrome 브라우저에서 "Modify Content-Type Options" 확장을 추가합니다.
  2. 브라우저에서 "chrome-extension://jnfofboppaoejgiegflblhhka/options.html" URL을 엽니다.
  3. raw URL 규칙을 합니다.예를 들어 다음과 같습니다.
    • URL 필터: https://raw/master//fileName.html
    • 원본 유형: 텍스트/보통
    • 교환 유형: text/html
  4. 규칙(3단계)에서 URL을 추가한 파일브라우저를 엽니다.

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

반응형
저작자표시

'programing' 카테고리의 다른 글

'str' 개체가 품목 할당을 지원하지 않습니다.  (0) 2022.09.14
항아리 내의 파일 수정  (0) 2022.09.14
MySql 오류: 1364 필드 'display_name'에 기본값이 없습니다.  (0) 2022.09.13
Python을 사용하는 Selenium - Geckodriver 실행 파일이 PATH에 있어야 합니다.  (0) 2022.09.13
왼쪽 와일드카드 문의 Marriadb 인덱스  (0) 2022.09.13

'programing'의 다른글

  • 현재글HTML 파일은 소스만 보는 것이 아니라 GitHub에서 직접 실행할 수 있습니까?

관련글

댓글

티스토리툴바