技術ブログの作り方 - 技術選定編
2023/11/04
要件定義編・デザイン設計編に続いて技術選定編です。
ある程度の要件が決まってしまえばデザインより先に出来るものなので、特に順番とかは関係ないです。
技術選定については特に知見とかは無いのでサラッとやっていきます
TL;DR
- Static Site Generator
- Next.js
- CSS
- Tailwind CSS
- CMS
- Hosting
- GitHub Pages
- CI/CD
- GitHub Actions
- Libraries
- date-fns
- html-react-parser
- react-syntax-highlighter
Static Site Generator
今回は所謂Jamstackな構成なので、静的サイトジェネレーター的なものが必要になります。
私がReactマンで結構Next.js好きなのと、このサイトを作ろうと思った頃にちょうどNext 13のApp routerが出てきていたので、触ってみようかなという気持ちで安易にNext.jsを採用しました。
本当はGatsbyとかAstroでもよかったかもしれない。
CSS
今回Tailwindを採用しました。
手軽にzero runtimeできるのと、今回デザインデータをちゃんと作ってから実装したのでちゃんとtheme設定できるものを使いたかったのでこれに決めました。nextが正式サポートしたしね。
ちなみに私はTailwindには一家言ある面倒くさいエンジニアなのですが、それはまた別の記事にしたいと思います。
CMS
記事の管理は別にリポジトリ内でそのままmarkdownファイルを管理してもよかったのですが、今回なんとなくNewtというサービスを使ってみました。正直無料で使えれば何でもよかったので特に採用理由はありません。
日本の会社が運営している比較的新しいサービスの様です。
詳細は是非公式サイトを見に行ってみてほしいのですが、個人運用であればFreeプランで十分すぎるほどです。
有料の上位プランになると権限回りをカスタマイズできたり、コンテンツのバージョン管理なんかもできるみたいですね。
使ってみた感想としては、ドキュメントもそれなりにしっかりしているし、公式に提供されているAPI clientもまあ普通に使える感じです。
ただ、この辺は割とmicroCMSとかに近い気がするのでそちらのツライポイントなどはこちらでもあるかもしれません。(プロダクトでがっつり使ったことないのでよく分かってない)
個人的には管理画面のUIがシンプルで見やすいので印象は悪くないですね。
webhookがGitHub Actions向けだと repository_dispatchしかなくworkflow_dispatchには対応していなさそうなのが少し気になりました。
まだまだ新しいサービスなので今後の動向に注目です。
Hosting
このサイトは特に商用利用の予定もないのでGitHub Pagesでホスティングしています。
広告をつけるか少し迷ったのですが、技術ブログと広告の相性がよろしくないのと、個人的に広告のついてるブログは印象が悪いので辞めました。
また、割と最近(のハズ)GitHub Pagesの仕様だったりその周辺でいろいろ変化があったようなので試してみたかった気持ちもあり採用しました。
この辺はまた別途記事にしたいと思います。
CI/CD
言わずもがなGitHub Actionsです。
GitHub Pagesを使っているので他を使う理由も特にないですし。
あと前述の変化がこの辺にもあって、いつの間にかGitHub Pagesへのdeploy用のactionが公式に提供されていました。(1年以上前らしい)
以下の2つを使っています。
Libraries
その他使用しているライブラリを主要なものだけピックアップして紹介します。
date-fns
記事の公開日時のフォーマットなどに使っています。
日付系ライブラリは現状こいつが安定だと思っているんですが、どうなんでしょうか。
教えてエロい人！
html-react-parser
Newtはmarkdownで書いた本文がHTML文字列になって返ってくるので、こいつでReactコンポーネント化しています。
調べてみた感じだとReactのHTMLパーサーはこいつが安定っぽかったです。
react-syntax-highlighter
記事本文でコードブロックが出てくる所に使っています。
これは実装編とかで詳しく書きますね。
まとめ
更新頻度とかビジネス要件にもよりますが、結構なパターンのサイトはJamstack的な構成で十分な気がしますね。
お安いですし。
