1. Home
  2. /
  3. Hugo
  4. /
  5. HugoでFontAwesomeを使う方法

HugoでFontAwesomeを使う方法

HugoでFontAwesomeを使う方法

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

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

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

npm install -D @fortawesome/fontawesome-free

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

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

module:
  mounts:
    - source: static
      target: static
    - source: node_modules/@fortawesome/fontawesome-free/css/all.min.css
      target: static/css/vendor/@fortawesome/fontawesome-free/css/all.min.css
    - source: node_modules/@fortawesome/fontawesome-free/webfonts
      target: static/css/vendor/@fortawesome/fontawesome-free/webfonts

3. あとはheadで読み込ませるだけ

<link rel="stylesheet" href="{{ "css/vendor/@fortawesome/fontawesome-free/css/all.min.css" | absURL }}">

FontAwesome以外のライブラリでもいけるので、是非使ってみてください!

関連記事

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

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

Hugoでアーカイブを作るには2種類ほど方法があります ①タグやカテゴリと同様にタクソノミーを設定する config.ymlにarchiveを追加し taxonomies: archive: archives 記事のフロントマターに年月を設定してあげれば archives: ["2021年12月"] こんな感じのデータが作成されます。この時「yyyy年mm月」の形式でないと年月でソートされないので注意です {{ .Site.Taxonomies.archives.Alphabetical.Reverse }} [ {2021年12月 [WeightedPage(0,
Hugoに検索機能を追加しよう

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

このサイトにも実装されているんですが、Hugoにlunaを使った検索機能を実装する方法を紹介します。 基本的には公式で紹介されているgistを参考に実装します。(コメント下の方にvanilla js版を作ってくれた方がいました!感謝!) こちらのサイトも参考にさせて頂きました。 1. lunrのセットアップ npm install lunr lunr-languagesを実行してパッケージをインストールし、config.ymlに下記を追加