Tôi có thể chạy các tệp HTML trực tiếp từ GitHub, thay vì chỉ xem nguồn của chúng không?

300

Nếu tôi có một .htmltệp trong kho lưu trữ GitHub, ví dụ: để chạy một tập các thử nghiệm JavaScript, có cách nào để tôi có thể xem trang đó trực tiếp trên trang do đó chạy thử nghiệm không?

Ví dụ, bằng cách nào đó tôi có thể thực sự thấy các kết quả kiểm tra sẽ được tạo bởi bộ kiểm tra jQuery , mà không cần tải xuống hoặc sao chép repo vào ổ đĩa cục bộ của tôi và chạy chúng ở đó không?

Tôi biết điều này về cơ bản sẽ đưa GitHub vào kinh doanh lưu trữ nội dung tĩnh, nhưng sau đó, một lần nữa, họ chỉ phải thay đổi loại mime từ text/plainsang text/html.

javascript  html  github 
— Điên
nguồn
2
Hmm ... một tập lệnh GreasMonkey có thể thay đổi tiêu đề không?
— Alex Howansky
1
Bạn có thể cập nhật câu trả lời được chấp nhận trên cái này không? Bây giờ có một cách để làm điều này - xem câu trả lời của @ niutech ...
— Alex Dean
1
— Troy Alford
— Michael Freidgeim

Câu trả lời:

366

Bạn có thể muốn sử dụng raw.githack.com . Nó hỗ trợ các ý chính GitHub, Bitbucket, Gitlab và GitHub.

GitHub

Trước:

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

Trong trường hợp của bạn .htmlmở rộng

Sau:

Phát triển (tiết lưu)

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

Sản xuất (CDN)

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

Trong trường hợp của bạn .htmlmở rộng

raw.githack.com cũng hỗ trợ các dịch vụ khác:

Cai Xô nhỏ

Trước:

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

Sau:

Phát triển (tiết lưu)

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

Sản xuất (CDN)

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

GitLab

Trước:

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

Sau:

Phát triển (tiết lưu)

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

Sản xuất (CDN)

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

GitHub

Trước:

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

Sau:

Phát triển (tiết lưu)

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

Sản xuất (CDN)

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

Cập nhật: rawgit đã bị ngưng

