ブログの事はブログ内に記述されていた方が分かりやすくて良い。 ということで、忘れないうちにここにメモしておく。
ブログのポストはcontentfulで管理し、astroでAPIからのコンテンツ取得及びビルド、cloudflare pagesにデプロイする形式とした。
ビルドとデプロイはcloudflare pagesの github連携による自動デプロイではなく、github actions経由で行うことにした。
コンテンツをmarkdownで管理しても良いのだが、画像の管理が面倒なのと、モバイル経由での投稿がしたかったので、headless CMSを使用することにした。(後々調べたらgithubアプリがあるのでmarkdown形式でもモバイル経由の投稿できたかも)
rich textの取り扱い以外は比較的分かりやすく適当にやっても割と問題ない。rich textは初め理解できなかったが公式ブログ見ながら手を動かしてなんとか理解。render optionでレンダリングルールを定め、react componentsに変換して取り扱えば問題ない。
コンテンツモデルを複数作れるのでブログ以外にレシピや読んだ本の感想用のコンテンツモデルを作り、専用ページに出力できれば良いなと思っている
webhookは公式ブログに記述されている通りに設定したが中身よよくわからず。決まり事なので深追いせず
軽くて使いやすいと聞いたので採用。reactもhtmlも実戦は初だがめちゃくちゃ分かりやすて使い勝手が良い。とりあえずtutorial やっとけば初心者でも使える。
tailwindというかそもそもCSS自体がよく分からないので、どうゆう順番で適用されるのか?希望のレイアウトを作るにはどのような設定にするのかは触って試してみないと検討がつかずレイアウト作成に時間がかかった。
pureなCSSよりは早く出来たはずなので結果オーライ。適度に制限のあるものの方が初心者には使いやすい。
GitHub連携でのデプロイはやりやすかったがactionsからのデプロイが少し分かりにくかった。actions側の設定は公式ページ見れば分かるんだけどcloudflareの dashboardが見にくくて分からない。settingからできると書いてあるproductionどなるbranchの設定ページが見つからず結局デフォルトのmain branch使ってる。
中身がどのように機能してるかはよくわかっていないもののツギハギで機能するワークフローは作れた。初めてgithub actionsを使用したのでactions内でのsecretの取り扱いなどつまづくところはあったもののnpm run build時にsecretを変数に渡すことにより.envを上げずに解決できた。
secretの取り扱いはprintするとlogに残るからやめろって口酸っぱく書いてあってけどいつprintするのかがいまいち分からない。