Bisakah saya menjalankan file HTML langsung dari GitHub, alih-alih hanya melihat sumbernya?

300

Jika saya memiliki .htmlfile dalam repositori GitHub, misalnya untuk menjalankan serangkaian tes JavaScript, apakah ada cara saya bisa melihat halaman itu secara langsung — dengan demikian menjalankan tes?

Misalnya, bisakah saya benar-benar melihat hasil pengujian yang akan dihasilkan oleh jQuery test suite , tanpa mengunduh atau mengkloning repo ke drive lokal saya dan menjalankannya di sana?

Saya tahu ini pada dasarnya akan menempatkan GitHub dalam bisnis hosting konten statis, tetapi sekali lagi, mereka hanya perlu mengubah tipe mime mereka dari text/plainmenjadi text/html.

javascript html github Domenik
sumber
2
Hmm ... bisakah skrip GreaseMonkey mengubah tajuk?
Alex Howansky
1
Bisakah Anda memperbarui jawaban yang diterima untuk yang satu ini? Sekarang ada cara untuk melakukan ini - lihat jawaban @ niutech ...
Alex Dean
1
kemungkinan duplikat dari Tautan dan menjalankan file JavaScript eksternal yang dihosting di GitHub
Troy Alford
Kemungkinan rangkap dari Bagaimana cara melihat halaman html di github sebagai halaman html yang diberikan normal untuk melihat pratinjau di browser, tanpa mengunduh?
Michael Freidgeim

Jawaban:

366

Anda mungkin ingin menggunakan raw.githack.com . Ini mendukung GitHub, Bitbucket, Gitlab dan GitHub.

GitHub

Sebelum:

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

Dalam .htmlekstensi kasus Anda

Setelah:

Pengembangan (dibatasi)

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

Produksi (CDN)

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

Dalam .htmlekstensi kasus Anda

raw.githack.com juga mendukung layanan lain:

Bitbucket

Sebelum:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

Setelah:

Pengembangan (dibatasi)

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

Produksi (CDN)

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

GitLab

Sebelum:

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

Setelah:

Pengembangan (dibatasi)

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

Produksi (CDN)

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

Inti GitHub

Sebelum:

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

Setelah:

Pengembangan (dibatasi)

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

Produksi (CDN)

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

Pembaruan: rawgit dihentikan

chmanie
sumber
Ya terima kasih telah menambahkan ini, karena menanyakan pertanyaan ini sejak lama, saya beralih ke layanan ini. Mari kita buat Anda menerima jawaban :).
Domenic
13
Hanya FYI: Ini sepertinya tidak berfungsi sama sekali untuk repo pribadi, karena alasan yang jelas.
rfay
Tampaknya tidak memuat javascript.
PyRulez
1
Untuk beberapa alasan saya tidak mendapatkan tipe konten teks / html di halaman HTML saya jadi itu hanya menunjukkan sumber :(
benji
1
Setelah diedit, jawaban ini sepenuhnya salah. jsDelivr tidak memungkinkan Anda untuk menjalankan file HTML secara langsung. Itu hanya menampilkan plaintext dari file HTML. Ini hanya ditujukan untuk file js atau css. Bagi Anda yang mencari jawaban, gunakan raw.githack.com , karena merupakan klon dari rawgit.
Spencer Wieczorek
194

Ada alat baru yang disebut Pratinjau HTML GitHub , yang melakukan persis apa yang Anda inginkan. Cukup tambahkan dulu http://htmlpreview.github.com/?ke URL file HTML apa pun, misalnya http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Catatan: Alat ini sebenarnya adalah halaman github.io dan tidak berafiliasi dengan github sebagai perusahaan.

niutech
sumber
2
Terima kasih apa yang saya harapkan.
nana
2
Apakah ini juga dapat dilakukan di repo pribadi?
Björn Andersson
Tidak bekerja dengan bingkai (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
Martin Thoma
Ini tidak berfungsi dengan gambar relatif yang dimuat melalui javascript di chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
ubershmekel
3
Itu memuat path relatif dengan benar memungkinkan untuk menghubungkan ke JS / CSS di dalam repositori github. Ini fantastis.
Nathan Lilienthal
18

Untuk membonceng jawaban @ niutech, Anda dapat membuat cuplikan bookmark yang sangat sederhana.
Menggunakan Chrome, meskipun bekerja sama dengan browser lain

  1. Klik kanan bilah bookmark Anda
  2. Klik Tambah File
  3. Beri nama sesuatu seperti Github HTML
  4. Untuk jenis URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Saat Anda berada di halaman tampilan file github ( bukan raw.github.com ) klik tautan bookmark dan Anda berwarna emas.
mraaroncruz
sumber
7

Anda dapat melakukan percabangan gh-halaman untuk menjalankan kode Anda atau mencoba ekstensi ini (Chrome, Firefox): https://github.com/ryt/githtml

Jika yang Anda butuhkan adalah tes, Anda bisa menanamkan file JS Anda ke: http://jsperf.com/

Gianluca Esposito
sumber
6

Saya memiliki masalah yang sama untuk proyek saya Ratio.js dan inilah yang saya lakukan.

Masalah: Github.com mencegah file dari rendering / mengeksekusi ketika sumber dilihat dengan mengatur tipe konten / MIME ke teks biasa.

Solusi: Minta halaman web mengimpor file.

Contoh:

Gunakan jsfiddle.net atau jsbin.com untuk membuat halaman web online lalu simpan. Arahkan ke file Anda di Github.com dan klik tombol 'mentah' untuk mendapatkan tautan langsung ke file. Dari sana, impor file menggunakan tag dan atribut yang sesuai.

<!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>

Demo Langsung: http://jsfiddle.net/jKu4q/2/

Catatan: Catatan untuk jsfiddle.net Anda bisa mendapatkan akses langsung ke halaman hasil dengan menambahkan showke bagian akhir url. Seperti itu: http://jsfiddle.net/jKu4q/2/show

Atau .... Anda bisa membuat halaman proyek dan membuat file HTML Anda dari sana. Anda dapat membuat halaman proyek di http://pages.github.com/ .

Setelah dibuat, Anda dapat mengakses tautan melalui http://*accountName*.github.com/*projectName*/ Contoh: http://larrybattle.github.com/Ratio.js/

Larry Battle
sumber
1
Ide bagus menggunakan js fiddle untuk membiarkan browser memuat file dari github tetapi mengapa tidak menggunakan "Add Resources" dari JSFiddle?
Filippo Vitale
@Filippo Ide bagus! Saya akan mencobanya lain kali.
Larry Battle
4

Berikut adalah skrip Greasemonkey kecil yang akan menambahkan tombol CDN ke halaman html di github

Halaman target berupa: 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
sumber
Eksekusi skrip 'cdn.rawgit.com' gagal! $ bukan fungsi
xiaoyu2er
4

Anda dapat melakukan ini dengan mudah dengan Memodifikasi Header Respons yang dapat dilakukan dengan ekstensi Chrome dan Firefox seperti Requestly .

Di Chrome dan Firefox:

  1. Instal Requestly untuk Chrome dan Requestly untuk Firefox

  2. Tambahkan Aturan Modifikasi Tajuk berikut :

    masukkan deskripsi gambar di sini

    a) Jenis-Konten :

    • Memodifikasi
    • Tanggapan
    • Tajuk: Content-Type
    • Nilai: text/html
    • Kecocokan Url Sumber: /raw\.githubusercontent\.com/.*\.html/


    b) Kebijakan-Keamanan-Konten :

    • Memodifikasi
    • Tanggapan
    • Tajuk: Content-Security-Policy
    • Nilai: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Kecocokan Url Sumber: /raw\.githubusercontent\.com/.*\.html/
