Next.jsからAstroにブログを移行した記録です。
この記事でわかること:
- AstroとCloudflare Pagesの技術スタック選定理由
- LightHouseフルスコアを達成するための工夫
- リンクカードの自動生成機能の実装
- 多言語対応とダークモードの実装
Nextjs to Astro.build again
もともと運用していたブログ（既にクローズ済み）は、paveg/blogsite にソースコードが置かれており、astro.build を使って作成していました。
一方で更新頻度が著しく下がってしまいました。単純に書くことが面倒になっていたのが理由でした。
そのため、新しいブログを作成しました（矛盾しているような気もするが…）。 このブログは以下の技術スタックで構成されています。
また、基本的なブログの構造はシンプルさを保ちつつ必要な機能だけを付け足しています。
LightHouseはできるだけフルスコアに近い数値を取れるようにしています。
実装済みの
- ブログ記事の一覧表示
- ブログ記事の詳細表示
- 多言語対応（一応英語の記事も追加できるように）
- シンタックスハイライト
- カテゴリの表示
- 読了時間の表示
- RSS機能の実装
シンタックスハイライト
const name = 'Funai';
export const SampleComponent = () => { return <div>Hello! {name}</div>;};これには、 rehype-pretty-code というライブラリを利用して、スタイリングを行っています。
Rehype Pretty Coderehype-pretty-code.netlify.app
リンクカード
こちらは、リンクを貼ると自動でリンクカードを生成してくれる機能です。 ほぼ参考には以下のGitHubのリンクを参照させてもらいました。
GitHub - haxibami/h6i.org: haxibami's website.github.com
やっていることは、ブログのビルド実行時に各種ページを叩きに行って、OGP画像を生成しビルドパス（public配下）にavif画像を出力します。 キャッシュとしてその画像が存在していれば、その画像を参照します。
リスト
- abc
- def
- a
- b
- c
- d
- e
多言語対応
一応パスとして存在しています。 言語サブディレクトリを切ってそこに配置しています。
スタイリングはまだ中途半端です。
404 ページが見つかりません | フナイログwww.funailog.com
hreflangも同様に全部のページで実装済みです。 日本語のページを全体に表示するのは微妙なので、多くのケースではenページをx-defaultとして指定しています。
以下のページはまだ追加していないので、その内追加する予定です。
-
/en/about -
/en/privacy
ダークモード
ダークモードにも対応しています。画面のちらつきを抑えるための対応も行っています。
大したことはやっていないです。
今後の
ブログを立ち上げるに当たって最短経路で作成することを目指したため、まだまだ課題が残っています。
具体的には、以下のような課題があります。
- 画像の管理
- Google Analyticsなどのトラッキングツールの利用
- Cloudflare Analyticsも導入してみました
これらの課題については、今後のアップデートで対応していく予定です。
画像の
一旦、全ての画像の管理をImgixで行う予定でいます。
テーブル
| a | b | c |
|---|---|---|
| 1 | 2 | 3 |
まだテーブルのスタイリングについては一切考えていません
OGP画像
動的な生成を行うべきでAstroにはそういう機能も備わっているはずなので、今後の課題として考えています。
2024/03/29に対応済
まとめ
ブログって本当に必要？ – マーケティングのプロフェッショナル集団 – インパクトMwww.impactm.co.jp
上の記事にも書かれている通り、ブログを運用することは簡単なことではありません。
少なくとも、時間を投下し続けられるかは重要なポイントで、継続によってライティングスキルも獲得できます。また、当然自分が書いたものは記録に残るため、重要な資産にもなります。
もちろん黒歴史になる可能性も非常にある。
シンプルなブログを心がけつつ、誰かに自分が良いと思ったものを訴求して行けたらなと考えています。広告掲載はブログの趣旨に合わない可能性があるので、今のところは考えていませんが、何かしらの形で収益化できるようになれば良いなと。
それでは、今後ともよろしくお願いします。
関連記事
ブログのSEO改善に関する記事も公開しています。