HugoからAstroへ移行し、ヘッドレスCMSとしてStrapiを導入。

Author Image

Enzo

· 2024/05/11 · 7 min read
TopImage
INDEX

去年WordpressからHugoに移行した訳ですが、今度はAstroに移行しました。
Hugoは約1年くらいの付き合いとなりましたね。。

思ったよりも効率よくなかった

Wordpressが重くてすべてが億劫になっていたわけですが、Hugoに変えても結果そこまで手軽にならなかったです。
というのも、Hugoがというよりは私の管理方法がイマイチでした。

マークダウンファイルを作るところから(コマンド入力)始めていたのですが、毎回一瞬そこで止まっちゃいました。
「コマンドなんだっけ?」から始まり、自分のサイトの階層情報を忘れるなど(どの階層に記事入れるのか毎度確認)。

エディタでサクサク書けるのは良かったですが、そこに至るまでが億劫という本末転倒ぶり。

そこでやはり記事は管理画面で管理出来たほうが楽なんだなということを再認識して、ではどうするか?というところから考えました。

構成としてはJamstackでよくて、バックエンドとフロントエンドをどうするかという話ですね。

HugoはやめてAstroへ

Hugoのままでも良かったような気もしたのですが、新しいものを試したいという部分もありAstroに決めました。
Hugoと違ってテーマの部分などがメンテナンス性に欠けるかと思いましたが・・・今のところ問題なさそうです。

逆にHugoよりもスッと入ってくる感じがしています。

ただ、色々やろうとすると調べながらやることになるので時間は掛かりますね。
そこがおもしろいと思うので別にいいのですが。

remark-link-card
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
remark-link-card favicon Astro

ヘッドレスCMSはどれを選ぶか

最初はmicroCMSを考えていました。

remark-link-card
microCMS|APIベースの日本製ヘッドレスCMS
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
remark-link-card favicon microCMS|APIベースの日本製ヘッドレスCMS

こちらは別口で運用しているページでも使用していて、無料枠でも十分使えることが実績としてあります。
日本の企業ですし、多くのユーザがいる分情報も色々出てきます。

ただ、こちらも使ったことないものを選ぼうかなってことでStrapiを選択。

remark-link-card
Strapi - Open source Node.js Headless CMS 🚀
Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.
remark-link-card favicon Strapi - Open source Node.js Headless CMS 🚀

Strapiなにが一番のメリットかと言うと自分でのホスティングになるので好き勝手使えることでしょう。
その分煩わしいことも増えるし、調べることも多くなりますけども。

実際使ってみるとなかなか使い勝手いいように思えます。
これから色々出てきそうではありますが、最悪microCMSに逃げるということで。。

記事の移行については一つ一つ登録しました。
すでに賞味期限切れている記事に関しては移行対象とはせずに切り捨て。

それでもマークダウンファイルからの移行なので面倒といえば面倒・・・。

Strapi側のインポート・エクスポートもプラグイン使えば機能としては出来るっぽいけど、それを使う場合Hugoのマークダウンファイルを全部舐めてJSONに変換するようなものを作るしかないのかな・・とか思ったので断念。

【余談】ブログカードの実装

Hugoの時にリンクをrリンクカードで表示するように実装していたのだけどAstroでどうしようかと。
もともとの機能としてローカルファイルのマークダウンファイルで運用する場合であればRemarkを使用しているとのことでRemarkプラグインに「remark-link-card」等があるのでそちらでいいのかなと思います。

remark-link-card
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
remark-link-card favicon GitHub - gladevise/remark-link-card

今回Strapiのマークダウンを持ってきてMarkedでパースしているので違う形で実装しなければなりません。
どうしたものかと思いましたが、とても良いパッケージがありましたのでこちらを利用させていただきました。

remark-link-card
ブログにリンクカードを実装するときに便利なパッケージを作った
このブログにリンクカードを実装し、その時に使用した関数をnpmパッケージで公開したことは先日の記事で触れたが、この記事ではどんなものを作ったのかという詳細を書く。 ogp-fetcher 作ったパッケージとソースは以下。 概要としてはリンクカードに必要なOGP関連の情報を指定したURLからフェッチしてくるというもの。 便利機能としてmdファイルを渡しただけで必要な情報をフェッチしてき
remark-link-card favicon ブログにリンクカードを実装するときに便利なパッケージを作った

こちらを使用して帰ってきた情報からリンクカード作るようにして問題解決です。
まだ色々イレギュラー部分の対応とか手が回っていませんが・・・後々。

とりとめのないまとめ

まだまだ問題は残っているのですが、しばらくはこの状態で運用していこうと思います。
一応、今どうししたものかと思っている部分としてはStrapiの管理画面がスマホで使い物にならないって所だったりします。

スマホでの投稿なんてしないのでって言えばそこで終わりますが、対応出来るのであればしたい。
プラグインとかあるのかもしれない。

# Linux # Astro # Strapi