tsusu0409.com ver3.0 アップデート
公開日: 2025-07-26
こんにちは。Tsusuです。
Astroを使ってtsusu0409.comを新しいものにしたのでいろいろやったことを書いていきます。
経緯
これまでもtsusu0409.comくんは元気に稼働してくれていましたが、ぼちぼち新しい何かを取り入れてWebってもんをやりたくなってきました。
今回目を付けたのがAstroで、「Astroを使ってWebサイトを作る」というのを目的に据えて、今回の更新を始めるに至りました。
本来フレームワークってやつは手段であって目的ではないと思うのですが、「ま、僕の所属は情報学群じゃないですからね」というオキマリの言い訳のもと、Astroを用いたWebサイトを作ることにしました。
使用したフレームワーク
- Astro
- Tailwind CSS
更新内容
やりたかったこと
サイトを新しくするに当たってやりたいことの整理をしました。
- Astro触ってみたい
- バックエンドに触れてアクセスカウンターとか人気記事とか拾えるようにしたい
- デザインの改善
- フォントにこだわりを持ちたい
- 画像をもっと出して全体的に見栄えのいいサイトにしたい
- サイト内ブログのタグ検索機能
- サイト外ブログ(https://omoshirokaiwai.com など)も自分の記事分は載せたい
- ライトモード、ダークモード
いいねえ。以前までのtsusu0409.comにはなく、なんとなくブログサイトにあったら嬉しいものを書いてる感があります。
できたこと
〇 Astroでのサイト作成
このサイトはAstroで書かれています。なんとなくWebに強い友人がAstroと言っているのを昔聞いたこと、またsohosai.comがAstroで書かれていることからAstroを自分も触ってみたいと考えていました。
Astroというフレームワークを触ってみたかったので、先述のようにこれを手段ではなく目的として今回のサイト更新に至っています。
結果、めっちゃ楽でした。
/src/pagesに置けば特別自分でルーティングを書いたりせずともページにアクセスできるのはいいですね。
前回tsusu0409.comを更新した際にはReact + jsで書いていたのですが、あの時はApp.jsxでルーティングをコネコネする必要がありまあ面倒だった気がします。
総合して、今回自分のサイトにAstroを用いることでAstroの何たるかを学べた感があるので非常に良かったと思います。
〇 画像をもっと出して全体的に見栄えのいいサイトにしたい
今までのtsusu0409.comにはブログにサムネイルがありませんでした。
ブログ一覧などでも下のような味気のない一覧が表示されていました。
これは残念だからブログ一覧ではサムネイルの画像を表示することにしました。
これまでのブログにはサムネイルがありませんでした。
とはいえ、これまでも途中から各記事の冒頭に画像を置いてはいたので、これをサムネイルってことにして一覧などで表示したいなと考えました。
記事はマークダウンで管理しているのですが、それのフロントマター要素に新たにthumbを追加し、これをサムネイルとして取得しています。
ついでにthumbがnullのときはnoimage.jpgが表示されるようにしました。
〇 記事一覧を自動で取得できるようにした
このサイトにはいくつかのブログが上がっていますが、僕がブログを投稿しているのはこのサイトだけではありません。
複数のサイトにある、authorがTsusuの記事を自動取得して一覧表示できるようにしたいと考えました。
調べてRSSフィードなる便利なものがあるらしく、毎ビルド時にそれを読み込むことで各サイトの最新記事を取得できるとの情報でした。
AstroでRSSフィードを扱うにあたって、色々調べてみたところ以下の記事が見つかり、なんだか最終的な実装内容もかなり僕に近い気がしたのでこれを参考にしました。
AstroでRSSフィードから記事一覧を取得してCloudflare Pagesで表示してみる | Webフロントエンドの備忘録｜hasii
コードは相当拝借しました。
ここから、自サイト内の記事情報はリモートのRSSフィードを触るのではなくローカルから取得した方が便利だと感じたので、そういった機能を実装しています。
fetchAndProcessRSSに"local"が渡されたらローカルのsrc/blog/*.mdを調べてフロントマター要素を返すようにしました。
RSSと関係のない処理をおんなじ関数でやるのは邪道なのかもしれませんが、手っ取り早く実装できて自分にとって理解のしやすいやり方だと感じたので一旦それでOKってことで。
これから実装したいこと
〇 レスポンシブ対応
すみません、これをやる前にとりあえずで早くページを公開してしまいたかったんです。
1週間以内を目標にやれたらやります。期末期間なのでできるかわからんけど。
〇 バックエンド
何もやっていないですね。バックエンドについては完全初学なので、一旦座学をやらないとどうにもできないのですが、そんなことに時間を取られて公開が遅れるくらいならば一旦今できたもので出したかったんです。
〇 タグ検索機能
これはAstroチュートリアルの中であったので実力的にはもうできます。
が、一旦後回し。
〇 動的OGP作成
これやりたいっすね～～～。OGPとは各種SNSにWebサイトのリンクをシェアしたときに出てくるサムネイルみたいなものです。
これまでも一応作成はしているのですが、これをページごとに別のものにしたい。
ブログのサイトリンクをシェアしたら自動で記事のサムネイルとタイトルがいい感じのデザインにまとまってOGPになったら素敵ですよね。
これ、バックエンドの仕事と思って敬遠してたのですがフロントでもできるんですかね。できそうな気しますね。
毎ビルド時に記事のフロントマター要素から画像生成して、それを参照するようにすればいけるか？
今度調べてみます。
〇 Activityの詳細表示
未実装ですね。明確にさぼり。
hoverのアニメーションを仕込んでるくせに押せないっていう残念っぷり。
さっさと成果物を公開したい気持ちがサイトの完成ラインを引き下げました。
最悪ですね。でもしっかり重いテスト期間のせいでしばらくパソコンを触れそうになかったのでやむを得なさもあります。
ご勘弁。
次に作業するとすればこれですね。
おわりに
色々学べて、そしてサイトも前よりカッコよくなったと思うのでよかったです。
ブログを更新するモチベが上がるサイトを自分で作れています。
また、今回のサイト更新にあたってえ～あいコーデイングをほぼやらなかったのはかなり良かったんじゃないかなと思います。
少しづつ、でも着実に力がついていっていると思います。そうあって欲しいです。
さて、このtsusu0409.comでは、毎週僕という人間に起こったこと週報という形でじわじわと書いています。
よければみなさん読んでいってください。
では、またどこかでお会いしましょう。