このブログのテーマをhugo-clarityに変更しました

公開日: 2023-09-12

[tech] #Amplify #Hugo #SSG

screenshot20230911

結局このブログのテーマを変更して対応しましたとさ。

経緯

前回の記事：Hugo本体のアプデに追従できないって話

私はweb周りに疎いのでhugoのテーマは他人産のを使いたい
でもHugo本体のアプデ方針がバカ前衛的でテーマのメンテナンスが大変で、メンテナンスされなくなったテーマがいっぱいある
私が使っていたテーマhugo-imperfect-slimもそうなってしまった
今後どうしよう？

あれこれ考えたり試したり(それこそレンサバ借りて久々にWordPress試したりもしてました)した結果、「まぁちょっとくらいがんばるかぁ……」という思いが出てきた。

が、いつまでやるかは分からんね……。

あれこれ試してる間にやったこと

WordPress編 2023年7月末~8月半ば

引き継ぎたい記事のURLリストを作る
- Google Analyticsから見てアクセス数が多いページをリストアップ
さくらのレンタルサーバーで安いプラン借りてWordPressを久しぶりに試す
- テーマはcocoon(10年くらい前学生の頃WPでブログ書いてた頃、同じ作者さんのsimplicity2を使ってた為)
WordPressへの移行を考えた時の気になる点を一通り試す
- ログインページの隠蔽やMFA(All in one securityプラグインを利用)
- パーマリンク変更に伴うリダイレクト検証(Redirectionというプラグインでお試し)
- CloudFront通せるかどうか確認(できるけど超簡単とはいかなそうだったので断念)
- 管理画面と公開画面で別ドメインにできないかあーだこーだ試す(結局諦め)
- 静的サイト化プラグインも調べましたが、どれもドキュメント不足あるいは積極的にメンテナンスされていないため断念
- ざっくりページデザイン作ってみる
残りはDNSと記事を移せばサイト移行ほぼ完了できるなーって所まではやった

WordPress久々に触って再実感したけど、やっぱ便利ではあるんだよなーレンタルサーバーで適当にサイト立てるくらいなのなら。

ただ何でもかんでもプラグインなせいで設定がだるいってのとPHPなせいでレンサバ以外だとデプロイと運用がまぁまぁ面倒。

アプデちゃんとし続けるってのも必要だし、しんどいかなとなって中止した。

結局書く気力があるタイミングじゃないと触らないから、放置されてる時間が長くなってしまい。それなら静的サイトのがまだ良いんじゃない？という感じ。

逆に言えば強制的に管理画面開く事になるんだから、記事書く頻度も上がるんじゃない？というのはある。

CDNの設定もっと超簡単だったり、公開ページと管理ページのドメイン簡単に変えられたりすれば良いんじゃが。(多分マルチサイト化すればいいんだろうけど…)

docker-composeで適当にどーんとできると楽だけど、テーマとかプラグインによっては結局なーっていう。(DBのバックアップだけではなく、ドキュメントルート配下のphpファイルとかも全部バックアップ取りたいから、そうなるとdocker使うことでの利点がphpfpmの導入楽ってくらい)

Hugo編 2023年8月末

元々使ってたテーマのフォークを探してなんとか最新版Hugoでビルドできるように
- サイトルート/layouts/partials/ を使って上書き
- しばらく大丈夫そうになったので精神的に少し落ち着く
上手いこと移行できそうでメンテナンスされてそうなテーマを探す。見つかった候補は以下
- Mainroad
  - トップページに過去記事がリストアップされなかった
  - mainSectionsの設定を変えればできそうなんだけど、よく分からず混乱しているうちにやる気を無くす
- Stack
  - Mainroadを諦めた数日後試した。割と良い感じだった
  - けど、aboutページなんかが上手く行かなかず結構時間かかって疲れる
  - 結局これはabout/_index.mdをabout/index.mdに変えたら直った
  - 疲れた後、右サイドバー上手く行かねーとなり諦め(stashは残してある)
- Hugo Clarity
  - stackを試した直後に見つけて色々試してたらなんとかなった(ほんとか？)
  - 結構積極的にメンテナンスされていそう
  - なにより中華フォントが設定されていないから日本語がキモく見えない
  - デフォで中華フォントが埋め込まれてるテーマだとcssなりを自分で上書きする必要があり、フロントエンド弱者にはしんどい

最終的にやったこと

サブモジュールとしてHugo Clarityを追加
config.tomlを削除
- いつの間にかconfig.tomlじゃなくてhugo.tomlがスタンダードになったっぽい
hugo.tomlを書く
- hugo server でチェックしながら設定をいじっていく
過去記事を content/posts から content/post に移動
- 他のテーマで上手く行かなかったビルドもこれやればなんとかなったかも？
- あるいはmainSectionsいじればよかった？(少し試したけど上手く行かず)
aboutページのファイル名を _index.mdからindex.mdに変更
layouts/partials にテーマ自身の layouts/partials/head.html をコピー
- Mastodonの自サイト判定がちゃんと行われるように、こんなのを最下部に追加
- <a hidden rel="me" href="https://mstdn.asterism.xyz/@aries">Mastodon</a>
i18n/ja.toml にテーマ自体の i18n/en.toml をコピー
- hugo.tomlではlanguageをjaにしたいけど、見た目まで英語にする気はなかったから
- サイト設定側のlanguage未設定なら良いんじゃない？→htmlのlangがenになっちゃう
assets/sass/_override.sass で色をいじる
assets/sass/_custom.sass でscroll-behaviorをautoにした
- デフォのsmoothだとなんか画面更新した時に勝手に妙なスクロールされる
- 理由良く分からず。chrome, vivaldiで確認(プラグイン無しでも起きた)
static/main/ に前とは違うアイコンを置いた
static/icons 以下にファビコンを配置変え
フロントマターでのlastmod(記事更新日)をサポートするようにテーマを修正
- これも layouts/partials/post-meta.html にテーマ自体のファイルをコピーしてきて上書きさせてる
- あると嬉しいなーって機能だったためPR送ってみたけど、ちょっと見た目がしんどい感じ
- 実験としてこんなのも作ってみたが、まー微妙かね
- https://mstdn.asterism.xyz/@aries/111047799743963059
今後の記事のURLをランダムにするため、archetypes/post.mdをいじった
- 後から編集することもあるしURLが日付なのもあんまりなぁと思った
- ただの日記なら良いだろうけど、技術的な内容が入ると更新することも偶にある
- だからといって毎度毎度URL考えるのは面倒だからmd5 hashを使うように変えた
- 過去記事はそのまま。そのままにするために過去記事全部のフロントマターを編集した(40ファイルくらい)
AWS Amplifyのビルドスクリプト(amplify.yml)を編集した
- アイコンやら画像類のパスがぶっ壊れたため

version: 1
frontend:
  phases:
    build:
      commands:
        - wget https://github.com/gohugoio/hugo/releases/download/v0.117.0/hugo_extended_0.117.0_Linux-64bit.tar.gz
        - tar -xf hugo_extended_0.117.0_Linux-64bit.tar.gz
        - mv hugo /usr/bin/hugo
        - rm -rf hugo_extended_0.117.0_Linux-64bit.tar.gz
        - echo $(hugo version)
        - if [ "${AWS_BRANCH}" = "master" ]; then export BASEURL="https://blog.asterism.xyz/"; fi
        - if [ "${AWS_BRANCH}" != "master" ]; then export BASEURL="https://pr-${AWS_PULL_REQUEST_ID}.${AWS_APP_ID}.amplifyapp.com"; fi
        - hugo -F -b ${BASEURL}
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []