Astroでブログを作ってる


はじめに

タイトルの通り、ブログ作成に挑戦している。

モチベーション

最近、プライベートな時間は技術を学ぶ時間に使うよう意識している。 それをアウトプットし、共有する場所が必要だと感じた。

とは言ってみたものの正直なところ、そんなかっこいい理由がメインではなく周りにいるメンバーがTypeScriptを触る案件に参画していていいなーと思っていた。 ふとそろそろポートフォリオ的にブログを作りたいと思い、少し調べていたら流行りのAstroにたどり着いた。 土日にできる何かも求めていたので、既存のテーマは利用せず試しにブログを作ってみた。

紹介

色合い

流行っていそうなグラデーションと紫色を採用してみた。 特に、ヘッダー部分のページタイトルをグラデーションで変化する虹色にしてみた。 気に入ってるけど、もしこれが下品だと思ったら、こっそり教えてほしい。

カテゴリー分けをして技術的なブログを個別ページに切り出した

このブログは技術的なことよりは普通に日常のできごとを書くためのブログとして作成したが、せっかくなら技術的なことも書けたら嬉しいと思った。 ただ自社のエンジニアブログは catnose99/team-blog-hub を利用している。 技術的に自社に興味を持った人に自分の日常が垂れ流されることは可哀想だと思ったので、日常のできごとと技術的なことを書くフィードを分けることにした。

Astroではコンテンツコレクションという組み込み機能で記事が管理されている。 複数のコンテンツを定義できるが、基本的にはすべてブログでありその中の技術ブログであるので判定のためのフラグを生やしてみた。 categoriesにする方式も一度試してみたが、日常と技術以外にカテゴリが分かれる未来は今のところないためやめた。 スキーマの定義は src/content/config.ts で行う。

https://github.com/abnoumaru/abnoumaru.com/blob/983498d6c5589df014a858551c459033b545a139/src/content/config.ts#L14 https://github.com/abnoumaru/abnoumaru.com/blob/983498d6c5589df014a858551c459033b545a139/src/pages/tech/index.astro#L11

コメント機能

💎giscusに助けてもらった。 Githubを利用していない人からのコメントはどうもらったほうがいいだろうか? Google Form等検討しているが、興味ありそうな人に意見をもらってみる。

改善点

例えば、SpeakerDeckや各種コミュニティサービスのフィードを集約するページがあればもっと便利になる。 また、トップページに最新の投稿を表示する機能を追加してもいい。 そして、Lighthouseと向かい合う余地もある。 ブログとしてはだいたい満足したので後回しにするが、これはこうしたほうがいいのでは?という意見があれば直接関わりがある人は直接、giscus経由でもコメントいただければ嬉しい。

わかったこと

見た目や記事の文章が気になってcommitしまくってしまう。