簡単なHTMLやJS、CSSをgistで試したいと考えていました。

gistで記事を作成

https://gist.github.com/ からindex.htmlという名前のファイルを作成します。

ここでは昔試しに作っていたindex.html を使用します。

gistの表示を確認する

gistの表示を確認する場合、rawgit.comというホストのページを見るとデモを確認できました。

項目	URL	URL例
メニュー	`https://gist.github.com/GithubID`	https://gist.github.com/pugiemonn
個別ページ	`https://gist.github.com/GithubID/ハッシュ`	https://gist.github.com/pugiemonn/d74f4261f7bab86dd0ea
ソースページ	`https://gist.githubusercontent.com/GithubID/ハッシュ/raw/ハッシュ/ファイル名`	https://gist.githubusercontent.com/pugiemonn/d74f4261f7bab86dd0ea/raw/7e4f813b689b3452d322b8143e06f6fd3d641b97/index.html
デモ1	`https://rawgit.com/GithubID/ハッシュ/raw/ファイル名`	https://rawgit.com/pugiemonn/d74f4261f7bab86dd0ea/raw/index.html
デモ2	`https://rawgit.com/GithubID/ハッシュ/raw/ファイル名/index.html`	https://rawgit.com/pugiemonn/d74f4261f7bab86dd0ea/raw/7e4f813b689b3452d322b8143e06f6fd3d641b97/index.html

上記テーブルの下2つのデモURLいずれかにブラウザからアクセスすると表示を確認できました。gistでのソースページをテーブルデモ２にあるようなrawgit.com経由で見てみると、ソース表示ではなく通常のHTMLとして表示されるみたいです。

表示を確認したい場合は2ステップのみで、gistでページを作成し、次にrawgitのページへアクセスするだけでした。

gistからファイルを変更した場合、rawgitに変更がされないような経験をしました。
このような場合には、gistのリビジョンから差分を確認します。先程の例では以下のようなURLからリビジョンを確認できます。

リビジョンから各コミットのソースURLを取得しました。

このURLを元に、rawgit.comのURLを作成します。

各URLにアクセスすると変更の差分をブラウザから確認できました。