Skip to content

Instantly share code, notes, and snippets.

@TakesxiSximada
Last active October 13, 2016 12:28
Show Gist options
  • Save TakesxiSximada/80b36506b8a45efa6f85bbd73edab54d to your computer and use it in GitHub Desktop.
Save TakesxiSximada/80b36506b8a45efa6f85bbd73edab54d to your computer and use it in GitHub Desktop.
gistに置いたHTML/CSS/jsをbl.ocks.orgで表示してみる

gistに置いたHTML/CSS/jsをbl.ocks.orgで表示してみる

HTMLのちょっとしたsampleをgistに置いているとそれを表示したくなります。 そんなとき以下の記事を見たので真似してみました。 http://qiita.com/hnakamur/items/ad1346bc9cfb0288ff60

このgistはその作業メモです。

  1. index.htmlを作成します。

    index.html:

    <html>
      <body>
        <h1>OK</h1>
      </body>
    </html>
    
  2. index.htmlをuploadします。

    $ gisting
    gist -d gistに置いたHTML/CSS/jsをbl.ocks.orgで表示してみる /MASK/bl.ocks.org/README.md /MASK/bl.ocks.org/index.html
    https://gist.github.com/80b36506b8a45efa6f85bbd73edab54d
    [master a3d86d4] updated gist
     3 files changed, 13 insertions(+)
    create mode 100644 bl.ocks.org/.gist_url
    create mode 100644 bl.ocks.org/README.md
    create mode 100644 bl.ocks.org/index.html
    

    https://gist.github.com/TakesxiSximada/80b36506b8a45efa6f85bbd73edab54d にgistが作成されました。

  3. URLのドメインを置換してアクセスする s/gist.github.com/bl.ocks.org/g

    https://bl.ocks.org/TakesxiSximada/80b36506b8a45efa6f85bbd73edab54d READMEが表示されています。Markdownは若干レイアウト崩れしています。

    openボタンがあるのでそちらで生の状態のものも確認できます。 https://bl.ocks.org/TakesxiSximada/raw/80b36506b8a45efa6f85bbd73edab54d/

<html>
<body>
<h1>OK</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment