web-dev-qa-db-ja.com

ダウンロードせずに、ブラウザでプレビューを表示するために通常のレンダリングされたhtmlページとしてgithub上のhtmlページを見る方法は？

http://github.com 開発者は、プロジェクトのhtml、csss、javascript、およびimagesファイルを保管してください。どのように私はブラウザでHTML出力を見ることができますか？

例えばこれ https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

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

直接レンダリングされたHTMLとして見ることは可能ですか？そうでなければ私は常に結果を見るために全体のziptをダウンロードする必要があります

htmlcssgitgithubgithub-pages
292
Jitendra Vyas

GitHubでHTMLファイルをプレビューする最も快適な方法は、 http://htmlpreview.github.com/ に移動するか、または元のURLの前に追加することです。すなわち、 http://htmlpreview.github.com/?https://github.com/bartaz/impress.js/blob/master/index.html

390
niutech

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

  1. あなたのアカウントにリポジトリをフォークします。
  2. あなたのマシンにローカルにクローンしてください
  3. gh-pagesブランチを作成します（既に存在する場合はそれを削除し、masterを基にして新しいブランチを作成します）。
  4. ブランチをGitHubに押し戻します。
  5. http://username.github.io/repo `でページを見てください

コードでは：

git clone [email protected]: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
76
Ross

あなたは RawGit を使うことができます：
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

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

61
Julien Carsique

githubページ を使用するのは本当に簡単ですが、初めて実行するときは少し変です。あなたが編むことを学んでいる間あなたが3匹の子猫をいじらなければならなかったのは初めてのようなSorta。 （はい、それほど悪いことではありません）

あなたはgh-pagesブランチが必要です：

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

このgh-pagesブランチはどうやって手に入れますか？

簡単です。 ghubブランチと呼ばれるgithubリポジトリのブランチを作成するだけです。このブランチをgithubブランチにマージしたくない場合は、このブランチを作成するときに - Orphanを指定します。単に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

27
hendrikswan

私はすべてのコメントを読み、「GitHubページ」のセクションがあることが明確に述べられている GitHubテーマページ を訪れるまで、GitHubがGitHubページを作成するのは難しすぎると思いました。当該レポの設定ページの下で、あなたは「GitHubページのためにマスターブランチを使う」オプションを選ぶことができます。そしてどうぞ!! ...その特定のリポジトリのチェックアウト https://username.github.io/reponame

screenshot to support my answer

6
Mukesh

クロムブラウザ専用のこのソリューション。他のブラウザについてはよくわかりません。

  1. クロムブラウザに "Modify Content-Type Options"拡張子を追加します。
  2. ブラウザで "chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html"のURLを開きます。
  3. 生ファイルのURLのルールを追加します。例えば：
    • URLフィルタ：https：///raw/master//fileName.html
    • 元のタイプ：テキスト/プレーン
    • 代替タイプ：text/html
  4. URLをルールで追加したファイルブラウザを開きます（手順3）。
1
Vijay

また、Tampermonkeyを使用している場合は、 'raw'、 'blame'、および 'history'ボタンの横にあるpreview with http://htmlpreview.github.com/ボタンをアクションメニューに追加するスクリプトを追加できます。

このようなスクリプト： https://Gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

1
Aiven

これは直接的な答えではありませんが、私はそれがかなり甘い選択肢だと思います。

http://www.s3auth.com/

それはあなたが基本的な認証の後ろにあなたのページをホストすることを可能にします。あなたのプライベートgithubリポジトリにあるAPIドキュメントのようなものに最適です。あなたのAPIビルドの一部として置くだけでS3。

1
rynop

次のChrome拡張機能 - Run Selected HTMLを使用してHTMLコードをプレビューできます。使い方は非常に簡単です。

GitHubの読み取りモードでselect all the codeを使いたい場合も、とても簡単です。最初にマウスカーソルを上部の<html>の最初の角括弧に移動し、次にを押したままにします。 Shift キーを押し、次にカーソルを下部の</html>の終了括弧に移動します。

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

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

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

ステップ2： "Run Seleted HTML"を右クリックすると、レンダリング結果が新しいタブに表示されます。

Run Selected HTML

実行結果： enter image description here

0
Bravo Yeung

Github Pagesを有効にするだけです。 ^ _ ^

「GitHubページ」に移動し、「ソース」の下のドロップダウンをクリックして、（メインのhtmlファイルが配置されている）aaaとvualaaを選択してください。 ^ _ ^

0
jester96