themeの画像を差し替える | HUGOで個人Webサイトを作る(1)

HUGO

HUGOはGo言語製の静的サイトジェネレータです。
他の静的サイトジェネレータと比べると生成が早いらしいですが比較していないのでわかりません。
https://gohugo.io/

どちらかというと、動的にWebページを生成するWordPressとの比較で利用を決めました。
WordPressは枯れていてあまり難しいことをしなくても立ち上がる点では便利なのですが、サーバは運用したくない…というかデータがDBで管理されているのがちょっと気に食わない。個人サイト動的である必要なくない? という理由でHUGOを利用しています。

個人Webサイトの構成

先日、HUGO + netlifyで爆速で個人Webサイトを立ち上げました。
ドメインはムームードメインで取得し、ムームーDNSからnetlifyの静的サイトのURLに送っています。気づいたらHTTPS化もLet's encriptで勝手にされていてとても体験が良かったです。
HUGOのコンテンツはgitで管理していて、githubのprivate repositoryにpushしたらnetlifyが勝手にupdateしてくれます。楽!!!

目標

ポチポチやっていたら勢い余ってほとんどの設定をthemeのデフォルト値のまま公開してしまったので、徐々に改善していきます。
勝手がわかったらそのうちthemeをいじりだすと思います。

themeのデフォルトの画像からオリジナルの画像に差し替える

今回やることです。
現状、webページにアクセスするとこんな感じでほぼthemehugo-coderのデフォルトになっています。
https://github.com/luizdepra/hugo-coder/

このページだけで改善点がいくつかありますが、まずは目立つavatar画像を差し替えるところから始めます。

画像の読み込み部分を調べる

Webサイトにアクセスすると、theme/hugo-coder/layouts/index.htmlが呼ばれます。多分。

index.html

{{ define "content" }}
  {{ partial "home.html" . }}
{{ end }}

ここでindex.htmlはテンプレートで、これに記述された処理通りに変数などを埋め込むことによって実際のhtmlを生成しています。所謂テンプレートエンジンみたいなものです。多分。
でどうやらhome.htmlを呼んでいるようなのでtheme/hugo-coder/layouts/partials/home.htmlを見に行きます。

home.html

<section class="container centered">
  <div class="about">
    {{ with .Site.Params.avatarurl }}
      <div class="avatar"><img src="{{ . | relURL }}" alt="avatar"></div>
    {{ end }}
    <h1>{{ .Site.Params.author }}</h1>
    <h2>{{ .Site.Params.info }}</h2>
    {{ with .Site.Params.social }}
    <ul>
      {{ range sort .}}
        {{ if .icon }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">
              <i class="{{ .icon }}" aria-hidden="true"></i>
            </a>
          </li>
        {{ else }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">{{ .name }}</a>
          </li>
        {{ end }}
      {{ end }}
    </ul>
    {{ end }}
  </div>
</section>

home画面っぽいhtmlが出てきました。avatar画像部分だけ抜き出すとこの部分です。

home.html

    {{ with .Site.Params.avatarurl }}
      <div class="avatar"><img src="{{ . | relURL }}" alt="avatar"></div>
    {{ end }}

ここで、謎の構文with .Site.Params.avatarurl が出てきて、どうもsrc="{{ . | relURL }}"で変数を代入しています。この.Site.Params.avatarurl はどこから来ているかというと、ドキュメントによるとconfiguration fileに記述されているそうです。
https://gohugo.io/variables/site/

Webサイトの設定ファイルであるところのconfig.tomlを見に行きましょう。
これはWebサイトを作成するときにthemeのexampleからコピーして作成したものです。

config.toml

baseurl = "https://amuyikam.work"
title = "My Website"
theme = "hugo-coder"
languagecode = "jp"
defaultcontentlanguage = "jp"

paginate = 20
canonifyurls = true

pygmentsstyle = "bw"
pygmentscodefences = true
pygmentscodefencesguesssyntax = true

disqusShortname = "amuyikam"

[params]
    author = "amuyikam"
    info = "Infrastructure and Software Developer"
    description = "amuyikam's personal website"
    keywords = "blog,developer,personal"
    avatarurl = "images/avatar.jpg"

    favicon_32 = "/img/favicon-32x32.png"
    favicon_16 = "/img/favicon-16x16.png"

    footercontent = ""

    hidecredits = false
    hidecopyright = false

    rtl = false

    math = false
    custom_css = ["css/custom.css"]

# Social links
[[params.social]]
    name = "Github"
    icon = "fab fa-github fa-2x"
    weight = 1
    url = "https://github.com/ymaki/"
[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter fa-2x"
    weight = 2
    url = "https://twitter.com/amuyikam/"
[[params.social]]
    name = "Qiita"
    icon = "fab fa-qiita fa-2x"
    weight = 3
    url = "https://qiita.com/amuyikam"

# Menu links
[[menu.main]]
    name = "About"
    weight = 1
    url = "/about/"
[[menu.main]]
    name = "Blog"
    weight = 2
    url  = "/posts/"

avatarurlありましたね。抜粋すると次の行です。

[params]
    avatarurl = "images/avatar.jpg"

ということで、htmlではimage/avatar.jpgを見に行っていることがわかりました。実はここまでしなくてもthemeフォルダの中を漁るか、生成されたHTMLを読めばわかるのですが、まあいいです。

画像を差し替える

現在読み込まれているのは theme/hugo-coder/static/images/avatar.jpgです。
ここで注意しなければならないのが、themeの画像を直接差し替えてはいけないということです。確かにその方法で画像を差し替えることは可能なのですが、themeを編集してしまうとtheme側に更新があった際に編集したthemeをupdateしづらくなってしまうためです。
HUGOは優先順位として独自のもの > themeのものとなるよう設計されているため、独自のavatar.jpgを置くだけで画像を差し替えられそうです。

$ pwd
/somewhere/hugo-website
$ mkdir static/images
$ cp /somewhere/your/image.jpg static/images/avatar.jpg

画像を差し替えた後、確認用サーバを立ち上げてブラウザで確認します

$ hugo server
$ : 画像が変わらない場合は--disableFastRenderオプションを付けてハード再読込してください
$ hugo server --disableFastRender

こんな感じで画像が差し替わっていれば成功です。🎉🎉🎉

本番に反映

特にテストを書いていないので、目で見てOKだったら本番にDeployしちゃいます。
remoteはgithubのprivate branch向いています。

$ git add static/images/avatar.jpg
$ git commit -m 'change home avatar'
$ git push

これであとはnetlifyがいい感じに更新してくれます。
https://amuyikam.work/

まとめ

HUGOでhomeページの画像を差し替えました。
画像以外にも、staticに置いてあるものは同じようにthemeのものから自由に差し替えることができそうです。
あまりドキュメントを見ずにざっくり適当にやってしまった、間違いがあったら指摘してください。