ダウンロードせずにブラウザでプレビューを表示するために、GithubのHTMLページを通常のレンダリングされたHTMLページとして表示するにはどうすればよいですか？

355

上http://github.com開発者は、プロジェクトのHTML、CSS、JavaScriptと画像ファイルを保持します。ブラウザでHTML出力を確認するにはどうすればよいですか？

この例：https : //github.com/necolas/css3-social-signin-buttons/blob/master/index.html

これを開くと、作成者のコードのレンダリングされたHTMLが表示されません。ページをソースコードとして表示します。

レンダリングされたHTMLとして直接表示することは可能ですか？それ以外の場合は、結果を確認するためだけに常にZIP全体をダウンロードする必要があります。

html  css  git  github  github-pages 
— ジテンドラ・ビアス
ソース
4
— アムロ
1
2019年6月現在、raw.githack.comが最も便利なソリューションのようです（上記の質問への回答を参照）
— leopold.talirz

回答:

455

GitHubでHTMLファイルをプレビューする最も快適な方法は、https： //htmlpreview.github.io/ に移動するか、元のURLの前に追加するだけです。つまり、https：//htmlpreview.github.io/？https：// github.com/bartaz/impress.js/blob/master/index.html

— Niutech
ソース
@Denis：どのブラウザーとどのURLを使用していますか？現時点では、WebkitおよびGeckoブラウザーのみをサポートしています。
— niutech 2012
32
これはパブリックリポジトリでのみ機能することに注意してください。プライベートのものはエラーメッセージを出しますError: Cannot load file
— Erik Trautman '19
37
htmlpreview.github.comは、JavaScriptおよびCSSのレンダリングで部分的に失敗します。代替のrawgit.comはより適切に機能し、適切なContent-Typeヘッダーを持つファイルを提供します。
— Julien Carsique、2015年
1
素晴らしい解決策、ありがとうございます！README.mdファイルに接頭辞を付けてRノートブックへのリンクを追加すると、nb.htmlファイルが非常に適切にレンダリングされます。ここでは、ページがケースの誰である、それがどのように動作するかを見たい：github.com/sargdavid/snippets.cviとhtmlpreview.github.io/?https://github.com/sargdavid/...
— ダビットSargsyan
1
この解決策のように見えるがしかし、我々はまだこの持って今まで2018年12月の最後の日で作品を停止stackoverflow.com/a/8446391/860099
— カミルKiełczewski
85

