Hugoブログテーマ「Salt」

Tips

Hugoでデプロイする時たまにビルドエラーになる原因

Hugoでデプロイする時たまにビルドエラーになる原因

 Hugo
 2022-01-29

GitHub Actionsを使ったHugoのデプロイ時に、たまにエラーになっていたんですが原因が分かりました。

package.json

  "scripts": {
    "create-ranking": "node scripts/create-ranking.js",
    "build": "hugo --gc --minify",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

npm run buildしてみるとこんな感じのエラーが出て、たまにデプロイがうまくいきませんでした

Start building sites … 
hugo v0.89.4-AB01BA6E darwin/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio
ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2022/01/29 20:21:30 render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: partials/sidebar.html:101:72: executing "sidebar" at <(index $thumbnail 0).Fill>: error calling Fill: image "/Users/okdyy75/hugo-theme-salt/content/article/hugo/fontawsome/thumbnail.png": this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Total in 235 ms

ローカルのhugoとhugo-binのバージョンを確認してみると

Hugoで一週間のPV数順の人気記事を作る方法

Hugoで一週間のPV数順の人気記事を作る方法

 Hugo
 2022-01-12

HugoとGoogle Analyticsを使って人気記事のランキングを作る方法を紹介します

ステップとしては

  1. GCPから鍵を作成し、Google Analyticsで権限を付与
  2. Google Analytics Data APIからpv数を取得するスクリプトを作成
  3. 保存したpvデータを元にHugoからランキング作成
  4. CIで定期的にpv取得スクリプトを起動させる

1. GCPから鍵を作成し、Google Analyticsで権限を付与

基本的にはdevelopers IOさんの記事を参考にします。「Google Analyticsでサービスアカウント用のユーザーに権限を与える」の部分まで実行してください。

Hugoで年月別のアーカイブを作る方法

Hugoで年月別のアーカイブを作る方法

 Hugo
 2021-12-28

Hugoでアーカイブを作るには2種類ほど方法があります

①タグやカテゴリと同様にタクソノミーを設定する

config.ymlにarchiveを追加し

taxonomies:
  archive: archives

記事のフロントマターに年月を設定してあげれば

archives: ["2021年12月"]

こんな感じのデータが作成されます。この時「yyyy年mm月」の形式でないと年月でソートされないので注意です

    {{ .Site.Taxonomies.archives.Alphabetical.Reverse }}

    [
        {2021年12月 [WeightedPage(0,"Hugoで年月別のアーカイブを作る方法") WeightedPage(0,"HugoでFontawsomeを使う方法")]}
        {2021年10月 [WeightedPage(0,"Hugoに検索機能を追加しよう")]}
        {2021年9月 [WeightedPage(0,"Hugoを使い始めた人に捧げるTips11選") WeightedPage(0,"Go言語Tips② Hugoで使われるlayoutの正体")]}
    ]

新しく作る記事はarchetypesを更新してあげれば問題ないのですが、すでにある記事にarchiveを追加してあげるのは結構大変ですよね

HugoでFontAwesomeを使う方法

HugoでFontAwesomeを使う方法

 Hugo
 2021-12-04

HugoにFontAwesomeを使う場合はHugoの機能であるモジュールを使うと簡単に実現できます！

1. npmでFontAwesomeをインストール

package.jsonがない場合はnpm initしてください

npm install -D @fortawesome/fontawesome-free

2. config.ymlのmoduleに使いたいjsファイルをmounts

注意点としてmountすると、デフォルトであるtargetのルートディレクトリが無視されるので明示的に追加する必要があります

Hugoに検索機能を追加しよう

Hugoに検索機能を追加しよう

 Hugo
 2021-10-15

このサイトにも実装されているんですが、Hugoにlunaを使った検索機能を実装する方法を紹介します。

基本的には公式で紹介されているgistを参考に実装します。（コメント下の方にvanilla js版を作ってくれた方がいました！感謝！）

こちらのサイトも参考にさせて頂きました。

1. lunrのセットアップ

npm install lunr lunr-languagesを実行してパッケージをインストールし、config.ymlに下記を追加します

Hugoを使い始めた人に捧げるTips11選

Hugoを使い始めた人に捧げるTips11選

 Hugo
 2021-09-16

1. とりあえずhugo server -Dって使ってるけどこれって何？

draft: trueのコンテンツファイルも含めて出力。

詳しくはhugo server --helpでチェック


2. taxonomyとtermの違い

  • taxonomyは「タグ」や「カテゴリー」といった分類自体
  • termはそのタグやカテゴリーに属する「go」とか「tips」のことです

こちらのサイトが非常に分かりやすいです！
https://maku77.github.io/hugo/taxonomy/basic.html


3. content配下の固定ページに共通のlayoutを使いたい

content配下のKindが「page」になるので「layout/page/single.html」が使えます

Go言語Tips② Hugoで使われるlayoutの正体

Go言語Tips② Hugoで使われるlayoutの正体

 Go言語
 2021-09-13

Hugoで使われるlayoutですが実態はgo-templateという、いわゆるテンプレートエンジンです

https://pkg.go.dev/text/template


テンプレート内のハイフンありなしの違い

たまにHugoテンプレート内で{{ .Title }}や{{- .Title -}}で書いてるものを見かけます この違いはハイフンを付けることで前後の空白を除去したい場合に使われます

ちなみに公式ドキュメントにあります
https://pkg.go.dev/text/template#hdr-Text_and_spaces


配列や連想配列の空チェック

Hugoを使う際、空ではない文字列or配列or連想配列のチェックする時に、最初はこんな感じで空チェックをしていたんですが

Go言語Tips① 変数について

Go言語Tips① 変数について

 Go言語
 2021-09-13

変数定義

Hugoのテンプレート内で{{ $title := .Title }}や{{ $title = .Title }} のようにコロンをつけたり、付けなかったりする記述を見ます。

これはgo言語の書き方の特徴で、変数を定義する場合の省略記法です

title := "タイトル"

省略しない場合はこうなります

var title string = "タイトル"

変数のスコープ

go言語の変数スコープはif、for、switchなどのブロック内で有効です
if内などで新しく変数を定義するとifブロック内での変数になるので注意です。

    title := "タイトル"
    if true {
        fmt.Println(title)
        title := "タイトル2"
		fmt.Println(title)
    }
    fmt.Println(title)

タイトル
タイトル2
タイトル

変数の命名規則

go言語では変数名を短く、スコープも小さく、変数の寿命を短くすること推奨されます
処理が長くなる場合は細かい単位でメソッドに切り出します。