ブログサイト作った

今年からアニメの感想を文章にしてデータベースに残すという日課を始めたことがきっかけで、それ以外のことも書けるブログサイトが欲しくなった。

単にブログを始めるだけなら「はてなブログ」や「note」など人気のプラットフォームを使うのが一番手っ取り早いが、やっぱり自分好みのページを自由自在に作れる個人サイトには底知れないロマンがあるので、ウェブ制作初心者ながらに作ってみることにした。

ブログサイトを作るには記事や画像を管理するためのCMSが必要だが、これを自分が普段慣れ親しんで使っている Notion のデータベース上で行うことができる「astro-notion-blog」なるものを発見した。

HTMLもCSSもほとんど触ったことのないド素人だったので、「ブログの枠組みは既に備えていて、それをカスタマイズしたいという目的のもと、意欲的にプログラミングスキルを学べる」という開発者さんのコンセプトに魅力を感じ、これを採用した。

Notion にある多くのブロックをそのまま利用できるので、デスクトップからでもモバイルアプリからでも視覚的・直感的に記事を編集できるのがすごく良い。デプロイフックを実行するだけで、編集した内容をどこからでもサイトに反映することができる。

また、その名の通り Astro という静的サイトジェネレーターを使っており、サイトにアクセスするときは事前に生成済みのページをそのまま読み込むだけなので、ページの表示が非常に高速である点も嬉しいポイント。

Cloudflare Pages を利用することで、ドメインの更新費用（約1,300円/年）以外の出費をゼロにすることができた。ありがとうCloudflare。

めっちゃ弄ったので主な変更点を紹介。参考までにカスタマイズ前のサンプルページもご覧頂きたい。

ここ1か月くらい、暇さえあれば VSCode を開いては HTML と睨めっこしていたので、流石にそれなりの知識は身についてきた気がする。でも JavaScript は相変わらずよく分かっていない。調べた通りにやったらなんか成功したって感じでずっとやっている。

下スクロールで非表示になる固定ヘッダーを設置
- 合わせてサイトのシンボルであるロゴを作った。
サイドバーを削除
- 正直あんまり使わないしレスポンシブ対応が面倒くさいので不要派。シンプルなデザインが好きってのもある。
ダークモードに対応
- CSSでいちいち色指定するの面倒だったけどその価値は大いにあった。
記事一覧をグリッドレイアウトに変更、ページネーションのデザインを変更、上部にタグ一覧を設置
- タグ一覧は横スクロール式にして場所を取らないようにした。
各見出しにボーダーと “#”, “##”, “###” アイコンを追加
記事ページ下部にシェアボタンを設置
フォントを変更
- 現状では Google Fonts をCDNで読み込んでいる。
- 半角英数字などには Noto Sans、日本語には Noto Sans JP、ソースコードには Noto Sans Mono を使用。
デフォルトOGP画像・ファビコンを設定
- ファビコンは Safari のアイコン形式にも対応させた。