ostrokach
sumber
Sekadar informasi, Anda juga dapat membagikan aturan Anda sebagai Url Publik. Dalam hal ini Anda bisa membuat aturan ini dan berbagi dengan pengguna lain. Pengguna lain yang diminta dapat langsung mengimpornya dan mulai menggunakannya. Lihat ini: requestly.in/documentation/introducing-share-list
sachinjain024
Tidak dapat mengedit komentar saya di atas, Jadi menambahkan satu lagi untuk memposting tautan baru dokumentasi: requestly.in/content/documentation/introducing-share-list
sachinjain024
3

saya ingin mengedit html dan js di github dan memiliki pratinjau. Saya ingin melakukannya di github untuk memiliki komit instan dan menghemat.

mencoba rawgithub.com tetapi rawgithub.com tidak realtime (cache itu menyegarkan sekali dalam satu menit).

jadi saya cepat mengembangkan solusi saya sendiri:

solusi node.js untuk ini: https://github.com/shimondoodkin/rawgithub

Shimon Doodkin
sumber
2

raw.github.com/user/repository sudah tidak ada lagi

Untuk menautkan, href ke kode sumber di github, Anda harus menggunakan tautan github ke sumber mentah dengan cara ini:

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

CONTOH

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

Jika Anda memiliki proyek sudut atau reaksi di github, Anda dapat menggunakan https://stackblitz.com/ untuk menjalankan aplikasi online di browser Anda.

Masukkan nama pengguna dan repositori Github Anda untuk melihat aplikasi online - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Ini berfungsi bahkan tanpa Node_Modules diunggah ke Github

Saat ini mendukung proyek menggunakan @ angular / cli dan create-react-app. Dukungan untuk konfigurasi Ionic, Vue, dan webpack kustom akan segera hadir!

sujithuix
sumber
1

Solusi ini hanya untuk browser chrome. Saya tidak yakin tentang browser lain.

  1. Tambahkan ekstensi "Ubah Opsi Jenis Konten" di browser chrome.
  2. Buka "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url di browser.
  3. Tambahkan aturan untuk url file mentah. Sebagai contoh:
    • Filter URL: https: ///raw/master//fileName.html
    • Jenis Asli: teks / polos
    • Jenis Pengganti: teks / html
  4. Buka browser file yang Anda tambahkan url dalam aturan (dalam langkah 3).
Vijay
sumber