Hugo のバージョンをアップデート

現行バージョン

今までのは、ver.0.74.2 のSASSとか使える extended バージョン

$ hugo version
Hugo Static Site Generator v0.74.2-48565DE6/extended linux/amd64 BuildDate: 2020-07-17T17:32:27Z

hugo コマンドは/usr/local/bin/にある。

$ which hugo
/usr/local/bin/hugo

MACユーザがbrewコマンド(Homebrew)でインストールしている例が多いようですが、こちら前回はaptコマンドでインストールしたので、その流儀でアップデートします。

現行バージョンのアンインストール

$ sudo apt purge hugo
[sudo] user のパスワード: xxxxxxxx 
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
以下のパッケージが自動でインストールされましたが、もう必要とされていません:
  adobe-flash-properties-gtk
これを削除するには 'sudo apt autoremove' を利用してください。
以下のパッケージは「削除」されます:
  hugo*
アップグレード: 0 個、新規インストール: 0 個、削除: 1 個、保留: 0 個。
この操作後に 49.0 MB のディスク容量が解放されます。
続行しますか? [Y/n] y
(データベースを読み込んでいます ... 現在 320489 個のファイルとディレクトリがインストールされています。)
hugo (0.74.2) を削除しています ...
dpkg: 警告: hugo の削除中、ディレクトリ '/usr/local/bin' が空でないため削除できませんでした

最後に変な警告出たけど、ちゃんとアンインストールされている。

$ ls /usr/local/bin/hugo
ls: '/usr/local/bin/hugo' にアクセスできません: そのようなファイルやディレクトリはありません

Hugo ver.0.81.0 をインストール。

DownloadsDIRに移動して最新版をゲット。Linux64bit版の extendedバージョンをインストールする。

$ cd ~/Downloads/
$ wget https://github.com/gohugoio/hugo/releases/download/v0.81.0/hugo_extended_0.81.0_Linux-64bit.deb
--2021-02-27 09:17:48--  https://github.com/gohugoio/hugo/releases/download/v0.81.0/hugo_extended_0.81.0_Linux-64bit.deb
github.com (github.com) をDNSに問いあわせています... 52.69.186.44
github.com (github.com)|52.69.186.44|:443 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 302 Found
.......................................
github-releases.githubusercontent.com (github-releases.githubusercontent.com) をDNSに問いあわせています... 失敗しました: 名前またはサービスが不明です.
wget: ホストアドレス `github-releases.githubusercontent.com' を解決できませんでした。

という感じでなぜかダウンロードに失敗。たぶん設定ファイルまわりいじればうまくいくんだろうとか思いつつ、面倒なのでリリースサイトから手動でダウンロード。

ダウンロードされた debファイルをダブルクリックして、「ソフトウェアのインストール」の画面でインストール。なんだかMACみたいw

一応ちゃんとバージョン確認はできた。

$ hugo version
hugo v0.81.0-59D15C97+extended linux/amd64 BuildDate=2021-02-19T17:07:12Z VendorInfo=gohugoio

hugo serverコマンドで既存のサイトを起動して確認。hugoコマンドでビルドできることも確認。

問題なくバージョンアップできた。めでたし。

新機能

バージョン 0.81.0 の新機能の説明はこちらに。

gohugo.io

ブロック要素にクラス属性の付加が可能に!

新機能として Markdown でブロック要素にクラス属性が付けられるようになった。

Goldmarkパーサの設定解説がここ gohugo.io

まずconfig.tomlのパーサの設定でmarkup.goldmark.parser.attribute内にブロック要素への属性付加をtrueにする。

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      ..........
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true    #<== ここをtrueに
  ........................

そのうえで、記事内にこういう形でブロック要素にクラス名を付ける。

パラグラフの例

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ...... officia deserunt mollit anim id est laborum.
{.para1}

HTMLのレンダリング結果

<p class="para1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, …… officia deserunt mollit anim id est laborum.
</p>

公式サイトに載ってるサンプルから

リストの例

* Fruit
  * Apple
  * Orange
  * Banana
  {.fruits}
* Dairy
  * Milk
  * Cheese
  {.dairies}
{.list}
<ul class="list">
  <li>Fruit
    <ul class="fruits">
      <li>Apple</li> 
      <li>Orange</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Dairy
    <ul class="dairies">
      <li>Milk</li>
      <li>Cheese</li>
    </ul>
  </li>
</ul>

ブロッククオートの例。やってみるとクラス名とID名は付けられるが、任意の属性は無視されるようだ。

> foo
>
> bar
{.myclass #myid class="class1 class2" type="myblockq"}
<blockquote class="myclass class1 class2" id="myid">
<p>foo</p>
<p>bar</p>
</blockquote>

Table にも可能

| Day     | Meal    | Price |
| --------|---------|-------|
| Monday  | pasta   | $6    |
| Tuesday | chicken | $8    |
{.mytable}
<table class="mytable">
..........
</table>

コードブロックにもクラス名は付けられるのだろうか?? ....と期待したが、残念ながらこちらは単に無視された。

~~~javascript
var oldUnload = window.onbeforeunload;
window.onbeforeunload = function() {
    saveCoverage();
    if (oldUnload) {
        return oldUnload.apply(this, arguments);
    }
};
~~~
{.lineno}
<div class="highlight">
  <pre class="chroma">
    <code class="language-javascript" data-lang="javascript">
        ..........
    </code>
  </pre>
</div>