2歩戻ったら2.5歩進みたい

関東で働くweb developerのブログ

ブログをVue.jsでつくる(全体設計編)

前段

最近業務でVue.jsを触ることが多くなったので、このブログをVue.jsで作ってみようと思った。

仕様(再)検討

これまでのアーキテクチャ構想

  • Firebase + Webpack + Vue,jを予定していた
    • FirebaseにはHostingと .mdファイルのStorageをさせて、Vue.jsからAPI叩いてページを表示させるつもりだった
    • しかしFirebase Storageには、指定のフォルダに存在するファイルの一覧を取得するAPIがないことがわかった
    • (厳密に言うとFirebase Functionで出来なくもないけど、それは正直めんどくさいしできるだけバックエンドでゴニョゴニョしたくない)
    • なの全体のアーキテクチャ見直しをする

改めてアーキテクチャを考える

  • Webpack + Vue.jsは変わらないので、問題はホスティング.mdを持たせるストレージ
    • (まぁもっと全体的なことを言うのであればブログとしての管理画面とか挑戦しても良いんやけど、第1段階としてそこまで手広げたくない)
ホスティング
  • NetlifyかFirebase
  • 現状この2択の違いがよく分からん
  • Netlifyが直接Githubホスティングできるっぽいからこっちのが良さそう
ストレージ
  1. 直接リポジトリに埋め込む→Netlifyでホスティングまで全部できる。ただし直接マークダウンを触ってリポジトリにコミットする必要がある。
  2. ButterCMSみたいなCMSサービス→これならCMS側でコンテンツの管理をしてアプリケーション側はそれを叩きに行くだけでいいのでいちいちgitをわちゃわちゃしなくても良い。あと多分GAとかその辺りのめんどいのを割と簡単にやってくれるっぽい。良さそう。

改めて全体の構成

  • Netlify (デプロイ)
  • Webpack + Vuejs (アプリケーション)
  • ButterCSM (記事の管理)
  • Bulma (CSSフレームワーク。余裕があれば)
  • これでいきたい。この構成はVueの公式ドキュメントに例が載ってたから間違ってはなさそう。
  • 遅くても11月中には完成させたい。

タスクリスト

  • [ ] ButterCMSでサンプル記事を作ってみる(複数)
  • [ ] アプリでButterCSM用のconfigをゴニョゴニョしてAPI叩けるようにする
  • [ ] ルーティング作る( index, post)
  • [ ] ページの中身作る
  • [ ] Netlifyでホスティングするために何するか調べる