新サイトに移行しました

Last updated on
このブログではGoogle Adsenseを使ったアフェリエイト広告を導入しています

この度、当サイト「朝宮ジム記録保管庫」はJamstack方式の新サイトに移行しました。

なぜサイトを作り直したのか?

端的に言うと、前のサイトが不便だったからです。

前のサイトGoogleサイトというサービスを使って構築していたのですが、どうも操作性が悪くて更新しづらかったのです。

本来このサイトはpixivなどに投稿している絵を別途保管・公開するということを意図して作ったものでしたが、上記の問題から更新は停滞し(旧作の掲載すらもままならない状態だった)ほとんどストップしている状態でした。

一時期は「もう個人サイトの時代じゃないから閉鎖しよう」とも考えましたが、僕自身かつて他の方の女子ボクシング創作個人サイトの恩恵をこうむってきたことから個人サイトを大切にしたいという思いがあり、捨てるに捨てられない状態でした。

また、FC2やエキサイトブログなどの無料ブログサービスは無料という反面制約が大きく(いらない広告が入る、独自ドメインが使えない、いつサービスが終了するかわからない等)、自分でレンタルサーバーを借りてWordpressなどを設置するのは年間5000円以上はお金がかかるという難点があり、他のサービスへの移行もできていませんでした。

そんな中、Jamstackという方式ならばレンタルサーバー(PHPなどのバックエンド言語やデータベースを使ってWordpressなどのCMSを使った動的なサイトを稼働させることができるサーバー)ではなくホスティングサービス(静的なHTMLのビルドと公開に特化したサービス)とヘッドレスCMS(WordpressなどのCMSと違ってフロントエンドを実装しておらず、ブログ記事などのコンテンツの作成・管理に特化しているサービス)でサイトを稼働させることができるということがわかりました。

また、ホスティングサービスとヘッドレスCMSならばサイトの規模や更新頻度によっては無料で使用できるということもあり、これらを使って新しいサイトを作って移行することになりました。

コンテンツが全然ないんだけど?

流石に今まで旧サイトやpixiv等に投稿した絵をすべてアップするのには膨大な時間と手間がかかります。

そのため、当分はpixiv等に新規投稿する絵などを同時に投稿するということから始めようと思います。

また、本サイトでは女子ボクシング創作以外にも雑記や技術記事(当サイト構築手法などのプログラミング関係)も投稿していきたいと考えています。

旧サイトはどうするの?

旧サイトは当面の間残しておこうと思います。そのため、サイドバー(モバイルの場合ハンバーガーメニューで開くヘッダーのナビゲーションバー)にもリンクを残してあります。

なんとか時間を作って旧サイトやpixivに上げてきた過去絵なども投稿できればと思っていますが、それには時間がかかりそうです。

新しいサイトはどういう仕組みでできているの?

新サイトは上記したようにJamstackという仕組みでできています。

こちらの記事が詳しいのですが、要するに「サイトのHTMLを作る際にJavaScriptがAPIを叩いてヘッドレスCMSからコンテンツのデータを取ってきてHTMLに埋め込む」仕組みだといえます。

(僕はまだそれほど詳しくないためこの説明で合っているかはわかりません。上記の記事を読むか検索等で調べてみてください)

WordpressなどのCMSのようにユーザーがアクセスするたびにサーバー側でHTMLを組むのではなく、記事を投稿した際にあらかじめHTMLを組んでおくのでレスポンスやページ表示速度が速いという特徴があり、更新をそれほど頻繁に行わないサービス(週一回投稿されるブログなど)に向いているという特徴があります。

(逆に、Twitterなどの頻繁に投稿・更新が行われるサービスなどには向いていないと言われています)

今回サイトを作るのに使用したのはAstroという静的サイトジェネレーターで、こちらでサイトのフロントエンド(HTML等のユーザーが実際に見る部分)を構築しています。ヘッドレスCMSにはmicroCMSを使用しており、こちらで記事や添付画像を作成・アップロードしています。ホスティングサービスにはCloudflare pagesを使用しており、こちらにAstroで作ったサイトのソースコードをアップし、HTMLをビルドする際にmicroCMSから記事や添付画像のデータをAPIを使って組み込んでいくという感じです。

どのようなコードを使って組んだかについてはまた今度別の記事で解説しようと思っています。

もしこの投稿が「いいね!」と思ったら↓のWaveboxから拍手をください

wavebox logo