Netlify CMSを使って記事を書いてみるテスト

teslur （深堀哲史 / TETSUSHI Fukabori）
技術
Page content

このブログはマークダウン形式で記載したファイルをGitHubにPushすることで記事を投稿しているんだけど、毎回Pushする…というかgit操作をするのが大変面倒。
なのでヘッドレスCMSというやつを使って認証機能と投稿画面を作ってみた。

この投稿が上手くいくかはよくわからない…。

ヘッドレスCMSとは

詳しく知らない。
このサイト曰く

「ヘッドレスCMS」は新しいタイプのCMSです。従来型のCMSはコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレスCMSはヘッド（表示面）がなく、APIによってコンテンツを配信するのが特徴です。

だそう。
CMSは「Contents Management System」で良いとして、「ヘッドレス」はというと、e-words曰く

ソフトウェアのヘッドレス
ソフトウェアについてヘッドレスという場合は、通常は用意されている表示・操作画面が存在しないか切り離されており、別の方法で操作・使用できるようになっていることを指す。

ということで表示と操作が切り離されているもの、ということらしい。
ブログで言うとブログページと投稿ページが切り離されていて、ヘッドレスCMSは投稿部分のみ切り出されてるってことなのね。
へー。

やったこと

基本こちらで紹介されていることをやっただけ。

  1. GitHub OAuthアプリを作る
  2. 空のNetlify Siteを作る
  3. Hugoリポジトリにstatic/adminディレクトリを作って設定ファイル類を放り込む
    • このとき設定ファイルは上記サイトそのままじゃなくて多少カスタマイズすることで自分のブログに合わせられる。
      Netlify CMSのドキュメントのWidgetのページとConfiguration Optionsのページ参考にすればいじるのは特に難しくない
  4. デプロイする
  5. CMSから投稿する（今やっている）

結構大掛かりだなーと思うのが最初の2つ。
アプリ作ったりSite作ったりするの、うーん手間…という感じ。

ミスったこと、困ったこと（困っていること）

  • 深堀のブログは2リポジトリ構成（HugoリポジトリのmainブランチにPushするとGitHub ActionsでGitHub Pagesリポジトリにビルド結果がPushされてデプロイされる構成）になっているので、設定ファルのrepoはteslur/Hugoブログのリポジトリにする必要がある。
    間違えてteslur/GitHub Pagesリポジトリにしたことで変なファイルをPushしてしまった。
  • Markdown widgetの日本語入力がバグってて入力できない。キーアップの度に行頭にカーソルが移動するし、Enterで文字変換を確定すると入力した文字が消える。
    日本人が作ってもよくありがちな変換というプロセスがあるIMEを考慮できてないJavaScriptが原因っぽい。
    Text widgetに変更したら日本語が打てるけど、Markdownのプレビューとか「太字ボタン」とか「リンクを挿入」的な機能が使えない。
    これだとCMSを使ってる魅力が激減するなぁ。

対処

別のヘッドレスCMSを試す。
Contentfulならマークダウンエディタがちゃんと使えてそうな記事がちらほらある。

締め

色々試すのは楽しい。
でもこんなに文章を書いてたら疲れてブログを書かなくなっちゃいそうだから程々にせんといかん。

2023/01/15 23:51追記

HugoのMarkdownに癖があって引用内だったり箇条書き内の改行も文末に半角スペース2個が必要だった。
うまく言っていなかった箇所を修正。

Markdownもエンジン依存が色々あって難しい。
各種ソフトウェアでの正規表現の扱いみたい。