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
が呼ばれます。多分。
{{ define "content" }}
{{ partial "home.html" . }}
{{ end }}
ここでindex.html
はテンプレートで、これに記述された処理通りに変数などを埋め込むことによって実際のhtmlを生成しています。所謂テンプレートエンジンみたいなものです。多分。
でどうやらhome.htmlを呼んでいるようなのでtheme/hugo-coder/layouts/partials/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画像部分だけ抜き出すとこの部分です。
{{ 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からコピーして作成したものです。
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のものから自由に差し替えることができそうです。
あまりドキュメントを見ずにざっくり適当にやってしまった、間違いがあったら指摘してください。
Author And Source
この問題について(themeの画像を差し替える | HUGOで個人Webサイトを作る(1)), 我々は、より多くの情報をここで見つけました https://qiita.com/amuyikam/items/a323436ed694f0718c6c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .