Hugo + GitHubPagesを使用してブログ&プロフィールサイトを表示するまでのError一覧など

なぜGitHubPagesを選んだのか

無料であり、広告がないのが魅力的でした。はてなブログやZennも検討しましたが、GitHubを使用した経験が乏しいので、練習も兼ねることが出来るのではと考えました。またGitHubを使い慣れておくとは、スキル💪として有用だとも考えていました。
※記事をMarkdownで書くことは必須事項でしたが、どのサイトもその要件は満たしていました。

静的サイトジェネレーターになぜHugoを選んだのか

GitHubPagesを使用していく上で候補に挙がったのが、jekyllとHugoでした。jekyllはビルドに時間が遅い等の問題が見受けられました。調べるとjekyllからHugoに切り替えたというサイトもちらほらあり、かつ開発の継続性も見受けられましたので、Hugo（＋PaperMod）を選択しました。
※ただ、jekyllはGitHub推奨の静的サイトジェネレーターの様ですし、最初はそこから入っても良かったかもしれません。

参考にしたところ

• GitHub Pagesで作るウェブサイト開発入門 - 自分だけのホームページを無料で公開
• Hugo+Github Pagesでプロフィールページを作ってみた

受難の日々（Error一覧）😥

1. configが従来生成されたconfig.tomlではなく、config.ymlを作る必要があった。これは選んだテーマにより違う部分の様なので、テーマの公式ドキュメントに書いてある内容だと思います。config.ymlの書き方もなかなか掴めず苦労しました。最終的には下記の公式ページにたどり着き、何とか事なきを得ました。
   hugo-PaperMod installation sample config.yml
2. hugo serverで生成したサイトがうまく表示できませんでした。http://localhost:1313/ にアクセスしても、Chromeが「このサイトにアクセスできません」と無情に表示するだけでした。しばらく生成された文章を眺めていると、hugo serverが実行されている間しかlocalのWebサーバーは有効にならない、と気付きました。生成が終わったから実行を止めないといけないと勘違いしており、生成する度にctrl+cで止めてからアクセスしちゃってました。そりゃ表示されないですよね。

   Serving pages from memory
   Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
   Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
   Press Ctrl+C to stop
   

   Press Ctrl+C to stop!!
3. git cloneで取得したPaperModがhttp://localhost:1313/ の段階で動きませんでした。いくつか同様の事例を調べていると、git submoduleで導入している人が多かったので、実行してみたらうまくいきました（cloneしてきたフォルダは削除）。これは今のところ何が悪かったのか分かっていません。
4. 上記の件と関連してURLやパスが異なるといったErrorが出ました（なぜかcloneで持ってきたフォルダは「PaperMod」、submoduleで持ってきたフォルダは「hugo-PaperMod」でした）。GitHub ActionsにこのURLやパスは存在しませんというErrorが出ており、気づきました。自分が誤った修正をしている場面もあり、なかなかErrorが治まりませんでした。
5. git initの実行したパスが自分の想定と異なっており、GitHub上に上がるのが上位階層のフォルダ１つのみという状況が続きました。GitHub ActionsからDocsフォルダが見つかりませんというError内容が出ており気づきました。結局は、正しい位置でGit initを実行し直した上でadd → commit → pushの一連の流れを行うとうまくいきました。まだGit、GitHubの操作に慣れておらず、随分と右往左往しました。
6. Repositoryの名前が不適切になっており、想定外のURLでGitHubPagesが公開されていました。それに伴い、baseurlが異なるのでサイト自体が全く表示されませんでした。Repositoryの名前を「github.io」にしていたのですが、「github.io」単体はURLとして指定出来ないことが分かり、「ユーザー名.github.io」に切り替えたところサイトを表示することが出来ました。
7. autocrlfの関係からCSSが適用されませんでした。上記までの問題が解決された段階でGitHubPagesとしてこのサイトに問題なくアクセスすることが出来る状態でした。しかし、どう見てもCSSが適用されていない状態でした（htmlは表示されている）。Chromeで「ページの検証」を進めていると、CSSの部分で下記の様なErrorが起きていることが分かりました。Error内容で調べを進めると、Windowsでビルドを行うと改行コード（LF、CRLF）の関係から同様のErrorが出る場合があることが分かりました。
   Hugoのtitle変更方法（CSSが反映されない理由）

   Failed to find a valid digest in the 'integrity' attribute for resource
   

   git config -lでcore.autocrlfがtrueとなっていることを確認し、それをgit config --global core.autocrlf trueでfalseに変えてからhugoを実行しました。結果、Errorは解消され、何とかcssが適用された本サイトを拝むことが出来ました。最終的にこのErrorが一番時間を食いました。パッと見はパスのErrorかと思うので、パスを見直したりしていたのですが、全く問題は解決されず、キツかったです。尚、MacやLinux上でビルドすれば同様の問題は起こらない様です。
   気をつけて！Git for Windowsにおける改行コード

思ったこと

ビルドの段階でErrorを吐いてくれた方がまだマシなことに気づかされました。Error出てないのにうまく表示されない状態がキツかったです（GitHUb上のErrorに気づくのには時間を要しました）。 早く公式ドキュメントを読めるようにならないといけないですね。 先見の知恵にとても助けられました。autocrlfのErrorとか、自分だけでは確実に見つけることが出来なかったと思います。知見とまとめて下さっている皆様、ありがとうございます😍

不明なこと

• ターミナルでcommitしても、VSCode上のcommitが必要な旨の表示が消えない。
• 上記のautocrlfのErrorを解決した後でも、htmlがクソ長一行で生成されてしまう。

今後

このサイト自体、もっとコンテンツを増やしていきたいと思っています。というか、今の状態だと本当に「表示した」だけって感じです。記事を増やす、プロフィールページを追加する、タグを追加する等々、今後も開発を進めて行きたいと思います😁