ฉันสามารถเรียกใช้ไฟล์ HTML โดยตรงจาก GitHub แทนที่จะดูแค่แหล่งที่มาได้หรือไม่

300

ถ้าฉันมี.htmlไฟล์ในที่เก็บ GitHub เช่นสำหรับการรันชุดทดสอบ JavaScript มีวิธีใดบ้างที่ฉันสามารถดูหน้านั้นโดยตรง - ดังนั้นจึงทำการทดสอบ?

ตัวอย่างเช่นฉันสามารถดูผลการทดสอบที่เกิดขึ้นจากชุดการทดสอบ jQueryได้หรือไม่โดยไม่ต้องดาวน์โหลดหรือคัดลอก repo ไปยังไดรฟ์ในเครื่องของฉัน

ฉันรู้ว่าสิ่งนี้จะทำให้ GitHub เป็นธุรกิจโฮสติ้งเนื้อหาคงที่ แต่โดยทั่วไปแล้วพวกเขาเพียงแค่ต้องเปลี่ยนประเภท mime จากtext/plainเป็นtext/htmlเป็น

javascript  html  github 
— Domenic
แหล่งที่มา
2
อืม ... GreaseMonkey สามารถเปลี่ยนส่วนหัวของสคริปต์ได้ไหม
— อเล็กซ์ Howansky
1
คุณสามารถอัปเดตคำตอบที่ยอมรับในคำตอบนี้ได้หรือไม่? ขณะนี้มีวิธีการทำเช่นนี้ - ดูคำตอบของ @ niutech ...
— อเล็กซ์ดีน
1
— Troy Alford
— Michael Freidgeim

คำตอบ:

366

คุณอาจต้องการที่จะใช้raw.githack.com รองรับ GitHub, Bitbucket, Gitlab และ GitHub

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ยังรองรับบริการอื่น ๆ :

Bitbucket

