Hugoブログテーマ「Salt」

Hugo

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」が使えます

Hugoでできること

Hugoでできること

 Hugo
 2021-09-12

最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います

ちなみにHugoとGatsbyどっちの方がいいの？

サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。

というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。