当ブログはHugoで運営しており、もちろんコードブロックでソースコードを表示する術は用意されている。

しかし、表示しているソースコードの中には日々の更新で内容が書き換わるモノも含まれており、ブログ内でも更新後の内容に書き換えるのはめんどくさい。

Gistを使えばソースコード単位で管理出来るが、dotfilesのソースコードなんかはGithubですでに管理しており、そのためにわざわざGistも使うのは嫌だった。

これを解決するための方法を調べたところgiet-Itを利用するのが良さげだったので、その使い方の備忘録を記す。

目次

gist-itとは？

GitHubのコードをブログに貼り付けて表示することができるようになる外部サービス。

以下に本家サイト例を引用する。¹

<script src="https://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js"></script>

使い方

「分かりやすい技術ブログ」 さんが解説されている 「GitHubのコードをブログに貼る時の注意点【gist-it】」 ²の通りにやればOK。

<script src=”https://gist-it.appspot.com/github/（以下で説明するURL）”</script>

Hugoならshortcodeで運用しちゃえばいい

もしHugoで使うならshortcodeを作ってしまった方が楽。

私はlayouts/shortcodes/gistit.htmlを作成して以下の内容で運用している。

<div>
<script src=”https://gist-it.appspot.com/github/{{ .Get 0 }}”></script>
</div>

使う時は｛{< gistit "上で説明したURL" >}} という感じ(先頭の波括弧は全角なのでコピペ注意)。