このサイトの技術スタックについて
一応ポートフォリオなので、モダンで良さげな気になる技術を使ってみた。
はじめに
- 静的サイトにする
- ブログ機能をつける
- つまりJAM Stackな構成
バックエンド
Contentful
ブログ機能部分に使用。 ヘッドレスCMS。
良い点
- 設計が柔軟にできる
- マークダウン対応
- APIリファレンスがしっかりしてる
- 公式のnpmパッケージが使いやすい
悪い点
- コメント機能非対応
- 埋め込みするときに使うembedlyが微妙
- 個人ではいいが、会社でと考えると料金プランに適当なものがない（ユーザー増やしたいとか微妙な感じ）
フロントエンド
Nuxt.js
Vue.jsのフレームワーク。 Vue CLIが優秀なので影が薄くなっているが、SSRしたい時や静的ジェネレートしたいときに便利。 今回は静的ジェネレート機能が欲しかったので使用。
Vuetify
Vueコンポーネントライブラリ。 デザイナーさんがいないときはライブラリに乗っかっていこうと思う。
インフラ
Netlify
静的サイトホスティングサービス。 めちゃめちゃ使い勝手が良くて驚いた。 GithubとContentfulの両方に反応してビルドしてデプロイしてくれる。 正直インフラのことはよくわからないが、彼におまかせでなんとかなる。いい時代。
まとめ
かゆいところに手が届かなかったなという感じ。 特にコメント機能が無いのは痛い(Disqusは宗教上の理由により使いたくない)。 ヘッドレスCMSは自作する必要があるように感じた。 Strapiなどが良さそう。WordpressはNG。
Netlifyが便利なのは十分理解できたが、もうちょっとCIとか自分で書きたい気がする。 AWS S3に静的サイトを置く形にして、CircleCIでweb hook受けてテストやらビルドやらデプロイやらをしたい。
参考文献
Embedded content: https://qiita.com/isihigameKoudai/items/3e45ade7c438176a4cc9
Embedded content: https://blog.andoshin11.me/posts/nuxt-with-typescript