irusukanです。個人サイトを開設しました。 基本的にはてんむすくんやドット絵を載せる場にしますが、開発系の備忘録を書いたりもしていくつもりです。 せっかくなのでサイト作成時にちょっと調べたことや、はまったことの備忘録を残しておきます。
使用したもの#
サイト作成#
- Hugo
- 使用テーマ: Blowfish(ブルーフグ)
サイト公開#
- Netlify(free plan)
- namecheap
静的サイトジェネレータのHugoは以前触ったことがあったのですが、軽くて作りやすくてやはりいいですね。 あとBlowfishテーマが素晴らしい！ カスタマイズしやすく、公式ドキュメントも日本語があるし、何よりふぐちゃんがかわいい。
namecheapはnew comer割引をやっており、.comドメイン（1年分）が$6.67で取得できました。あまりにも安すぎるし、サイトUIも分かりやすかったのでおすすめです。
サイト作成について#
便利そうなCLIツールが公式で用意されており頭が下がる限りなのですが、カスタムの都合上今回は使いませんでした。
（でもCLIツールを起動すると出てくるドット絵ふぐかわいい）
2025.05.03 追記：
CLIでauthorを設定するとサイトを立ち上げられなくなるバグがあったのでBugfixし、無事マージしていただけました。
https://github.com/nunocoracao/blowfish-tools/releases/tag/v1.10.0
自分の場合は下記コマンドでサブモジュールとしてblowfishをダウンロードし、 ``` mkdir newSitePath cd newSitePath git init git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish ``` その後newSitePath配下にconfigフォルダや必要フォルダを作成していきカスタマイズしました。
Worksの画像取得(resources.Match)ができない問題#
本サイトのWorksでは、特定のフォルダに置いた画像をすべて取得して一覧表示をしています。なぜ動的に取得しているのかというと、作品数が増えていったとき、いちいち画像リンクを書くのが面倒だからです。
画像を取得する際は下記のようにresources.Matchを使用していたのですが、最初はまったく取得できませんでした。
{{ $images := resources.Match "img/works/*.{png,jpg,gif}" }}
原因#
画像をstatic/img/worksに置いていたため、リソース扱いされていなかった。
上記はグローバルリソースを取得する関数なのですが、その対象はassetsフォルダ内、あるいはassetsフォルダにマウントされた任意のフォルダのみらしいです。
公式ドキュメントに書いてました。
引用：https://gohugo.io/functions/resources/match/
対応#
画像をassets/img/worksに置いて解決。 カスタムマウントとかもできそうでしたが、フォルダ変更がシンプルかつ早そうでした。
namecheapにDNSを設定する方法#
この手順に従いました。
https://dev.to/easybuoy/setting-up-domain-with-namecheap-netlify-1a4d
Netlifyのフォーム機能が便利#
netlifyを使ってサイトをデプロイすると、フォーム機能が使える特典がついてきます。
https://docs.netlify.com/forms/setup/
公式ドキュメント通りに進めていけば作れます。
注意点は2点。
1. タグに設定するのは"netlify"か"data-netlify=“true"“のどちらか一方#
formタグにnetlify専用の属性を追加するだけでフォームが使えるという便利すぎる機能なのですが、その属性が2パターンあって少しややこしい。
コードは下記のどちらかにします。間違って両方記載すると動きません。
<form name="contact" method="POST" data-netlify="true">
~
</form>
or
<form name="contact" method="POST" netlify>
~
</form>
2. 殺風景なデザインなので、気になるならCSSを設定する必要あり#
公式ドキュメントにあるコードをベタ貼りすると下記のフォーム表示になります。
しかしいったんフォームを作ってしまえば、netlify上でFormをActiveにした時点で使えます。
届いた連絡は"Forms"メニュー→“Active forms"から自分のフォームを選択、で見ることができます。
“Forms"メニュー→“Form notifications”→“Form submission notifications"から、メール通知の設定も可能です。
おまけ#
NetlifyでBuildが走っているとき、暇だろうという心遣いでか暇つぶし用ゲームが用意されていてかわいい。
以上です。