TOP

    ローカル環境のHugoの記事と画像の投稿をNetlify CMSで管理する

    Hugo によるサイトの静的生成について、記事の作成方法を変更した。

    2023年3月までの記事作成方法

    1. ローカル環境(WSL)に Hugo をインストール
    2. vim で記事を書く
    3. Github にプッシュ
    4. Github Action で静的に書き出して S3 にアップロード

    問題点

    • 記事の管理が面倒
    • 画像の反映が面倒

    DBや管理画面を持たない静的生成方式は高コスパだが、自分ですべてを管理しなければならない面倒が発生し、投稿する気がなくなってしまう。

    記事ファイルの生成や記事一覧の出力などスクリプトを組んで自動化したものもあるが、画像のアップロード機能を自前で用意することができなかった。2023年1月にこの仕組みにして以降、記事も書かずに悶悶としていたが、ふと「同じ悩みの人が沢山いるのでは」と思い検索してみる。すると、静的生成ツールは投稿の管理などを担うヘッドレス CMS と呼ばれるサービスと組み合わせて使うのが一般的であるようだった。なかでも Netlify は自前の Github リポジトリやローカル環境に対してヘッドレス CMS を提供している模様。とりあえず S3 にホストするところは変えずに、ローカル環境で Netlify CMS を使ってみることにする。

    変更点

    • 記事の作成と管理、画像のアップロードを Netlify CMS に任せる
    • Netlify CMS はローカル環境で使用するため、netlify-cms-proxy-server をインストール

    最初に下記の2記事を参照しました。どうもありがとうございます。

    参照元: Netlify Hosting を使わずに Netlify CMS を立てた話

    参照元: ローカルホストでGitHubの環境を汚さずにNetlify CMSをテストする

    Netlify CMS の設定は殆ど config.yml で行う。設定値については公式のドキュメントが用意されている。

    参照元: Netlify CMS

    2023-03-22 現在の config.yml

    # My config.yml
locale: ja
local_backend: true
backend:
  name: github
  repo: your_github_name/your_github_repository
  branch: main
media_folder: /static/images/
public_folder: /images/
collections:
  - label: "Blog"
    name: "blog"
    folder: "content"
    create: true
    slug: "{{fields.slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Date", name: "date", widget: "datetime", format: 'YYYY-MM-DDTHH:mm:ssZ', date_format: 'YYYY-MM-DD', time_format: false}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "text"}

    このサイトの記事のファイル名は10文字のハッシュ文字列にしている。Netlify CMS では記事生成時のファイル名を slug によってある程度カスタマイズできるが、config.yml で設定できるのは 日付と記事名のみとなっている。このため slug の設定は slug: "{{fields.slug}}" とし、fields に slug の入力欄を追加した。この入力欄に外部生成したハッシュ文字列を入力してファイル名とする。

    参照元: Netlify CMSで生成されるマークダウンのファイル名を変更する方法

    body の widget が text なのは、markdown にするとエディタが日本語 IME とすこぶる相性が悪く、入力した所謂全角文字が消滅したり、保存できなかったり、文中に制御文字が混入してしまうため。開発の issue を見ると4年前から報告されているようだが対応が進んでいないようなので text にしている。プレビュー画面の意味がほとんどなくなってしまうが、エディタで markdown を書くのと変わらないのでとりあえずこれでよい。

    感想

    記事の一覧、投稿の作成・編集・削除が UI 上からできるのは非常に楽。markdown エディタと IME の相性が悪かったが、フロントエンドの管理ツールが無償で使えるだけでも有り難い。

    Written by addshlab