元々はプロフリというサービスを用いてSNSなどの連絡先一覧を表示していたが、自分専用のものを作ってみたくなったので作ってみた。GitHub Pagesを用いて無料でサイトを公開できるようにしてみた。
HTMLやCSSを一から書くのは面倒なので、無料で使えるサイトテーマを使用することにしたが、連絡先一覧を表示するだけなのでテーマを使用しなくてもブロックボタンだけどこかから拾ってくればできたかもしれない。
- Hugo（静的サイトジェネレータ）
- Go
- GitHub (Pages)
- Git
- Command PromptやPower Shelk
- VSコードなどのテキトーなテキストエディタ（Cursorを使用）
- Hugoという静的サイトジェネレータをダウンロード
- コマンドプロンプトなどに
Hugo new site <プロジェクト名>コマンドを入力。repositoryが作成される。その後プロジェクトのルートフォルダに移動。 - Hugoの公式ページに行き、気になったテーマを指示に従ってダウンロード。今回はLynxというテーマを使用
- なぜか指示通りにしてもダウンロードされないので
.\themesに手動でテーマのGitHubのrepositoryをクローン .\themes\lynx内のconfig.tomlファイルの中身を好きなように書き換える。リンクの追加方法は公式のREADMEを参照- Link単体の項目は色味やアイコンが同じでつまらなかったので、こちらのFont AwesomeからSVGファイルをダウンロードしてきて、
.\themes\lynx\assets\css内部のcustom.cssをいじってみた。ネットでRGB値を調べることができるサービスもあるので、各種サービスの画面をスクショし、その画像を元にそちらで色味を合わせてみた - なんかよく分かんないけどとりあえず
config.tomlやその他の変更を加えたフォルダたちをルートフォルダに配置した - GitHubにリモートデポジトリを作成してルートフォルダから全部Push。テーマはサブモジュール扱いにしておく
- GitHub上のrepositoryの
Settigs > Pagesを選択し、公開 - 普段のように
main > docsを選択して手動でdeployできそうかと思ったが上手くいかなかったので、GitHub Actionsを使用することにした。幸いHugo対応のものがあったので、画面上からymlファイルを.github/workflowsに追加した。配置する階層さえ合っていれば名前はどうでもよいので、デフォルトのhugo.ymlのままにしておいた - GitHub Actionsでもなぜかdeploy出来なかったが、しばらくして過去の履歴を見てみたら成功しているものがあったので、そちらのURLを公開して完成
- 他のHugoテーマでテストしてみたら上手くいったのに、なぜかLynxだと公式のREADMEの通りにやっても上手く作業ができなかった（
.\themesへの手動ダウンロードなどが必要だった） - そのままだとpathが通っていないらしく、自分でpathを追加するファイルを作らなくてはいけなかった
config.tomlにtheme = "lunx"を追加したが、こちらはどこまで必要だったのか分からない- baseURLはもともとコメントアウトされているが、そちらも
https://<ユーザー名>.github.io/<レポジトリ名>/のURLを追加してコメントアウトを解除しておいた方がよい - それで、なぜかbaseURLの記述をコメントアウトするとローカルサーバーを
hugo serverで起動したときの表示がバグる hugoコマンドでpublicフォルダを生成すると、ローカルサーバーでは上手くいっていてもindex.htmlの表示がバグっている。が、多分あとで勝手にCSSなどが読み込まれて調節されるので気にしなくてよい- ルートフォルダに
config.tomlとassets, staticフォルダは配置が必要だと思われる。layoutsも当然配置しないと表示がバグる。ただ、.\themes\lynx内のコピー元の重複したファイルたちは削除していいのかは謎 - Deployが失敗した理由はGoのバージョン情報が間違って書き込まれていたかららしい。公式にも
1.21.5と表記されているが○.○○というフォーマットにしなくてはいけないらしく、ルートフォルダ内のgo.modを1.21と書き換えたら直った。 - その後はGitHub Actionsでサイトをdeployしようとすると、
ymlファイル（hugo.yml）内部のtarコマンドがpublicフォルダを見つけられないというエラーが出た。元のconfig.tomlファイルにpublishDir ="docs"と書いていたからかもしれないが、そちらを修正してhugoでサイト情報がpublicに出力されるように（デフォルトの設定だとpublic）しても直らなかった。なぜたまたま解決してdeployできた履歴があったのかは謎 - YouTubeやブログなどでも参考情報は見つかるが、テーマごとにかなり操作が異なるので、困ったらChatGPTに聞くのが早いかもしれない。
ymlファイルの書き換えなどが必要な場合はこちらからやるとよい