क्या मैं सिर्फ उनके स्रोत को देखने के बजाय, GitHub से सीधे HTML फाइलें चला सकता हूं?

Question

अगर मेरे पास एक .htmlGitHub रिपॉजिटरी में एक फ़ाइल है, उदाहरण के लिए जावास्क्रिप्ट परीक्षण के एक सेट को चलाने के लिए, क्या कोई तरीका है जो मैं सीधे उस पृष्ठ को देख सकता हूं - इस प्रकार परीक्षण चला रहा हूं?

उदाहरण के लिए, क्या मैं वास्तव में परीक्षा परिणाम देख सकता हूं जो कि jQuery के टेस्ट सूट द्वारा निर्मित होगा , रेपो को डाउनलोड करने या मेरे स्थानीय ड्राइव पर क्लोन किए बिना और उन्हें वहां चलाने के बिना?

मुझे पता है कि यह मूल रूप से GitHub को स्थैतिक सामग्री की मेजबानी के व्यवसाय में डाल देगा, लेकिन फिर, उन्हें बस अपने माइम-प्रकार को बदलना text/plainहोगा text/html।

Comments

हम्म ... क्या एक ग्रिममोंकी स्क्रिप्ट हेडर बदल सकती है?

— एलेक्स हॉवान्स्की जूल

क्या आप इस पर स्वीकृत उत्तर को अपडेट कर सकते हैं? अब ऐसा करने का एक तरीका है - देखें @ niutech का जवाब ...

— एलेक्स डीन

लिंक

— ट्रॉय अल्फोर्ड

संभावित डुप्लिकेट कैसे जीथुब पर एक html पृष्ठ को सामान्य रेंडर किए गए HTML पृष्ठ के रूप में ब्राउज़र में पूर्वावलोकन देखने के लिए डाउनलोड किए बिना देखा जा सकता है?

— माइकल फ्रीजिम

Answer 1

आप raw.githack.com का उपयोग करना चाह सकते हैं । यह GitHub, Bitbucket, Gitlab और GitHub gists का समर्थन करता है।

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]

गिटहब ने कमर कस ली

इससे पहले:

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]

---

अपडेट: रावतजी को बंद कर दिया गया

Comments

इसे जोड़ने के लिए हाँ धन्यवाद, क्योंकि यह सवाल पूछने से बहुत समय पहले मैंने इस सेवा में स्विच किया था। आइए आपको स्वीकृत उत्तर देते हैं :)।

— डोमिनिक

सिर्फ एक FYI करें: यह स्पष्ट रूप से निजी रीपो के लिए काम नहीं करता है, स्पष्ट कारणों के लिए।

— rfay

यह जावास्क्रिप्ट लोड करने के लिए प्रतीत नहीं होता है।

— PyRulez

