サイト作る時に困ったこと
CMS の Ghost を使って、WEBサイトを作ったわけなんですけども、ちょっと困ったことをメモしようかなと
インフラ的なこと
CMSのGhostを使ってWEBサイトを作ったわけなんですけども、少し困ったことをメモしておこうかなと。
インフラとは
説明しよう！
インフラとは、システムやアプリが安定して動くために必要な「土台」や「基盤」のことだ。
ネットワークやサーバー、データベースといった仕組みが含まれていて、いわば「ITの道路や水道、電気」のようなもの。これがないとアプリやウェブサービスは動かない、まさに縁の下の力持ちなのだ！
特に詰まったことはなかったけど、盲点だったのはNginxのファイル転送時の上限。 テンプレートを自前で作成したときにアップロードしようとしたらエラーが発生。 Nginxの設定に client_max_body_size 50M; という設定がないと、意外と小さなファイルでも弾かれてしまう。
Ghostの設定
Ghost とは
説明しよう！
Ghostとは、シンプルかつスタイリッシュなブログやメディアサイトを簡単に作れるオープンソースのCMS（コンテンツ管理システム）なのだ！
WordPressよりもシンプルで、書くことに集中できる洗練されたエディターが魅力。サクサク動く高速性や、SEOに強いのも人気の理由だ。
技術系ブログからメディアサイトまで、表現力豊かなウェブ発信を支える頼れる存在、それがGhostなのだ！
Ghostの設定に config.production.json というファイルがあるんだけど、ここのurl設定をhttpsから始まるようにしていなかったため、サーバーとの通信でエラーが発生。 サイトの機能に会員登録などもあるんだけど、ボタンを押しても反応なし。 おそらく、httpからhttpsへのリダイレクト設定の影響で、サーバーはhttpで通信しようとしてるのにブラウザはhttpsで通信してるという微妙なすれ違いが発生して、「httpで話したいのに、httpsなんですけど？」といった、まるで妹のような微妙なニュアンスを含んだエラーを返された。
Ghostのテーマ
Ghost のテーマとは
説明しよう！
Ghostのテーマとは、Ghostで作ったブログやメディアサイトのデザインやレイアウトを自由に変えられるテンプレートのことだ！
テーマを変えるだけで、サイトの雰囲気や見やすさを自分好みにカスタマイズ可能。デザイン性の高いテーマが豊富にあり、CSSやHTMLを使ってさらに自由にアレンジできるのも特徴だ。
まさにサイトの「服」のような存在で、あなたのコンテンツを美しく魅力的に見せる強力な味方、それがGhostのテーマなのだ！
Ghostのテーマ作成は少し難儀した。 Ghostにはやっぱり独自仕様がある（そりゃそうだ）けど、ドキュメントがそこまで充実しているわけじゃないので、デバッグログを仕込みながら試行錯誤した。
やりたかったことはナビゲーションのメニュー項目で親子関係を持たせて、ドロップダウンメニューを作るという内容。 これはフロントエンドのDOM操作というもので、HTMLのパーツをJavaScriptで移動させたり制御したりする感じなのだけど、思ったよりも難儀した。
僕はバックエンドを得意としているから、プログラムで解決できないことはないと思っているけど、やっぱりJavaScriptでHTMLを制御するのは手間取った。 それでもなんとかやりたいことは実現できました。
デバッグログとは
説明しよう！
デバッグログとは、プログラムやシステムが「どこで」「何が」「なぜ起きたのか」を詳しく記録した履歴のことだ！
エラーや不具合の原因を探るために使われ、まさにバグ退治の頼れる武器。
開発者はこれをチェックして、問題の発生源を素早く見つけ、解決できるのだ！
いわば「システムの健康診断書」、それがデバッグログなのだ！
DOM？HTML？JavaScript？
説明しよう！
- HTMLとは、ウェブページの骨組みを作るマークアップ言語。ページの構造を決める「設計図」だ！
- JavaScriptは、ページに動きを与えるプログラミング言語。ボタンを押したら反応したり、動きを加えたりといった「魔法」を起こせるのだ！
- DOM（Document Object Model）とは、HTMLの内容をJavaScriptが自由自在に操るための「橋渡し役」。まさにページを動的に変化させるための重要な仕組みだ！
この3つが揃って、快適で動きのあるウェブサイトが実現するのだ！
本ブログのアイキャッチ画像を生成してもらっていて面白かったこと
だいぶ、ChatGPTの画像生成の精度が良くなってきた。ジブリ風でなかなかいい感じの画像が生成できるようになってきたというを聞いていた。
また、画像に文字を入れ込む精度もだいぶ上がったという事は聞いていたが、これがなかなか面白い。
単純にブログ記事に合う画像を生成してもらうとだけしたときに生成できたのが以下の画像
