先日初めての技術ブログとしてこのサイトを立ち上げました。
開設にあたってどのようなツールを使うか、どこで公開するか、どのように投稿を管理していくか等、 技術選定も含めて考えたりもしたので、記録としてまとめたいと思います〜。
マークダウンで記事を書きたいよね
ソフトウェア開発のドキュメントとして当たり前に使われているマークダウン、一度手に馴染むととても便利ですよね。 エンジニアの皆さんなら日常的に使っているのではないでしょうか?
このブログ記事もマークダウンファイルとして管理するようにしています。 理由としてはざっくり次の3つでしょうか
- 執筆体験が高い(個人的には)
- 記事の可搬性が高い
- GitHubでの管理で十分
自身もエンジニアということもあり、折角なら自身のお気に入りのエディタで手に馴染んだマークダウンで記事を執筆したいなというのは最初に思っていました。 基本的にローカル上で執筆することになるので遅延もないですし、 エディタを拡張することで比較的痒いところまで手が届くのも嬉しいですよね。
また、マークダウンは可搬性が高いため、何かしらの理由でこのブログを移設することになった際にも 移行先の選択肢も広げやすく、移行自体の手間も比較的かからないといったメリットがあるのでは思っています。
加えてそもそもCMSのようなリッチなコンテンツ管理まではいらないというのも理由としてありました。 このブログは個人的なアウトプットを目的としており、特に収益化も目指していないので WordPressのようなCMSをわざわざ運用するのも手間かなと。 マークダウンはGitとの相性もよく、GitHub上で十分管理できるのではと思ってしまいました。
ということで、このブログ記事はマークダウンファイルとしてGitHub上で管理することとしました。 この方法を取る場合、アウトプット先はZennか、個人でホストしたサイトのどちらかになるかなと思います。 個人的にWeb周りの知見が乏しく、「このブログサイトの運用を通してWeb周りの知識や知見を吸収したい」 という思いもあったのでZennではなくセルフホストしたサイトで公開する形としました。
あとはZennに投稿する場合、比較的人の目に晒されやすく一定の炎上リスクを抱えることになるというのも懸念していて、 もう少し気軽にアウトプットしたいなぁという思いがあったのもちょっとだけ理由にあります。(ちろん良い側面があるのも重々理解していますが)
どの静的サイトジェネレータ使う? - Hugo vs Astro
マークダウンファイルの記事をセルフホストしたサイトで公開するためには 静的サイトジェネレータを利用するのが一般的かなと思います。
この記事の執筆時点(2025年3月)ではNext.js、Hugo、Astroの3つが技術ブログによく使われているように見受けられます。
Next.jsについてはできることが豊富なものの、SPAを必要としないブログサイトにはToo Muchな印象を受け、最初に候補から外してしまいました。 できることが豊富な分、学習コストも高いですしね。
となるとHugoとAstroを比較していくことになるわけですが、結論から書くとAstroを採用しています。
両者を比較した所感としてはざっくり次のような感じです。
Hugo
- 非常にシンプル
- マークダウンとGo Templateのみで作成することができるのでフロントエンドの知識は要らない
- 利用するテーマは
themes/にGitサブモジュールとして配置するだけ。Gitサブモジュールを更新するだけでテーマのアップデートが可能 - Hugoの設定ファイルである程度のカスタマイズはできるものの、設定ファイル範囲外の細かいカスタマイズはGitサブモジュールのコードを触る必要があり、かなりしんどそう、、、
Astro
- コンテンツ自体はマークダウンファイルとしてシンプルに管理可能
- カスタマイズする場合少なからずHTML、CSS、JSを触る必要があり。Hugoと比較すると若干学習コストが高め
- テンプレートは用意されているものの、テーマのアップデートの仕組みは用意されていない。利用テーマのGitリポジトリをアップストリームとして、チェリーピックなどで適宜変更を取り入れていくような運用が必要
- 「nodeのバージョン」、「Astroをはじめとしたnodeモジュールのバージョン」、「利用するテーマのバージョン」の3つのバージョンを管理する必要性が出てくる
- 基本的にはHTML、CSS、JS(TS)で作成されているためカスタマイズはしやすい
- ドキュメントが充実している。しっかりとしたチュートリアルも用意され、日本語への翻訳もかなり進んでいる
こうして見てみると運用していく上でのシンプルさではHugoが勝るものの、拡張性に関してはAstroに軍配が上がるように感じますね。 意外にもAstroの方が後発なものの利用できるテーマのバリエーションについてはそこまで差はありませんでした。
手堅くいくなら「Hugoを採用し、カスタマイズの必要性を感じたらAstroで作り直す」というのが間違いないのかなと思います。 しかし、Web周りの知識や知見を吸収したいという思いもあったので、 フロントエンドの仕組みや、考え方、エコシステムに触れるきっかけにもなるAstroにチャレンジしてみました。
一応両者の比較に当たってそれぞれの公式チュートリアルを一通り行いました。 特にAstroのチュートリアルについてはGitHubのリポジトリ作成からサイトのデプロイまで手厚くサポートしていて、かなりおすすめです。
想定よりも長くなってしまいそうなので、ここで一度区切ります。
次の投稿でAstroのテーマ選定や、デプロイ先の検討などといった続きをまとめたいと思います!