非プログラマでもHUGO＋Cloudflare Pagesで個人ブログを作ってみたい！

備忘録

なぜなら！　楽しそうなので！！
というわけで、やったことのメモ書き。画像は取ってないので文字だけ。
Windows10環境、Gitもろもろ設定済み、GitHubのアカウント取得済み、Cloudflare Pagesのアカウント取得済み。

めっちゃ参考にしたサイト

色んなサイトを渡り歩いたけど、特に参考にしたのは以下です。
HUGOとGitHub(Actions/Pages)で爆速ブログ作成
Hugo + GitHub Pages / Actionsでブログを公開する
hugo mainroadを改造する
WordPress から Hugo への乗り換え
localhost起動したhugo serverにLAN内の他端末からアクセスする

Cloudflare Pagesに関連するところは主に以下のページを読みつつ進めました。
Cloudflare Pagesの利点および導入手順
HugoブログをGitHub PagesからCloudflare Pagesに移行した
Cloudflare PagesとHugoでブログ作った

先人の知恵、ありがとうございます…！

あとは英語が全くできないんですけど、それなら翻訳すればええやろがい！　っつーわけでDeepL翻訳で片っ端から訳しつつ何となく雰囲気をつかんでいきます。文明の利器最高。

1. Hugoインストールする

基本的にはQuick Start 見つつ作業。

  1. hugo-extended版をダウンロード、zip解凍して任意の場所に配置。今回はCドライブ配下にhugoフォルダを作ってみた。
    C:\hugo\binへ、解凍してできる3ファイル（exe、LICENSE、README.md）を放り込む。
  2. 配置した場所（C:\hugo\bin）まで環境変数Path通す。
  3. コマンドプロンプト起動して、hugo versionと打って、Hugoのバージョンを確認してみる。
    バージョンが表示されればPathが通ってるってことでOK。（今回はv0.99.1だった）

2. Hugoサイトの新規作成をする

hugo new site フォルダ名と打って実行。今回は「hugo-blog」としてみた。
念のためエクスプローラから確認したら、themesフォルダとかができてることがわかる。OK。

3. 使いたいテンプレートを準備

この辺から徐々に怪しくなってくるけど勢いでどうにかしましょう。
Hugo Themes をじっくり見て、使いたいテンプレートを決める。 今回は字書きの個人ブログだからそうそう画像なんか使わんしとにかく軽くシンプルにしたいなーということで「Mainroad」というテンプレートを使わせていただきます。
調べたらカスタマイズ記事がちょこちょこ見つかるのも助かる。

hugo-blogフォルダへcdコマンドで移動してから、テンプレートを手元に持ってくる。（やり方はREADMEに書いてくれてるはず）

git init
git submodule add https://github.com/vimux/mainroad.git themes/mainroad

hugo-blog/themes配下にわーっとファイルができてたらひとまずOK。

4. 設定ファイルを修正

DLしたテンプレートに入ってるサンプルフォルダからconfig.tomlファイルをhugo-blog配下にコピペ、エディタで開いて使うところだけ残しつつ設定をゴリゴリ書き換え。
この辺りもREADMEに書いてくれてるはずなのでそれを見ながら。
今回、デフォルトからフォントを変更したりもしてます。（Kosugi Maruを使いました）
Google FontからttfファイルをDLしてstaticフォルダにぶち込んでカスタムCSSで呼び出すという無理やりっぷり。ちゃんとしたやり方はあるんですけどうまくいかなくって…とりあえずコレで動いたからヨシッ！

5.作成したページが表示されるかローカルで確認

hugo serverと打つとわーっと動き出して、localhost:1313で作ったページが確認できるようになる。
見た目変なとこないか、ここでよーく確認しておく。
config.tomlとか修正しつつ見え方確認するけど、いちいち一回サーバ止めて保存してまた起動して…なんてことは必要なく、上書き保存したら勝手に最新の状態で表示してくれるのだ。優秀。
テスト記事とかの見え方を確認する場合は、Front Matter部分のdraft = false（もしくはそもそもdraft設定を消しとく）しとかないと自動的に反映されないので注意。

手持ちのスマホからも確認したい場合は、起動の仕方をちょっと変える必要がある。（同一LAN内にいる必要がある。カフェとかの無料LANではダメなはず）
まず、コマンドプロンプトとかでipconfigと打ってIPv4アドレスを確認。「192.168.X.Y」みたいな感じのはず。
サーバ起動するときにオプションをつける。

hugo server --bind 192.168.X.Y --baseURL http://192.168.X.Y

無事起動したら、PCからもスマホからも「http://192.168.X.Y:1313」でページが確認できる。
お借りしたテンプレートがしっかりレスポンシブ対応デザインなので、スマホからの見え方もいい感じー。次！！

6. 作ったやつをリポジトリへpush

ここが一番お辛い（そもそもGitよくわからん）。とりあえず動いたからできたということで…。

git remote add origin ～ #ローカルのリポジトリと新規作成したリモートリポジトリを紐づけ
git remote -v #ちゃんと紐づいたか確認
git add * #ファイル追加（とりあえずフォルダ内全部管理させる）
git commit -m 'XXXXX' #コミット
git push origin master

GitHubの方見たらちゃんと更新されてたからOKなはず。
今回はCloudflare Pagesを使って公開するので、GitHub側はPrivateを選択して大丈夫。

7.Cloudflare Pagesの設定

  1. Cloudflare PagesとGitHubのリポジトリを連携させる。
    基本的には画面に書いてあるとおり素直にやれば終わるけど、今回はブログ用のリポジトリだけ連携したいので、「Only select repositories」を選んでブログ用のデータが入ってるリポジトリだけ選択しました。
  2. Cloudflareに戻ってきたらセットアップ開始。
    ここで入力したプロジェクト名がURLの一部になる。（独自ドメインは使うつもりがないので）
    プロジェクト名に使えるのは「アルファベットの小文字 (a-z)、数字 (0-9)、ダッシュ」だけだそうです。
  3. ビルド設定をする。
    フレームワークプリセットは「Hugo」（ビルドコマンド、ビルド出力ディレクトリは自動入力されるのでそのまま）
    環境変数は必ず設定。じゃないと古いバージョンのHugoでデプロイされてしまうらしいので。
    変数を追加するボタンを押下して、変数名に「HUGO_VERSION」、値は最初に確認した「0.99.1」と入力しておきます。

ではデプロイ開始！
やったー！　無事成功！！
これでもう自動デプロイが機能しているので、あとは記事を書いてGitHubへぶち込んでいけばいいわけですね。

とりあえずうまくいったのでよかったよかった。
割と力業でどうにかしてるところが多いのは反省点ですが正しいやり方がわからない…。
何より、一番の課題はちゃんと更新することですね。忘れない程度にやっていこうと思います。