আমি কি কেবল তাদের উত্স দেখার পরিবর্তে, গিটহাব থেকে এইচটিএমএল ফাইলগুলি চালাতে পারি?


300

যদি আমার কাছে একটি .htmlগিটহাবের সংগ্রহস্থল, যেমন জাভাস্ক্রিপ্ট পরীক্ষাগুলির এ সেট চালানোর জন্য একটি ফাইল থাকে তবে আমি সেই পৃষ্ঠাটি সরাসরি দেখতে পাবার কোনও উপায় আছে — এভাবে পরীক্ষা চালানো হচ্ছে?

উদাহরণস্বরূপ, আমি কি কোনও উপায়ে আমার স্থানীয় ড্রাইভে রেপো ডাউনলোড বা ক্লোনিং না করে এবং সেগুলি চালনা করে jQuery টেস্ট স্যুট দ্বারা উত্পাদিত পরীক্ষার ফলাফলগুলি দেখতে পাচ্ছি ?

আমি জানি এটি মূলত গিটহাবকে স্থির সামগ্রী হোস্টিং ব্যবসায় রাখবে তবে তারপরে আবার তাদের মাইম-টাইপ থেকে বদলে নিতে text/plainহবে text/html


2
হুম ... গ্রিজমনকি স্ক্রিপ্ট কি শিরোনাম পরিবর্তন করতে পারে?
অ্যালেক্স হাওয়ানস্কি

1
আপনি কি এইটিতে গৃহীত উত্তরটি আপডেট করতে পারেন? এটি করার একটি উপায় আছে - @ নিউতেচের উত্তর দেখুন ...
অ্যালেক্স ডিন


উত্তর:


366

আপনি Raw.githack.com ব্যবহার করতে পারেন । এটি গিটহাব, বিটবকেট, গিটলব এবং গিটহাবের সাহায্যগুলি সমর্থন করে।

GitHub

আগে:

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

আপনার ক্ষেত্রে .htmlএক্সটেনশন

পরে:

বিকাশ (থ্রটলড)

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

উত্পাদন (সিডিএন)

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]

উত্পাদন (সিডিএন)

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]

উত্পাদন (সিডিএন)

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]

উত্পাদন (সিডিএন)

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


আপডেট: কাঁচিটাইয়াটি বন্ধ ছিল


হ্যাঁ এটি যুক্ত করার জন্য ধন্যবাদ, দীর্ঘকাল আগে এই প্রশ্ন জিজ্ঞাসা করার পরে আমি এই পরিষেবাটিতে স্যুইচ করেছি। আসুন আপনাকে গৃহীত উত্তরটি তৈরি করুন :)।
ডোমেনিক

13
কেবলমাত্র একটি এফওয়াইআই: স্পষ্ট কারণেই এটি ব্যক্তিগত রেপোসের জন্য মোটেও কাজ করে বলে মনে হচ্ছে না।
rfay

এটি জাভাস্ক্রিপ্ট লোড বলে মনে হচ্ছে না।
পাইরুলেজ

