ブログ開設しました

ポートフォリオ内にブログを開設しました。
今までブログはWordPressで構築したものを運用していましたが、今回はSSGのみのポートフォリオ上にブログ機能を実装してみました。

技術スタック

• Next.js 16
• Markdown
• YAML
• AWS S3
• GitHub Actions

ブログを更新するに上で更新のしやすさと記事の書きやすさは重要であることは今まで様々なサイトでブログを更新して感じていたので、そこを重視します。

記事の内容はMarkdownで記述し、記事のメタ情報はYAMLで記述する形にしました。
記事の内容とメタ情報はGitHub Actionsでビルド時に取得して静的ファイルとして出力し、AWS S3にアップロードする形で運用します。

開発フロー

記事はNext内のディレクトリにMarkdownとして保存します。なのでまずはMarkdownファイルをReactコンポーネントに変換するユーティリティを作成しました。

通常のMD形式のリンクは[リンクテキスト](url)という形式で記述しますが、Next.jsを使っている以上内部リンクはLinkコンポーネントを使いたいので、相対パスであれば自動的にLinkコンポーネントに変換するようにしました。

さらに、技術記事を書く上で動作イメージを表示したくなることを想定し、md側からReactコンポーネントを差し替えを予約する独自記法も追加しました。

記事タイトルや説明、カテゴリーやタグは別でYamlファイルとして保存し、一覧ではMDファイルを読み込まずに必要な情報を表示できるようにします。

記事はデプロイのタイミングでGitHub Actionを介してAWSへSSGビルドされます。

独自記法

:::Component ExampleComponent:::
↓
<ExampleComponent />

[内部リンク](./internal-link)
↓
<Link href="./internal-link">内部リンク</Link>

強み

DBを使用しないので、サイトの改竄を主とした攻撃に強いです。GitHubとAWSに対して不正アクセスのみ気をつければ問題ありません。

mdファイルはGit管理されるので変更履歴の追跡が簡単です。
さらにGitHub上でmdの変更ができるので、スマホからでも執筆することができます。

課題

サーバレスの都合上、サイト内検索に弱いです。現状のページをSSGビルドするだけだと実現できないので、ビルド時にインデックス形のファイルも生成するなどして対応可能か考えていきたいです。

今後の展望

現状OGPの設定ができていないので、OGP画像の作成と自動生成機能を実装したいと考えています。