アーカイブをダウンロードしたくない場合は、GitHub Pagesを使用してこれをレンダリングできます。

  1. リポジトリをアカウントにフォークします。
  2. マシン上でローカルにクローンします
  3. gh-pagesブランチを作成します（すでに存在する場合は削除して、基づいて新しいブランチを作成しますmaster）。
  4. ブランチをGitHubにプッシュします。
  5. ` のページを表示http://username.github.io/repo

コードで：

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo
— ロス
ソース
私は今プロジェクトをforkして、それをgithubページにコピーする方法を教えました。
— Jitendra Vyas、2011
1
プロセスで私の答えを更新しました。
— ロス
3
よくドキュメント化されています。help.github.com/ articles / creating
— Leif Gruenwoldt
2
なぜ最初にマスターを作成してそれを複製するのですか（creating-project-pages-manuallyで「安全にプレイ」）？マスターをいじる必要なしに、それをプッシュするcheckout --orphan gh-pages だけではありませんか？
— denis
4
ページはgithub.comではなくgithub.ioに移動しました。
— Damjan Pavlica、
64

RawGitを使用できます：https : //rawgit.com/necolas/css3-social-signin-buttons/master/index.html

この記事の執筆時点では、http：//htmlpreview.github.com/よりも適切に動作し、適切なContent-Typeヘッダーを持つファイルを提供します。さらに、本番環境で使用するためのCDN URLも提供します。

— ジュリアン・カルシック
ソース
2
私はそれがhtmlpreviewよりもうまく機能することを確認します。少なくとも、それは私のWebGLアニメーションを表示しています。
— Cyril Duchon-Doris、2015
1
実際にはより速く機能し、Bokeh（例：）を使用すると、htmlpreviewでは機能しない操作（例：ツールチップ）の一部が表示されます。
— jadianes 2015
htmlpreviewと同様に、プライベートリポジトリでは機能しません。Gitは？token = <hash>を追加することでこれらのパブリックURLのようなURLを作成しますが、これらのツールはそれを理解し、残りと一緒にGHに渡す必要があります。
— zakmck 2016
2
これはrawgitのFAQからです：実稼働Webサイトまたはパブリックサンプルコードでrawgit.com開発URLを使用できますか？いいえ。rawgit.comのURLは、トラフィックの少ないテストや、開発中に少数の人と一時的なデモを共有する場合にのみ使用してください。大量のトラフィックが発生する可能性がある場合、または人々が自分のコードにコピーして貼り付ける可能性がある場合は、cdn.rawgit.comを使用してください。...詳しい説明があります
— BarryPye
3
確認できます：Rawgitは2019
— 。– samcozmid
34

githubページを使用するのは本当に簡単です。初めて実行するときは少し奇妙です。編み物を学んでいる間、あなたが初めて3匹の子猫をジャグリングしなければならなかったようなソータ。（OK、それほど悪くはない）

gh-pagesブランチが必要です：

基本的にgithub.comはリポジトリのgh-pages ブランチを探します。ここで見つけたすべてのHTMLページを通常のHTMLとしてブラウザに直接提供します。

このgh-pagesブランチを取得するにはどうすればよいですか？

簡単です。という名前のgithubリポジトリのブランチを作成するだけgh-pagesです。--orphanこのブランチを作成するタイミングを指定します。実際にはこのブランチをgithubブランチにマージしたくないので、HTMLリソースを含むブランチが必要です。

$ git checkout --orphan gh-pages

私のレポの他のすべての大げさなことはどうですか、それはどのようにそれに適合しますか？

いや、先に進んで削除するだけです。そして、あなたが注意を払い、メインブランチにマージしてすべてのコードを削除することができない孤立したブランチを作成したので、今やっても安全です。

ブランチを作成しましたが、何ですか？

このブランチをgithub.comにプッシュする必要があります。そうすることで、自動化によってこれらのページのホスティングが開始されます。

git push -u origin gh-pages

しかし、私のHTMLはまだ提供されていません！

githubがこれらのブランチにインデックスを付け、コンテンツを提供するために必要なインフラストラクチャを起動するまで数分かかります。githubによると最大10分。

github.comが提示する手順

https://help.github.com/articles/creating-project-pages-manually

— ヘンドリクスワン
ソース
3
よく働く。git noobとして、私$ git commit -m 'init'はあなたの行の間に入るのを忘れていました。
— systemaddict
1
URLはどうなりますか？
— Koray Tugay
うーん...これは子猫をジャグリングするよりもはるかに簡単です...
— dreftymac
14

私はすべてのコメントを読んで、私が訪問するまでのGitHubは、GitHubのページを作成するには、通常のユーザーのためにそれはあまりにも困難になると考えGitHubのテーマページのを明確に懸念レポの設定ページどこすることができます下に「GitHubのページ」のセクションがあることを述べました「GitHubページのマスターブランチを使用する」オプションを選択します。そしてvoilà!! ... https：//username.github.io/reponameでその特定のリポジトリをチェックアウトしてください

私の答えをサポートするスクリーンショット

— ムケシュ
ソース
1

次のChrome拡張機能 - を使用してHTMLコードをプレビューできRun Selected HTMLます。

select all the codeGitHubの読み取りモードにする場合も非常に簡単です。最初にマウスカーソルを<html>上部の開始ブラケットにShift移動し、次にキーを押したまま、次にカーソルを</html>下部の終了ブラケットに移動します。

選択したHTMLを実行 -Chromeウェブストア

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

ステップ1：読み取りモードで、HTMLコードの本文をすべて選択します。

ステップ2：マウスを右クリックして[選択したHTMLを実行]をクリックすると、レンダリングされた結果が新しいタブに表示されます。

選択したHTMLを実行

実行結果： ここに画像の説明を入力してください

— ブラボー・ヨン
ソース
1

現在、これは古い回答です （「コンテンツタイプオプションの変更」拡張機能が期待どおりに機能しないためです）。

このソリューションはChromeブラウザ専用です。他のブラウザについてはわかりません。

  1. Chromeブラウザに「コンテンツタイプオプションの変更」拡張機能を追加します。
  2. ブラウザで「chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html」のURLを開きます。
  3. 未加工ファイルのURLのルールを追加します。例えば：
    • URLフィルター：https：///raw/master//fileName.html
    • 元のタイプ：テキスト/プレーン
    • 置換タイプ：text / html
  4. ルールでURLを追加したファイルブラウザを開きます（ステップ3）。
— ビジェイ
ソース
質問者はおそらく、誰もがレンダリングされたページを見ることを望んでいます。
— OndraŽižka2016年
@zakmckブラウザは「text / plain」ヘッダーを送信しますが、「text / html」を送信する必要があります。上記の手順を使用している理由により、データを第三者（ " htmlpreview.github.com "）に送信できません。上記の手順でURLに正規表現を使用することもできます。
— Vijay
まさにこれを探していました。私はページを見たいと思っています。gitとbitbucketの両方を見たいです。
— Eduardo Reis
私のために働いていませんでした。
— Eduardo Reis
@EduardoReis今日、自分のマシンを確認しましたが、現在は機能していません。「Modify Content-Type Options」拡張にいくつかの変更がある可能性があります。他の拡張機能を見つけたら、ここに投稿します。ありがとうございました。
— Vijay
0

これは直接的な答えではありませんが、かなり甘い代替手段だと思います。

http://www.s3auth.com/

基本的な認証の背後でページをホストすることができます。プライベートgithubリポジトリのAPIドキュメントなどに最適です。APIビルドの一部としてs3 putを追加するだけです。

— rynop
ソース
gitと共通するものがないサードパーティのサービスのように見えます。この質問のコンテキストでそれを使用する方法の指示はどこにありますか？
— Stalinko
-3

Githubページをオンにするだけです。^ _ ^

「設定」をクリックし、「GitHubページ」に移動して「ソース」の下のドロップダウンをクリックし、公開したいブランチ（メインのhtmlファイルがある場所）aaaand vualaaを選択します。^ _ ^

— jester96
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.