サイトジェネレータ

Hugo で作ったサイトに Syntax highlighter を導入してみた

Category: Hugo
Satoshi Miyabe
Satoshi Miyabe

ブログの記事などでプログラムのソースコードを貼り付けると、 色付けされた見やすい表示に変換してくれる Syntax highlighter (シンタックスハイライター)を導入してみました。

私が使っているバージョンの Hugo にも Syntax highlighter は入っているのですが、 HTML を生成するタイプのようです。 私はどちらかというと JavaScript で動作するものを使うほうが好みです。 生成された HTML に余分なタグが入ってほしくないからです。

なので、今回は highlight.js を組み込みむことにしました。

この highlight.js は 185 の言語に対応し、 90 のスタイルが準備されています。 マイナー(?) な Elixir や Groovy, Dockerfile にも対応しているので、色々と使えそうです。

続きを読む

Hugo で画像をリサイズしたりトリミングしたりするテンプレートを書いてみる

Category: Hugo
Satoshi Miyabe
Satoshi Miyabe

Drupal をはじめとする一般的な CMS であれば、アップロードした画像ファイルのサイズ調整などを自動で処理する機能が準備されています。

Hugo にも同様の機能 がありましたので、試してみました。

やりたいことは、ブログ一覧に表示されるタイトル画像を縮小すること。そして、ブログの各投稿のページは上下を切り取った画像を表示すること。この 2 点です。

しかし、思った通りに動作しません。調べながら画像ファイルのサイズ調整の仕組みを作っていたのですが、結構はまってしまったのでまとめておこうと思います。

続きを読む

Hugo を初めて使ってみた感想

Category: Hugo
Satoshi Miyabe
Satoshi Miyabe

私たちの事務所「ランディネットワーク」の Web サイトですが、ようやくリニューアル作業を開始しました。

今回のリニューアル作業では大きな変更がありました。 それは、いままで散々お世話になってきたコンテンツ管理システム( CMS )の利用をやめて、 Hugo という静的サイトジェネレータを用いているところです。

サイトジェネレータは素晴らしいです。

まだ既存のサイトをコピペしてページ作成しているだけなので、見栄えなどの不完全なところが多数残っています。 (レイアウトの崩れや画像のサイズが不釣り合いだったりします。)

続きを読む