— chmanie
nguồn
Vâng cảm ơn vì đã thêm điều này, vì đã hỏi câu hỏi này từ lâu tôi đã chuyển sang dịch vụ này. Hãy làm cho bạn câu trả lời được chấp nhận :).
— Domenic
13
Chỉ là một FYI: Điều này dường như hoàn toàn không hoạt động đối với các repos tư nhân, vì những lý do rõ ràng.
— rfay
Nó dường như không tải javascript.
— PyRulez
1
Vì một số lý do, tôi không nhận được loại nội dung văn bản / html trên các trang HTML của mình để nó chỉ hiển thị nguồn :(
— benji
1
Sau khi chỉnh sửa câu trả lời này là hoàn toàn sai. jsDelivr không cho phép bạn chạy tệp HTML trực tiếp. Nó chỉ hiển thị bản rõ của các tệp HTML. Nó chỉ dành cho các tập tin js hoặc css. Đối với những người tìm kiếm câu trả lời, hãy sử dụng raw.githack.com , vì đó là bản sao của rawgit.
— Spencer Wieczorek
194

Có một công cụ mới gọi là GitHub HTML Preview , thực hiện chính xác những gì bạn muốn. Chỉ cần thêm vào http://htmlpreview.github.com/?URL của bất kỳ tệp HTML nào, ví dụ: http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Lưu ý: Công cụ này thực sự là một trang github.io và không liên kết với github như một công ty.

— niutech
nguồn
2
Cảm ơn chính xác những gì tôi đã hy vọng tìm thấy.
— nana
2
Đây cũng là có thể trên repos tư nhân?
— Bjorn Andersson
Không hoạt động với các khung (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/iêu :-(
— Martin Thoma
Nó không hoạt động với hình ảnh tương đối được tải qua javascript trên chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel
3
Nó tải các đường dẫn tương đối đúng cách cho phép liên kết với JS / CSS bên trong kho github. Cái này thật tuyệt.
— Nathan Lilienthal
18

Để cõng câu trả lời của @ niutech, bạn có thể tạo một đoạn đánh dấu rất đơn giản.
Sử dụng Chrome, mặc dù nó hoạt động tương tự với các trình duyệt khác

  1. Nhấp chuột phải vào thanh dấu trang của bạn
  2. Nhấp vào Thêm tệp
  3. Đặt tên nó là Github HTML
  4. Đối với loại URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Khi bạn đang ở trang xem tệp github ( không phải raw.github.com ), hãy nhấp vào liên kết dấu trang và bạn vàng.
— mraaroncruz
nguồn
6

Tôi đã có cùng một vấn đề cho dự án Ratio.js của tôi và đây là những gì tôi đã làm.

Vấn đề: Github.com ngăn các tệp hiển thị / thực thi khi nguồn được xem bằng cách đặt loại nội dung / MIME thành văn bản thuần túy.

Giải pháp: Có một trang web nhập các tệp.

Thí dụ:

Sử dụng jsfiddle.net hoặc jsbin.com để tạo một trang web trực tuyến sau đó lưu nó. Điều hướng đến tệp của bạn trong Github.com và nhấp vào nút 'thô' để nhận liên kết trực tiếp đến tệp. Từ đó, nhập tệp bằng cách sử dụng thẻ và thuộc tính phù hợp.

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

Bản trình diễn trực tiếp: http://jsfiddle.net/jKu4q/2/

Lưu ý: Lưu ý đối với jsfiddle.net, bạn có thể truy cập trực tiếp vào trang kết quả bằng cách thêm showvào cuối url. Thích như vậy: http://jsfiddle.net/jKu4q/2/show

Hoặc .... bạn có thể tạo một trang dự án và hiển thị các tệp HTML của mình từ đó. Bạn có thể tạo một trang dự án tại http://pages.github.com/ .

Sau khi tạo xong, bạn có thể truy cập liên kết thông qua http://*accountName*.github.com/*projectName*/ Ví dụ: http://larrybattle.github.com/Ratio.js/

— Trận chiến
nguồn
1
Ý tưởng tuyệt vời sử dụng js fiddle để cho phép trình duyệt tải các tệp từ github nhưng tại sao không sử dụng "Thêm tài nguyên" của JSFiddle?
— Filippo Vitale
@Filippo Ý tưởng tuyệt vời! Lần sau tôi sẽ thử.
— Trận chiến
4

Dưới đây là một tập lệnh Greasemonkey nhỏ sẽ thêm nút CDN vào các trang html trên github

Trang đích sẽ có dạng: 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
nguồn
Việc thực thi tập lệnh 'cdn.rawgit.com' không thành công! $ không phải là một hàm
— xiaoyu2er
4

Bạn có thể thực hiện việc này một cách dễ dàng bằng cách Sửa đổi Tiêu đề phản hồi có thể được thực hiện với tiện ích mở rộng của Chrome và Firefox như Requestly .

Trong Chrome và Firefox:

  1. Cài đặt Requestly cho Chrome và Requestly cho Firefox

  2. Thêm các quy tắc sửa đổi tiêu đề sau :

    nhập mô tả hình ảnh ở đây

    a) Loại nội dung :

    • Sửa đổi
    • Phản ứng
    • Tiêu đề: Content-Type
    • Giá trị: text/html
    • Các trận đấu Url nguồn: /raw\.githubusercontent\.com/.*\.html/


    b) Chính sách bảo mật nội dung :

    • Sửa đổi
    • Phản ứng
    • Tiêu đề: Content-Security-Policy
    • Giá trị: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Các trận đấu Url nguồn: /raw\.githubusercontent\.com/.*\.html/
— xương
nguồn
Chỉ để biết thông tin, bạn cũng có thể chia sẻ các quy tắc của mình dưới dạng Url công khai. Trong trường hợp này, bạn chỉ có thể tạo quy tắc này và chia sẻ với những người dùng khác. Người dùng yêu cầu khác có thể trực tiếp nhập nó và bắt đầu sử dụng nó. Hãy xem cái này: requestly.in/documentation/int sinhing- shared
— list
Không thể chỉnh sửa nhận xét của tôi ở trên, vì vậy, thêm một liên kết khác để đăng liên kết tài liệu mới: requestly.in/content/documentation/int sinhing- Shared
— list
3

tôi muốn chỉnh sửa html và js trong github và có một bản xem trước. tôi muốn làm điều đó trong github để có các cam kết và lưu ngay lập tức.

đã thử rawgithub.com nhưng rawgithub.com không phải là thời gian thực (bộ nhớ cache được làm mới mỗi phút một lần).

vì vậy tôi nhanh chóng phát triển giải pháp của riêng mình:

Giải pháp node.js cho việc này: https://github.com/shimondoodkin/rawgithub

— Shimon Doodkin
nguồn
2

raw.github.com/user/reposeective không còn ở đó

Để liên kết, href với mã nguồn trong github, bạn phải sử dụng liên kết github để nguồn thô theo cách này:

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

THÍ DỤ

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

Nếu bạn có một dự án góc cạnh hoặc phản ứng trong github, bạn có thể sử dụng https://stackblitz.com/ để chạy ứng dụng trực tuyến trong trình duyệt của mình.

Nhập tên người dùng và tên kho lưu trữ Github của bạn để xem ứng dụng trực tuyến - stackblitz.com/github/ đũaGITHUB_USERNAMEopez / nbREPO_NAME}

Điều này hoạt động ngay cả khi không có Node_Modules được tải lên Github

Hiện đang hỗ trợ các dự án sử dụng @ angular / cli và tạo-Reac-app. Sắp có hỗ trợ cho cấu hình Ionic, Vue và webpack tùy chỉnh!

— sujithuix
nguồn
1

Giải pháp này chỉ dành cho trình duyệt chrome. Tôi không chắc chắn về trình duyệt khác.

  1. Thêm tiện ích mở rộng "Sửa đổi tùy chọn loại nội dung" trong trình duyệt chrome.
  2. Mở url "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" trong trình duyệt.
  3. Thêm quy tắc cho url tệp thô. Ví dụ:
    • Bộ lọc URL: https: ///raw/master//fileName.html
    • Loại gốc: văn bản / đơn giản
    • Loại thay thế: văn bản / html
  4. Mở trình duyệt tệp mà bạn đã thêm url theo quy tắc (trong bước 3).
— Vijay
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.