はじめまして。 Web技術を学ぶために、静的な個人ブログサイトを作りました。
これまでに TypeScript、React、Next.js、Tailwind CSS、shadcn など、いわゆるモダンで流行りの技術に触れたことはありました。実際、見た目が整ったものや、ひとまず動くものを作ること自体はできていました。
ただ、その一方で「自分はいま何をフレームワークに助けられていて、何がWebの基礎そのものなのか」をきちんと理解できているかというと、あまり自信がありませんでした。
特に、JavaScript、HTML、CSS の理解が浅いままだと、
- どこまでがモダンな技術の独自要素なのか
- その技術が何を楽にしてくれているのか
- そもそも何がうれしいのか
が、感覚としてつかみにくいと感じました。
そこで今回は、いったん基礎から学習しなおすつもりで、最初から大きな仕組みを入れすぎず、まずは自分で理解しながら作れる構成にしたいと考えました。そこで今回は、Vite + Vanilla JS を使って、できるだけシンプルに、でも実際の運用まで見据えたブログサイトを組み立てています。
この記事では、最初の投稿として
- なぜ静的サイトにしたのか
- どんな機能を実装したのか
- どんな技術構成にしたのか
- 作ってみて感じたこと
- 今後どんな形で作り直してみたいか
をまとめてみます。
なぜ静的サイトにしたのか
今回、まず大事にしたかったのは「自分で把握できる範囲で安全に作ること」でした。
Webアプリにはログイン、データベース、フォーム送信、API通信など、学ぶと面白そうな要素がたくさんあります。ただ、初心者の段階でそれらを一気に扱うと、仕組みを理解する前に複雑さだけが増えてしまいそうだと感じました。
そこで最初のブログは、サーバーサイドの処理を持たない静的サイトとして構築しました。静的サイトであれば、攻撃対象になりやすい要素をかなり減らせますし、配信もシンプルになります。もちろん静的サイトだから絶対安全というわけではありませんが、少なくとも最初の学習対象としてはとても扱いやすい選択だったと思っています。
また、HTML・CSS・JavaScript の基本を自分の手で触って理解したかったので、あえてフレームワークに頼りすぎず、Vanilla JS で組んでみました。
今回のサイトで実装したこと
見た目はシンプルなブログですが、中ではいくつかの機能を自作しています。
1. トップページ
トップページには、自己紹介用の About セクションと、最新記事を表示する Post セクションを用意しました。
Post セクションには新しい記事を最大3件表示するようにしていて、一覧ページへの導線も置いています。個人サイトらしく、SNS へのリンクもヘッダーやトップページからたどれるようにしています。
2. 記事一覧ページ
記事一覧ページでは、投稿済みの記事をまとめて確認できます。
実装としては、ビルド時に生成した記事データをもとに一覧を表示していて、タグによる絞り込みもできるようにしました。タグの切り替えはクライアントサイドの JavaScript で動かしていて、静的サイトのままでも少しインタラクティブな操作ができるようになっています。
3. 記事詳細ページ
各記事には個別ページを用意しています。
記事詳細ページでは、以下のような情報を表示しています。
- タイトル
- 投稿日
- タグ
- 本文
- 前後の記事への移動リンク
- X 共有リンク
単に Markdown を表示するだけでなく、ブログとして最低限使いやすい導線も意識しました。
4. Markdown から記事ページを生成
記事は Markdown で書けるようにしています。
各記事は content/posts/<slug>/index.md のような構成で管理し、ビルド時に
- トップページ
- 記事一覧ページ
- 各記事の詳細ページ
- 記事一覧用の JSON データ
をまとめて生成する仕組みにしています。
記事本文の変換には gray-matter、remark、rehype を使っていて、Markdown の frontmatter からタイトルや概要、タグ、投稿日などを扱えるようにしています。さらに、コードブロックには Shiki を使ってシンタックスハイライトも入れました。
5. 記事ごとの OGP 画像生成
各記事ページごとに、記事タイトルを使ったOGP画像を自動生成する仕組みを入れています。テンプレート画像にタイトル文字を合成して、SNS 共有時に記事ごとの見た目が変わるようにしました。
技術構成
今回の主な構成は次のようになっています。
| 項目 | 内容 |
|---|---|
| ビルドツール | Vite |
| フロントエンド | Vanilla JS |
| 記事管理 | Markdown |
| Markdown処理 | gray-matter / remark / rehype |
| コードハイライト | Shiki |
| OGP画像生成 | sharp |
| テスト | Vitest + jsdom |
| ホスティング | GitHub Pages |
フロントエンドはかなり素朴な構成ですが、そのぶん「何がどこで動いているのか」を追いやすいのがよかったです。
CSS も分割して管理していて、全体の土台、レイアウト、共通コンポーネント、記事一覧、記事詳細、本文表示というように役割ごとに整理しています。大きなライブラリに頼らず、少しずつ積み上げていく練習にもなりました。
公開フローと運用
今回、個人的にこだわったポイントのひとつが公開フローです。
ソースコード本体はプライベートリポジトリで管理し、実際に公開するビルド結果はパブリックリポジトリで管理するようにしました。GitHub Pages で公開したかったので、GitHub Actions を使って CI/CD も組んでいます。
流れとしては、プライベートリポジトリの main に push すると、
- 依存関係をインストール
- 記事ページや OGP 画像を生成
- サイト全体をビルド
- パブリックリポジトリへ成果物を同期
- GitHub Pages 側に公開
という形でデプロイされます。
「ソースは公開しすぎたくないけれど、成果物は公開したい」という形を自分で組んでみたかったので、ここはかなり勉強になりました。
テストも入れてみた
まだ学習中ではありますが、今回はテストもなるべく書くようにしてみました。
具体的には、
- Markdown の変換処理
- 記事一覧の描画
- 記事詳細ページの描画
- タグ絞り込み
- OGP 画像生成まわり
- 補助的なユーティリティ処理
などに対して、Vitest と jsdom を使ったテストを用意しています。
個人開発でここまでやる必要があるかは人それぞれだと思いますが、今回は「あとで安心して触れる状態を作ること」も学習の一部だと考えました。実際、ちょっとした修正でもテストがあると気持ちがかなり楽になります。
作ってみて感じたこと
今回いちばん大きかったのは、シンプルな技術だけでも、思っていたよりちゃんとブログらしいものが作れると実感できたことです。
最初は「Vanilla JS だけだとかなり大変なのでは」と思っていましたが、
- 自分で理解しながら進めやすい
- どこでHTMLを作っているかが見えやすい
- ビルド処理の流れを学びやすい
- 後から設計を見直しやすい
という点で、初心者の自分にはかなり合っていました。
一方で、作っていく中で「ここはもっとモダンな技術を使うと楽になりそう」と感じる場面もたくさんありました。テンプレート管理、コンポーネントの再利用、スタイル設計、記事周りの構成などは、今後さらに学んでいきたい部分です。
今後やってみたいこと
次のステップとしては、Astro や Tailwind CSS を使ってブログを再構築してみたいと思っています。
Astro はコンテンツサイトとの相性が良さそうですし、コンポーネントベースで整理しやすそうなので、今回自作した仕組みと比べながら学べそうだと感じています。Tailwind CSS についても、ユーティリティファーストな書き方を一度しっかり触ってみたいです。
今回のブログは、完成版というよりも「自分が次に進むための土台」だと思っています。
まずは Vite + Vanilla JS で、静的サイトの構成、Markdown からのページ生成、デプロイ、自動化、テストまで一通り体験できました。次はそこから一歩進んで、より保守しやすく、より表現しやすい構成に挑戦していきたいです。
おわりに
Web初心者の自分にとって、今回のブログ制作は「ページを作る」だけでなく、
- 構成を考える
- 安全性を意識する
- 公開方法を設計する
- 自動化する
- 継続しやすい形を考える
ところまで含めて、とても良い学習になりました。
まだまだ改善したいところはたくさんありますが、まずは自分の手でここまで形にできたことを素直にうれしく思っています。
これからこのブログでは、Web 技術の学習メモや制作記録、試したこと、つまずいたことなどを少しずつ残していく予定です。
もし同じように「まずはシンプルな静的サイトから始めてみたい」と考えている方がいたら、この記録が少しでも参考になればうれしいです。