1
কোনও কারণে আমি আমার এইচটিএমএল পৃষ্ঠাগুলিতে একটি পাঠ্য / এইচটিএমএল সামগ্রী সামগ্রী প্রকার পাচ্ছি না সুতরাং এটি কেবল উত্সটি দেখায় :(
বেনজি

1
সম্পাদনার পরে এই উত্তরটি সম্পূর্ণ ভুল। jsDelivr আপনাকে সরাসরি কোনও HTML ফাইল চালানোর অনুমতি দেয় না to এটি কেবল এইচটিএমএল ফাইলের প্লেটেক্সট দেখায়। এটি কেবল জেএস বা সিএসএস ফাইলের জন্য তৈরি। আপনারা যারা উত্তর খুঁজছেন তাদের জন্য Raw.githack.com ব্যবহার করুন , কারণ এটি কাঁচার এক ক্লোন।
স্পেনসার ওয়াইকজোরেক

194

গিটহাব এইচটিএমএল প্রিভিউ নামে একটি নতুন সরঞ্জাম রয়েছে , যা আপনি যা চান ঠিক তা করে। শুধু পূর্বে লিখুন http://htmlpreview.github.com/?কোন HTML ফাইলের URL এ যেমন http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

দ্রষ্টব্য: এই সরঞ্জামটি আসলে একটি গিথুব.ইও পৃষ্ঠা এবং কোনও সংস্থা হিসাবে গিথুবের সাথে অনুমোদিত নয়।


2
ধন্যবাদ আমি ঠিক কি আশা করি।
নানা

2
এটি কি ব্যক্তিগত ভাণ্ডারেও সম্ভব?
বুজরন অ্যান্ডারসন


এটি ক্রোমের জাভাস্ক্রিপ্টের সাহায্যে বোঝানো আপেক্ষিক চিত্রগুলির সাথে কাজ করে না। Cross-origin image load denied by Cross-Origin Resource Sharing policy.
উবারশ্মেকেল

3
এটি গিথুব সংগ্রহস্থলের অভ্যন্তরে জেএস / সিএসএসের সাথে সংযোগ স্থাপনের জন্য যথাযথ পাথগুলি লোড করে। এটি চমৎকার.
নাথান লিলিয়েনথাল

18

@ নিউতেচের উত্তরে পিগব্যাক করতে, আপনি খুব সাধারণ বুকমার্ক স্নিপেট তৈরি করতে পারেন।
ক্রোম ব্যবহার করা হচ্ছে, যদিও এটি অন্যান্য ব্রাউজারগুলির সাথে একইভাবে কাজ করে

  1. আপনার বুকমার্ক বারে ডান ক্লিক করুন
  2. ফাইল যুক্ত করুন ক্লিক করুন
  3. গিথুব এইচটিএমএল এর মতো নাম দিন
  4. জন্য URL টি টাইপjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. আপনি যখন গিথুব ফাইল ভিউ পৃষ্ঠাতে থাকেন ( Raw.github.com নয় ) বুকমার্ক লিঙ্কটি ক্লিক করুন এবং আপনি সোনালী।

7

আপনি আপনার কোড চালানোর জন্য জিএইচ-পৃষ্ঠাগুলি শাখা করতে পারেন বা এই এক্সটেনশনটি ব্যবহার করতে পারেন (ক্রোম, ফায়ারফক্স): https://github.com/ryt/githtml

আপনার যা যা পরীক্ষা করা দরকার তা যদি আপনি নিজের জেএস ফাইলগুলিকে এম্বেড করতে পারেন: http://jsperf.com/


6

আমার প্রকল্প অনুপাত.জেএস প্রকল্পের ক্ষেত্রেও আমার একই সমস্যা ছিল এবং আমি যা করেছি তা এখানে।

সমস্যা: গিথুব ডটকম সরল পাঠ্যে কনটেন্ট টাইপ / এমআইএমআই সেট করে উত্সটি দেখা হয় তখন ফাইলগুলি রেন্ডারিং / এক্সিকিউট করা থেকে বাধা দেয়।

সমাধান: একটি ওয়েব পৃষ্ঠায় ফাইলগুলি আমদানি করুন।

উদাহরণ:

অনলাইনে একটি ওয়েবপৃষ্ঠা তৈরি করতে jsfiddle.net বা jsbin.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/ শো

অথবা .... আপনি একটি প্রকল্প পৃষ্ঠা তৈরি করতে এবং সেখান থেকে আপনার HTML ফাইলগুলি রেন্ডার করতে পারেন nder আপনি http://pages.github.com/ এ একটি প্রকল্প পৃষ্ঠা তৈরি করতে পারেন ।

একবার তৈরি হয়ে গেলে আপনি http://*accountName*.github.com/*projectName*/ উদাহরণের মাধ্যমে লিঙ্কটি অ্যাক্সেস করতে পারেন : http://larrybattle.github.com/Ratio.js/


1
দুর্দান্ত ধারণা ব্রাউজারটি গিথব থেকে ফাইলগুলি লোড করতে দেয় তবে জেএসফিডেলের "সংস্থান সংস্থানগুলি" ব্যবহার করে না কেন?
ফিলিপ্পো ভিটালে

@ ফিলিপো দুর্দান্ত ধারণা! আমি পরের বার চেষ্টা করব।
ল্যারি ব্যাটাল

4

এখানে একটি ছোট গ্রীসমনকি স্ক্রিপ্ট যা গিথুবের এইচটিএমএল পৃষ্ঠাগুলিতে একটি সিডিএন বোতাম যুক্ত করবে

লক্ষ্য পৃষ্ঠাটি ফর্মের হবে: 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' স্ক্রিপ্ট কার্যকর করা ব্যর্থ! a কোনও ফাংশন নয়
xiaoyu2er

4

আপনি অনুরোধের মতো ক্রোম এবং ফায়ারফক্স এক্সটেনশনের সাহায্যে সম্পন্ন হওয়া প্রতিক্রিয়া শিরোনামগুলি সংশোধন করে এটি সহজেই করতে পারেন ।

ক্রোম এবং ফায়ারফক্সে:

  1. ইনস্টল করুন Chrome এর জন্য Requestly এবং Requestly ফায়ারফক্সের জন্য

  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/

কেবল তথ্যের জন্য আপনি আপনার বিধিগুলি সর্বজনীন ইউরাল হিসাবেও ভাগ করতে পারেন। এই ক্ষেত্রে আপনি এই নিয়মটি তৈরি করতে এবং অন্যান্য ব্যবহারকারীর সাথে ভাগ করতে পারেন। অন্যান্য অনুরোধ করা ব্যবহারকারীরা এটি সরাসরি আমদানি করতে এবং এটি ব্যবহার শুরু করতে পারেন। : এই পরীক্ষা করে দেখুন requestly.in/documentation/introducing-shared-list
sachinjain024

: উপরে আমার মন্তব্য সম্পাদনা করতে, তাই নথিপত্রের নতুন লিঙ্ক পোস্ট করার জন্য অন্য একটি যোগ অক্ষম requestly.in/content/documentation/introducing-shared-list
sachinjain024

3

আমি গিথুবে এইচটিএমএল এবং জেএস সম্পাদনা করতে চেয়েছিলাম এবং পূর্বরূপ পেতে চাই। তাত্ক্ষণিক কমিট এবং সংরক্ষণ করতে আমি গিথুব এ এটি করতে চেয়েছিলাম।

Rawgithub.com চেষ্টা করেছিলেন কিন্তু Rawgithub.com রিয়েলটাইম ছিল না (এটি একবারে মিনিটে একবার রিফ্রেশ করে)।

সুতরাং আমি দ্রুত আমার নিজস্ব সমাধান বিকাশ করেছি:

এর জন্য নোড.জেএস সমাধান: https://github.com/shimondoodkin/rawgithub


2

Raw.github.com/user/repository আর নেই

গিথুব-এ সোর্স কোডে href লিঙ্ক করতে, আপনাকে এইভাবে কাঁচা উত্সে গিথাব লিঙ্কটি ব্যবহার করতে হবে:

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

EXAMPLE টি

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

2

গিথুবটিতে আপনার যদি কৌণিক বা প্রতিক্রিয়ার প্রকল্প রয়েছে, আপনি আপনার ব্রাউজারে অনলাইনে অ্যাপ্লিকেশন চালাতে https://stackblitz.com/ ব্যবহার করতে পারেন ।

অনলাইনে অ্যাপ্লিকেশনটি দেখতে আপনার গিথুব ব্যবহারকারীর নাম এবং সংগ্রহস্থলের নাম লিখুন - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

গিথুবকে আপলোড করা নোড_মডুলি ছাড়াই এটি কাজ করে

বর্তমানে @ কৌণিক / ক্লিপ এবং তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করে প্রকল্পগুলি সমর্থন করুন। অয়নিক, ভ্যু এবং কাস্টম ওয়েবপ্যাক কনফিগারেশনের জন্য শিগগিরই সমর্থন আসছে!


1

এই ক্রমটি কেবল ক্রোম ব্রাউজারের জন্য। আমি অন্যান্য ব্রাউজার সম্পর্কে নিশ্চিত নই।

  1. ক্রোম ব্রাউজারে "বিষয়বস্তু-ধরণের বিকল্পগুলি সংশোধন করুন" এক্সটেনশান যুক্ত করুন।
  2. ব্রাউজারে "ক্রোম-এক্সটেনশন: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url খুলুন।
  3. কাঁচা ফাইল ইউআরএল জন্য নিয়ম যুক্ত করুন। উদাহরণ স্বরূপ:
    • ইউআরএল ফিল্টার: https: ///raw/master//fileName.html
    • আসল প্রকার: পাঠ্য / প্লেইন
    • প্রতিস্থাপনের ধরণ: পাঠ্য / এইচটিএমএল
  4. আপনি নিয়মে ইউআরএল যুক্ত ফাইল ব্রাউজারটি খুলুন (পদক্ষেপ 3) in
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.