ポートフォリオ作成
こちらの Qiita の記事で Hugo を使って簡単にポートフォリオを作成できるというのを見かけたので，以前まで使っていた personal page を移植しました． 移植した際に少し詰まった部分があるので，Tips としてこの記事で紹介します．
この記事は以前に使用していた Hugo Theme の内容になります
最初は Hugo Theme Cactus Plus というテーマで作成していたのですが，再度作り直してます． （再作成した理由は，少しだけ凝ったテーマを使って見たくなったためです笑） 作り直したテーマは Hugo Future Imperfect Slim になります．
Hugo はシンプルなデザインが多いので非常にオススメです．
基本的な構築方法は上記 Qiita の記事に沿って行っています． 別途追加した要素としては，最初に作成した Hugo Theme Cactus Plus と作り直した Hugo Future Imperfect Slim それぞれありますので，この際どちらも紹介します．
-
Hugo Theme Cactus Plus
- メニューの追加設定
- Custom-CSSの設定（custom-cssの設定は簡単に設定できますので，今回は割愛します）
-
Hugo Future Imperfect Slim
- faviconの設定
- github.ioでサイトをhostした場合のpath設定
個人的には，1回目に作成したテーマより2回目の方が簡単でした．
Hugo Theme Cactus Plus
メニューの追加設定
Hugo Theme Cactus Plus のテーマでは，デフォルトで About/Archive/Tags の3つがメニューとして存在しています．今回はそこに Projects を新しく追加しましたので，その方法を記載します． 実施することとしては，以下の4ステップになります．
-
content配下に projects ディレクトリを作成し，_index.mdファイルを配置する． 記事などのページ情報はcontentで管理します．├── content │ ├── about │ ├── posts │ └── projects │ └── _index.md -
themes/layouts/partials配下にあるnav.htmlに Projects のリンクを追記する． これは Tags などのリンクをコピーして，name の部分は projects に修正すれば大丈夫です． メニューバーに Projects を表示させるために，この部分を修正する必要があります． -
themes/layouts/section配下にabout.htmlをコピーして，projects.htmlに rename する．ここに追加することで，セクションのトップページとして扱われることになります． -
最後に，コマンドラインで
hugoを実行する．hugoコマンドを実行することで，必要なものが自動生成・反映されます．
以上でメニューを追加することができます． （他のテーマでは，もう少し簡単にメニュー追加が可能なものもあります）
Hugo Future Imperfect Slim
favicon の設定
favicon を設定する方法は，下記の3ステップになります．
-
まず，下記のデフォルトの
config.tomlの内容のうち，faviconとfaviconVersionを変更します．[params.meta] description = "A theme by HTML5 UP, ported by Julio Pescador. Slimmed and enhanced by Patrick Collins. Multilingual by StatnMap. Powered by Hugo." author = "HTML5UP and Hugo" favicon = false <-- trueに変更する svg = true faviconVersion = "1" <-- 1を削除する msColor = "#ffffff" iOSColor = "#ffffff" -
config.tomlを修正したら，static 配下にfaviconディレクトリを作成する． -
static/favicon配下にfavicon.icoとfavicon-32x32.pngを配置する． なぜ favicon-32x32 かというと？layouts/partials/meta.htmlのrel=iconに以下が記載されている- favicon-32x32
- favicon-16x16
- site.webmanifest
なので，これに合わせて名前を変更するか webmanifest を新しく作成し，その中に諸々の内容を記載する必要がある．
github.io でサイトを host した場合の path 設定
今回作成したサイトを github.io で host した場合に発生した内容です．
各メニューの URL として，https://<アカウント名>.github.io/portfolio/home/ などとなって欲しいのですが，https://<アカウント名>.github.io/portfolio/portfolio/home/ と portfolio が重なってしまうエラーが発生しました．
上記エラーを回避する方法の紹介になります．
config.toml ファイルに各メニューの設定をする箇所があります．
[menu]
[[menu.main]]
name = "Home"
identifier = "home"
url = "/" <-- /を削除する
pre = "<i class='fa fa-home'></i>"
weight = 1
[[menu.main]]
name = "About"
identifier = "about"
url = "/about/" <-- 先頭の/を削除する
pre = "<i class='far fa-id-card'></i>"
weight = 2
[[menu.main]]
name = "Blog"
identifier = "blog"
url = "/blog/" <-- 先頭の/を削除する
pre = "<i class='far fa-newspaper'></i>"
weight = 3
url の部分で先頭の/を削除することで，上記問題を回避することできます．
おわりに
参考となる記事などがあまりなかったので，試行錯誤しながら行いました．そのため，もっと簡単にする方法が他にもあるかもしれないですので，もし他にあれば，Twitter などでコメント頂けると大変助かります．
