個人サイトを作りました
Blog
個人サイトを作ってみました。
Zennで書かない技術関連以外の記事をこちらに投稿しようと思います。
最初の記事として、当サイトの技術スタックについて書いてみます。
技術スタック
フロントエンド
- Next.js 14
- TypeScript
- Tailwind CSS
ここは説明するほどじゃないので省略
コンテンツ管理
-
Markdown
- ブログ記事はすべてMarkdown形式で管理
- Gitで記事をバージョン管理
-
zenn-markdown-html
- MarkdownをHTMLに変換するパーサー
- Zennと同じ記法が使えるので便利
-
zenn-content-css
- Zennのスタイルを適用
- コードブロックのシンタックスハイライトも含まれる
開発環境
- Docker
- 開発環境の統一のために導入
デプロイ
-
GitHub Pages
- 完全無料でホスティング
- カスタムドメインにも対応可能
-
GitHub Actions
- mainブランチへのプッシュで自動デプロイ
- ビルド、テスト、デプロイまで自動化
なぜこの構成にしたか
Next.js を選んだ理由
使い慣れているというのが一番ですが、GitHub Pagesで無料ホスティングしたかったので、output: 'export' で静的サイトとして出力できるのが理由の一つです。
また、将来的に機能を拡張したくなった場合SSRに簡単に移行できる柔軟性もあります。
Zenn のツールを使った理由
Zennが公開しているzenn-markdown-htmlとzenn-content-cssを使うことで、簡単にリッチなMarkdown記法とスタイルを導入できました。
Zennは普段から利用しているのでこれらのライブラリが使ってみたかったというのもあります。
おわりに
これで技術記事以外の内容も自由に書けるようになりました。
カンファレンス参加記録とか残したかったので活用できそう。