ก่อน:

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
เพียงแค่ FYI: สิ่งนี้ดูเหมือนจะไม่ทำงานเลยสำหรับ repos ส่วนตัวด้วยเหตุผลที่ชัดเจน
— rfay
ดูเหมือนว่าจะไม่โหลดจาวาสคริปต์
— PyRulez
1
ด้วยเหตุผลบางอย่างฉันไม่ได้รับประเภทเนื้อหาข้อความ / html บนหน้า HTML ของฉันดังนั้นจึงแสดงเฉพาะแหล่งที่มา :(
— benji
1
หลังจากแก้ไขคำตอบนี้ผิดอย่างสมบูรณ์ jsDelivr ไม่อนุญาตให้คุณเรียกใช้ไฟล์ HTML โดยตรง มันแสดงให้เห็นเพียงธรรมดาของไฟล์ HTML มันมีไว้สำหรับไฟล์ js หรือ css เท่านั้น สำหรับคนที่คุณกำลังมองหาคำตอบให้ใช้raw.githack.comเพราะมันเป็นโคลนของ rawgit
— Spencer Wieczorek
194

มีเครื่องมือใหม่ที่ชื่อว่าGitHub HTML Previewซึ่งทำสิ่งที่คุณต้องการอย่างแน่นอน เพียงเติมhttp://htmlpreview.github.com/?URL ของไฟล์ HTML ใด ๆ เช่นhttp://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

หมายเหตุ: เครื่องมือนี้เป็นหน้า github.io จริง ๆ และไม่ได้มีส่วนเกี่ยวข้องกับ github ในฐานะ บริษัท

— niutech
แหล่งที่มา
2
ขอบคุณจริง ๆ สิ่งที่ฉันหวังว่าจะได้พบ
— นานา
2
เป็นไปได้เช่นกันใน repos ส่วนตัว?
— Björn Andersson
ไม่ทำงานกับเฟรม (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
— Martin Thoma
ไม่ทำงานกับรูปภาพที่เกี่ยวข้องโหลดผ่าน javascript บนโครเมี่ยม Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel
3
มันโหลดเส้นทางสัมพัทธ์อย่างถูกต้องอนุญาตให้เชื่อมโยงไปยัง JS / CSS ภายในพื้นที่เก็บข้อมูล github มันยอดเยี่ยมมาก
— Nathan Lilienthal
18

หากต้องการ piggyback ตามคำตอบของ @ niutech คุณสามารถสร้างตัวอย่างข้อมูลบุ๊คมาร์คที่ง่ายมาก
การใช้ Chrome แม้ว่ามันจะทำงานได้คล้ายกับเบราว์เซอร์อื่น ๆ

  1. คลิกขวาที่แถบบุ๊กมาร์กของคุณ
  2. คลิกเพิ่มไฟล์
  3. ตั้งชื่อบางอย่างเช่นGithub HTML
  4. สำหรับประเภทURLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. เมื่อคุณอยู่ในหน้าดูไฟล์ GitHub ( ไม่ใช่ raw.github.com ) คลิกลิงก์บุ๊กมาร์กและคุณเป็นสีทอง
— mraaroncruz
แหล่งที่มา
7

คุณสามารถแยกหน้า gh-pages เพื่อเรียกใช้รหัสของคุณหรือลองใช้ส่วนขยายนี้ (Chrome, Firefox): https://github.com/ryt/githtml

หากสิ่งที่คุณต้องการคือการทดสอบคุณสามารถฝังไฟล์ JS ของคุณลงใน: http://jsperf.com/

— Gianluca Esposito
แหล่งที่มา
6

ฉันมีปัญหาเดียวกันสำหรับโครงการRatio.jsและนี่คือสิ่งที่ฉันทำ

ปัญหา: Github.com ป้องกันไฟล์จากการเรนเดอร์ / ดำเนินการเมื่อดูแหล่งข้อมูลโดยการตั้งค่าประเภทเนื้อหา / MIME เป็นข้อความธรรมดา

วิธีแก้ไข: ให้เว็บเพจนำเข้าไฟล์

ตัวอย่าง:

ใช้jsfiddle.netหรือjsbin.comเพื่อสร้างเว็บเพจออนไลน์จากนั้นบันทึก นำทางไปยังไฟล์ของคุณใน Github.com และคลิกปุ่ม 'ดิบ' เพื่อรับลิงก์โดยตรงไปยังไฟล์ จากนั้นนำเข้าไฟล์โดยใช้แท็กและแอตทริบิวต์ที่เหมาะสม

<!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://pages.github.com/

เมื่อสร้างแล้วคุณสามารถเข้าถึงลิงค์ผ่านhttp://*accountName*.github.com/*projectName*/ ตัวอย่าง: http://larrybattle.github.com/Ratio.js/

— ลาร์รีแบทเทิล
แหล่งที่มา
1
ไอเดียที่ดีใช้ js fiddle เพื่อให้เบราว์เซอร์โหลดไฟล์จาก github แต่ทำไมไม่ใช้ "เพิ่มทรัพยากร" ของ JSFiddle?
— Filippo Vitale
@Filippo ความคิดที่ยอดเยี่ยม! ฉันจะลองครั้งต่อไป
— Larry Battle
4

นี่คือสคริปต์ Greasemonkey เล็กน้อยที่จะเพิ่มปุ่ม CDN ไปยังหน้า html ใน github

หน้าเป้าหมายจะอยู่ในรูปแบบ: 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);
— James McGuigan
แหล่งที่มา
การเรียกใช้สคริปต์ 'cdn.rawgit.com' ล้มเหลว! $ ไม่ใช่ฟังก์ชั่น
— xiaoyu2er
4

คุณสามารถทำเช่นนี้ได้อย่างง่ายดายโดยการปรับเปลี่ยนการตอบสนองส่วนหัวซึ่งสามารถทำได้ด้วยการขยายของ Chrome และ Firefox เช่นRequestly

ใน Chrome และ Firefox:

  1. ติดตั้งRequestly สำหรับ ChromeและRequestly สำหรับ Firefox

  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/
— ostrokach
แหล่งที่มา
เพียงแค่ข้อมูลคุณสามารถแชร์กฎของคุณในฐานะ URL สาธารณะ ในกรณีนี้คุณสามารถสร้างกฎนี้และแบ่งปันกับผู้ใช้รายอื่น ผู้ใช้อื่นที่ต้องการสามารถนำเข้าและเริ่มใช้งานได้โดยตรง ลองดูที่นี่: requestly.in/documentation/introducing-shared-list
— sachinjain024
ไม่สามารถแก้ไขความคิดเห็นของฉันด้านบนดังนั้นเพิ่มอีกหนึ่งสำหรับการโพสต์ลิงก์ใหม่ของเอกสาร: requestly.in/content/documentation/introducing-shared-list
— sachinjain024
3

ฉันต้องการแก้ไข html และ js ใน github และมีตัวอย่าง ฉันต้องการที่จะทำมันใน GitHub ที่จะมีความมุ่งมั่นและประหยัดทันที

ลอง rawgithub.com แต่ rawgithub.com ไม่ใช่เรียลไทม์ (แคชจะรีเฟรชหนึ่งครั้งต่อนาที)

ดังนั้นฉันจึงพัฒนาโซลูชันของตัวเองอย่างรวดเร็ว:

วิธีการแก้ปัญหา node.js สำหรับสิ่งนี้: https://github.com/shimondoodkin/rawgithub

— Shimon Doodkin
แหล่งที่มา
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>
— Ami Ahmad Touseef
แหล่งที่มา
2

หากคุณมีโครงการมุมหรือปฏิกิริยาตอบสนองใน GitHub คุณสามารถใช้https://stackblitz.com/เพื่อเรียกใช้แอปพลิเคชันออนไลน์ในเบราว์เซอร์ของคุณ

ป้อนชื่อผู้ใช้และที่เก็บ Github ของคุณเพื่อดูใบสมัครออนไลน์ - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

สิ่งนี้ใช้ได้แม้ไม่มี Node_Modules ที่อัปโหลดไปยัง Github

ปัจจุบันสนับสนุนโครงการที่ใช้ @ angular / cli และ create-react-app รองรับ Ionic, Vue และการกำหนดค่า webpack ที่กำหนดเองในเร็ว ๆ นี้!

— sujithuix
แหล่งที่มา
1

โซลูชันนี้สำหรับเบราว์เซอร์ chrome เท่านั้น ฉันไม่แน่ใจเกี่ยวกับเบราว์เซอร์อื่น

  1. เพิ่มส่วนขยาย "แก้ไขตัวเลือกประเภทเนื้อหา" ในเบราว์เซอร์ chrome
  2. เปิด "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url ในเบราว์เซอร์
  3. เพิ่มกฎสำหรับ URL ไฟล์ดิบ ตัวอย่างเช่น:
    • ตัวกรอง URL: https: ///raw/master//fileName.html
    • ประเภทเดิม: ข้อความ / ธรรมดา
    • ประเภทการแทนที่: text / html
  4. เปิดเบราว์เซอร์ไฟล์ที่คุณเพิ่ม URL ไว้ในกฎ (ในขั้นตอนที่ 3)
— วีเจย์
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.