किसी कारण से मुझे अपने HTML पृष्ठों पर एक पाठ / html सामग्री प्रकार नहीं मिल रहा है, इसलिए यह सिर्फ स्रोत दिखाता है :(

— benji

संपादन के बाद यह उत्तर पूरी तरह से गलत है। jsDelivr आपको सीधे HTML फ़ाइल चलाने की अनुमति नहीं देता है। यह केवल HTML फ़ाइलों के प्लेटेक्स्ट को दिखाता है। यह केवल js या css फ़ाइलों के लिए अभिप्रेत है। आप में से एक जवाब के लिए देख रहे हैं raw.githack.com का उपयोग करें , क्योंकि यह रॉविट का क्लोन है।

— स्पेंसर वाइकजोरक

Answer 2

एक नया टूल है, जिसे GitHub HTML प्रीव्यू कहा जाता है , जो वास्तव में आप चाहते हैं। बस 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 से संबद्ध नहीं है।

Comments

धन्यवाद बिल्कुल वही है जो मैं खोजने की उम्मीद कर रहा था।

— नाना

क्या यह निजी रेपो पर भी संभव है?

— ब्योर्न एंडरसन 6

फ्रेम (Javadoc) के साथ काम नहीं करता है: htmlpreview.github.com/?https://github.com/MartinThoma/… :-(

— मार्टिन थोमा

यह क्रोम पर जावास्क्रिप्ट के माध्यम से भरी हुई सापेक्ष छवियों के साथ काम नहीं करता है। Cross-origin image load denied by Cross-Origin Resource Sharing policy.

— ubershmekel

यह जीथ / रिपॉजिटरी के अंदर जेएस / सीएसएस से जोड़ने के लिए अनुमति देने वाले सापेक्ष रास्तों को ठीक से लोड करता है। यह शानदार है।

— नाथन लिलिएनथाल

Answer 3

@ Nuteutech के उत्तर पर गुल्लक करने के लिए, आप एक बहुत ही सरल बुकमार्क स्निपेट बना सकते हैं।
Chrome का उपयोग करना, हालाँकि यह अन्य ब्राउज़रों के साथ समान रूप से काम करता है

1. अपने बुकमार्क बार पर राइट क्लिक करें
2. फ़ाइल जोड़ें पर क्लिक करें
3. इसे कुछ नाम दें जैसे Github HTML
4. के लिए यूआरएल टाइपjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
5. जब आप एक github फ़ाइल दृश्य पृष्ठ पर हों ( raw.github.com नहीं ) तो बुकमार्क लिंक पर क्लिक करें और आप सुनहरे हैं।

Answer 4

आप अपना कोड चलाने के लिए या इस एक्सटेंशन (क्रोम, फ़ायरफ़ॉक्स) को आज़माने के लिए gh- पेज को ब्रांच कर सकते हैं: https://github.com/ryt/ithithtml

यदि आपको परीक्षण की आवश्यकता है, तो आप अपनी JS फ़ाइलों को एम्बेड कर सकते हैं: http://jsperf.com/

Answer 5

मुझे अपने प्रोजेक्ट Ratio.js के लिए भी यही समस्या थी और यहाँ मैंने क्या किया।

समस्या: Github.com फ़ाइलों को रेंडर करने / निष्पादित करने से रोकता है जब सामग्री को सादे पाठ में सामग्री प्रकार / माइम सेट करके देखा जाता है।

समाधान: एक वेब पेज फ़ाइलें आयात करें।

उदाहरण:

ऑनलाइन वेबपेज बनाने के लिए 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 के लिए नोट आप showurl के अंत में जोड़कर परिणाम पृष्ठ तक सीधे पहुंच प्राप्त कर सकते हैं । जैसे: http://jsfiddle.net/jKu4q/2/show

या .... आप एक परियोजना पृष्ठ बना सकते हैं और अपनी HTML फ़ाइलों को वहाँ से प्रस्तुत कर सकते हैं। आप http://pages.github.com/ पर प्रोजेक्ट पेज बना सकते हैं ।

एक बार बनाने के बाद आप http://*accountName*.github.com/*projectName*/ उदाहरण के माध्यम से लिंक तक पहुँच सकते हैं : http://larrybattle.github.com/Ratio.js/

Comments

अच्छा विचार js फिडेल का उपयोग करें ब्राउज़र को गिटहब से फाइल लोड करने दें लेकिन JSFiddle के "संसाधन जोड़ें" का उपयोग क्यों न करें?

— फिलिप्पो विटले

@ फीलिपो महान विचार! मैं अगली बार कोशिश करूँगा।

— लैरी बैटल

Answer 6

यहाँ एक छोटी Greasemonkey स्क्रिप्ट है जो कि gnub पर html पेजों में एक CDN बटन जोड़ेगी

लक्ष्य पृष्ठ इस प्रकार होगा: 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);

Comments

स्क्रिप्ट का निष्पादन 'cdn.rawgit.com' विफल रहा! $ एक कार्य नहीं है

— xiaoyu2er

Answer 7

आप इसे रिस्पॉन्स मॉडिफ़ायर हेडर द्वारा आसानी से कर सकते हैं जो क्रोम और फ़ायरफ़ॉक्स एक्सटेंशन के साथ रिक्वेस्टली किया जा सकता है ।

