簡単な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でのソースページをテーブルデモ2にあるようなrawgit.com経由で見てみると、ソース表示ではなく通常のHTMLとして表示されるみたいです。
表示を確認したい場合は2ステップのみで、gistでページを作成し、次にrawgitのページへアクセスするだけでした。
gistからの変更差分を確認する
gistからファイルを変更した場合、rawgitに変更がされないような経験をしました。
このような場合には、gistのリビジョンから差分を確認します。先程の例では以下のようなURLからリビジョンを確認できます。
リビジョンから各コミットのソースURLを取得しました。
- 1つ目 https://gist.githubusercontent.com/pugiemonn/d74f4261f7bab86dd0ea/raw/7e4f813b689b3452d322b8143e06f6fd3d641b97/index.html
- 2つ目 https://gist.githubusercontent.com/pugiemonn/d74f4261f7bab86dd0ea/raw/f20a96a073ced6d2b4b031adb3a80ad89bcefd03/index.html
このURLを元に、rawgit.comのURLを作成します。
- 1つ目 https://rawgit.com/pugiemonn/d74f4261f7bab86dd0ea/raw/7e4f813b689b3452d322b8143e06f6fd3d641b97/index.html
- 2つ目 https://rawgit.com/pugiemonn/d74f4261f7bab86dd0ea/raw/f20a96a073ced6d2b4b031adb3a80ad89bcefd03/index.html
各URLにアクセスすると変更の差分をブラウザから確認できました。