« ^ »

Hugo+NetlifyでhostingしているWebサイトの改善

所要時間: 約 2分

Hugo+Netlifyでhostingしているsiteに必要な作業を洗い出す。

postsの一覧に記事が表示されるように構造を変更する

  1. contentディレクトリの直下にある記事ファイルをcontent/postsに移動する。

    • cd YOUR_ROOT_DIRECTORY # hugoで作成した静的サイトのリポジトリのルートディレクトリに移動。
    • mkdir -p content/posts
    • mv content/* content/posts/*
  2. git add content
  3. git commit -m "Fix directory structure."

設定ファイルをthemeにあったものにする

設定ファイルはthemeによって結構異なるのでそれぞれのthemeにあった設定を用いる。 使える形式は次の3つ。

  • config.json (JSON)
  • config.yaml (YAML)
  • config.toml (TOML)

themenの選択は次のように設定ファイルに書き込む。

theme: "hugo-PaperMod"
YAMLの場合

themeに hugo-PaperMod を使用する場合は、以下のページが参考になる。 https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/#home-info-mode

Iconを表示する

  1. static配下にiconで用いる画像を置く。
  2. params.profileMode.enabledをtrueにする。
  3. params.profileMode.imageUrlに画像のURLを設定する。

この状態で生成を行うとIconが表示される。

例::

params:
  profileMode:
    enabled: true
    imageUrl: "アイコン画像へのURL"
    imageTitle: "画像のキャプション"
config.yamlの設定例

Titleを変更する

  1. params.profileMode.enabledをtrueにする。
  2. params.profileMode.titleにサイトの名前を設定する。

この状態で生成を行うとTitleが表示される。

例::

params:
  profileMode:
    enabled: true
    title: "サイトのタイトル"
config.yamlの設定例

画像ファイルは別でホスティングする。

netlifyで画像を毎回uploadするとupload時に時間がかかるかもしれない。 変更してないファイルのuplaodをしないようにできるかを調べる必要がありそう。 もしできないようであれば別でホスティングしたほうがよいかもしれない。 優先度は低そう。