क्रोम और फ़ायरफ़ॉक्स में:

1. Chrome के लिए अनुरोध करें और फ़ायरफ़ॉक्स के लिए अनुरोध करें

2. निम्नलिखित हेडर संशोधन नियम जोड़ें :

   

   क) सामग्री-प्रकार :

   • संशोधित
   • प्रतिक्रिया
   • हैडर: Content-Type
   • मान: text/html
   • स्रोत यूआरएल मिलान: /raw\.githubusercontent\.com/.*\.html/

   
   

   बी) सामग्री-सुरक्षा-नीति :

   • संशोधित
   • प्रतिक्रिया
   • हैडर: Content-Security-Policy
   • मान: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
   • स्रोत यूआरएल मिलान: /raw\.githubusercontent\.com/.*\.html/

Comments

बस जानकारी के लिए आप अपने नियमों को पब्लिक उरल्स के रूप में भी साझा कर सकते हैं। इस स्थिति में आप इस नियम को बना सकते हैं और अन्य उपयोगकर्ताओं के साथ साझा कर सकते हैं। अन्य अनुरोधित उपयोगकर्ता सीधे इसे आयात कर सकते हैं और इसका उपयोग शुरू कर सकते हैं। इसे देखें: requestly.in/documentation/introducing-soded-list

— sachinjain024

: ऊपर मेरी टिप्पणी को संपादित करने, तो दस्तावेज की नई कड़ी पोस्ट करने के लिए एक दूसरे से जोड़ने में असमर्थ requestly.in/content/documentation/introducing-shared-list

— sachinjain024

Answer 8

मैं github में html और js संपादित करना चाहता था और एक पूर्वावलोकन था। मैं इसे तुरंत करने और सहेजने के लिए गीथब में करना चाहता था।

rawgithub.com की कोशिश की, लेकिन rawgithub.com realtime नहीं था (यह एक मिनट में एक बार कैश ताज़ा होता है)।

इसलिए मैंने जल्दी से अपना समाधान विकसित किया:

इसके लिए node.js समाधान: https://github.com/shimondoodkin/rawgithub

Answer 9

raw.github.com/user/repository अब नहीं है

लिंक करने के लिए, github में स्रोत कोड के लिए href, आपको इस तरह से कच्चे स्रोत के लिए 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>

Answer 10

यदि आपके पास github में कोणीय या प्रतिक्रिया परियोजना है, तो आप अपने ब्राउज़र में ऑनलाइन आवेदन चलाने के लिए https://stackblitz.com/ का उपयोग कर सकते हैं ।

ऑनलाइन आवेदन देखने के लिए अपना गिथब उपयोगकर्ता नाम और रिपॉजिटरी नाम दर्ज करें - stackblitz.com/github/ellingGITHUB_USERNAME Ideal/unningREPO_NAME}

यह बिना Godeub पर अपलोड Node_Modules के भी काम करता है

वर्तमान में @ कोणीय / cli और create-react-app का उपयोग करके परियोजनाओं का समर्थन करें। Ionic, Vue, और कस्टम वेबपैक कॉन्फ़िगरेशन के लिए समर्थन जल्द ही आ रहा है!

Answer 11

यह समाधान केवल क्रोम ब्राउज़र के लिए है। मैं अन्य ब्राउज़र के बारे में निश्चित नहीं हूं।

1. क्रोम ब्राउजर में "कंटेंट-टाइप ऑप्शन्स" एक्सटेंशन जोड़ें।
2. ब्राउज़र में "क्रोम-एक्सटेंशन: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" खोलें।
3. कच्ची फ़ाइल url के लिए नियम जोड़ें। उदाहरण के लिए:
   • URL फ़िल्टर: https: ///raw/master//fileName.html
   • मूल प्रकार: पाठ / सादा
   • प्रतिस्थापन प्रकार: पाठ / html
4. फ़ाइल ब्राउज़र खोलें जिसे आपने नियम में चरण 3 में जोड़ा है।