サイトをリニューアルした記録
このサイトをべた書き HTML から Astro 使った SSR サイトに変えた時の記録
目的
- 今まで Markdown で書いてそれを HTML に変換してからアップロードしていたが、コンテンツ増えるにつれて管理が大変になってきた。
- またコンテンツの生成が不安定で、微妙にデザイン制御できないところが発生してので、これを改善するため。
- 記事書くコストが高く、書きたいことあっても後回しにしてしまうことを改善するため。
技術選定
変えるにあたって検討したのは以下
- Nodejs 製のフレームワーク
- Astro
- Next.js
- Nuxt
- Gatsby
- 自作の CMS 整備する
- 他言語のフレームワーク
- Hugo
結果
自作の CMS は必要なもの、完成デザインが自分の中でわかっていないので除外
今回のために新しい言語覚えるのも、時間がかかるため Hugo も除外
Nodejs のライブラリだと、基本的なシンプルな記事しか書かない、安定より新しさ重視で Astro にした
移行作業
移行作業として必要だったのは以下
- 既存デザイン適用
- Markdown から記事へのデザイン作成
- リンク移行
Astro のインストールは実施時点での公式のインストール方法で導入
記事の構成は examples/blogの構成を
デザイン移行は ChatGPT Plus で元の HTML から Astro ファイル、Global.css を生成 本来は Astro ファイルに入れるのがベストのようだが、いったん速度優先で移行。
Markdown からの変換も元のサイトの HTML をベースに Astro のレイアウトテンプレートを生成した。 この部分はもともとデザインに課題あったので、ChatGPT への指示でレイアウト生成した。
リンク移行は手動で実施、列挙している部分は Astro の機能で実装
修正後はデプロイ先の設定変更して、コミットマージして完成