【Astro】自分的に理想系のブログサイトが完成した
去年からちょくちょく改修していた当サイトですがある程度納得できる仕上がりとなったので一旦まとめます。 ブログにはどんな要素が必要なのか、また静的サイトジェネレータを使ったブログ運用についてざっくり述べていきたいと思います。
【追記】Astro2.0対応＆カスタマイズしました
この記事はAstro 1.x- 時の内容となります。Astro 2.x以降に対応したカスタマイズについては以下に投稿しておりますのでよろしければ見てください。
【Astro】またまたAstrojsで作ったサイトをカスタマイズした
以前、自分的に理想系のブログサイトが完成したと投稿しましたが、そのころから Astro もメジャーアップデートで2.0となり、また当サイトもバージョンアップに伴う対応や、機能追加を行いましたので紹介します。
はじめに
当サイトはStatic Site Generator(静的サイトジェネレータ)の中では比較的新しい Astro というアプリケーションフレームワークを使ってます。
Astro | Build faster websites
Pull content from anywhere and serve it fast with Astro's next-gen island architecture. Astro is the web framework that you'll enjoy using.
当サイトの元デザインについて
当サイトを作るにあたって一から自分で作ったのか？と聞かれるとそうではなく基本的なデザインについては、Astro Boilerplate という公式テーマを改変して作成しています。
Astro Boilerplate | Astro
A fully responsive template built with Astro, TypeScript and React styled with Tailwind CSS. The perfect boilerplate to build a blog or portfolio.
Githubでソースコードも公開されています。
ixartz/Astro-boilerplate
🚀 Astro boilerplate with responsive blog and portfolio template using TypeScript and React styled with Tailwind CSS ⚡️ Made with developer experience first: TypeScript + ESLint + Prettier + Husky +...
Astro Boilerplate を選んだ理由
Astro でサイトを立ち上げるに当たって最低限以下の機能を要件としていました。
- Markdown 形式でブログ記事を投稿できること
Markdown形式はこんな感じのやつです。
## 見出し
**太字** をこうやって表現したり、リストも以下のように作れる。
- リスト1
- リスト2
- リスト3Markdown形式で記事を書けると今後Astro以外で画期的なサービスが公開された場合に移行しやすくなりますし、何より記述が容易なので投稿のストレスが減ります。
- レスポンシブ(PC・スマホ) 対応
最近レスポンシブデザインは当たり前となりましたが、PC・スマホ各々の基本デザインが好みであるかは重要です。ナビゲーションバーがない、PCだと綺麗だったのにスマホだとコンテンツがギュッと縮んでる・・・みたいなこともあるので両方の見栄えを気にして選びました。
- モダンでフラット寄りのデザイン
WEB業界の人間ではないので正確なトレンドはわかりませんが、ミニマルでフラット寄りのサイトを多く見ていたのでそんな感じにしたいなぁと。
元々のテーマで採用されていた TailWind というcssフレームワークはなんとなく使ってもそれっぽい見た目に仕上がるので今回の要件と非常にマッチしました。
サイトを作る上で追加した機能
Astro Boilerplate を導入しただけでサイト構築が終わったのか？というとそうでもなく色んな機能を追加しました。下にまとめていきます。
目次機能
こんな機能ですね。全体的な見通しが良くなります。当サイトでは、記事内のh2タグ前に自動的に目次が差し込まれるようになっています。
タグ(カテゴリ分け) 機能
タグ機能を作って、タグ毎の専用ページへ誘導します。静的サイトは検索機能をつけるハードルが結構高いので、何かしらページ内のコンテンツを探すことのできる仕掛けが必要不可欠です。
SNSボタン 機能
SNSボタンはこんな感じで用意してみてみました。
- はてなブックマーク
- LINE
今のところこの5つに対応しています。アイコンにマウスをホバーさせると、馴染みあるコーポレートカラーで描画されるように設定しているのでパッと見のデザインはシンプルです。結構気に入っています。
テーマ切り替え機能
ライトテーマとダークテーマの切り替えを可能にしました。まだまだテーマ切り替えに対応したサイトって少ないので一足はやく対応しとこうって感じです。
New 表示
日付の横に New と表示させるだけの地味ーな機能です笑 なんとなく直感的に新着記事分かった方がいいかなってことで実装しています。
Cookie 同意ボタン
最近ネットサーフィンしてるとよく見るアレです。調べたところ必要ないという意見もあったのですが、簡単に実装できるので一先ず導入。もしかしたらそのうち無くすかもしれません。
静的サイトのお話
静的サイトはやっぱり速いよ
Astroフレームワークを用いて静的サイトを構築しているのですが、まずサイトパフォーマンスが高い！ PageSpeed Insights 使って計測してみると、
動的サイトに比べると圧倒的数値です！
静的サイトは維持費がほぼかからない
上記のような高パフォーマンスサイトにも関わらず、維持費が安すぎるんです。例えばWordpressなど使ってブログを始めようとすると、
- ドメイン登録費用 / 年
- レンタルサーバ初期費用 / 回
- レンタルサーバ費用 / 月
ここらへんが最低限必要になります。合算すると、ひと月あたり契約するレンタルサーバによって維持費は変わりますが、800～1000円/月 くらいはかかるでしょう。
当サイトだとこれが・・・
- ドメイン登録費用 / 年
以上です。ドメインに関しては、無料キャンペーンなどがあるのでそこらへんを活用すると初年度無料でサイトが運営できてしまいます。
レンタルサーバー費用が必要ない理由は静的サイトがサーバーレスで運用できるためですね。当サイトがサイトを公開するために使っているサービスについて簡単にまとめていますのでコチラもご確認ください。
Cloudflare Pages について
一般的にはあまり馴染みのない会社ですが、Cloudflare のサービスが便利だったので備忘録として記事にまとめときます。
やっぱり手間はかかる
静的サイトジェネレーターもいいことばかりではやっぱりないです。いくつかの難点があります。箇条書きで挙げてみると
- git や npm コマンドに対して最低限の知識が必要
- HTML, CSS や Javascript を多少は改変できる程度の知識が必要
- フォーム設置やメール配信などができない (Google Apps Script を利用することで回避可能)
- 参考文献が少ないので自分で頑張るしかない
今のところボタンポチッと押せばそれだけで使えるという代物ではないので、上記に抵抗がある人にはおすすめできません。
まとめ
色々とカスタマイズする箇所がありましたがようやく完成形に持っていけたかなと思います。静的サイトジェネレーターというと正直何がどこまでできるかよくわかっていなかったのですが、今回使ってみてすげぇ！と実感しています。
技術的にハードルが若干高いのですが、リターンもめちゃくちゃ大きいそんな技術かなと感じました。興味のある人はぜひやってみてください。
