📚
Nuxt.js+microCMS+Firebase Hosting+Github Actionsで JAMstack なサイトをつくる
Nuxt.js + microCMS + Firebase Hosting + Github Actions の組み合わせでサイトを作ってみたい！と思いつき、作った時の忘備録です。
環境と選定理由
- node v18.15.0
- npm 9.5.0
- Nuxt.js v2 / static spa
- v3使いたかったけど、前職での振り替えりも兼ねてv2にした。
- microCMS
- 記事追加などの管理画面が Contentful よりも使いやすいと思ったから。
- 日本語ドキュメントが豊富だから。
- Firebase Hosting
- 使ってみたかった。
- Github Actions
- Netlify は使ったことがあったから、今回は Github Actions を使ってみたかった。
作り方をまとめた記事
実装や設定などの手順は、以下に別記事としてまとめてみました。
microCMS連携とか、Firebase Hosting設定とか、一部分だけを参照したいときは単一記事として読める方がいいので。
そして上から順番に参照していけば、ひとつのサイトを作成することができるようになってます。
new! 2023/6/20
正しく、誰にとっても分かりやすいドキュメントを書けるようになりたい。。
今後
次はこんなこと作りたい、調べたい、と思っています。
- よくあるブログ機能の実装
- 記事ページ量産、日付等の情報表示、ページネーションの作成、無限スクロール
- MicroCMS, Firebase Hosting, Github Actions の料金の仕組み
- 継続使用した場合のコストが気になる。
- Github Actions と Netlify のセキュリティ
- ふわっとしてるけど。。
- Firebase のキーの隠蔽
-
microCMS プレビュー画面作成- new! microCMS のキーの隠蔽
- Github Actions の Actions に動作確認用ログを表示させる
- 開発用、公開用などのホスティング出し分け
- Basic認証をかける
おまけ：今回作ったもの・これから作りたいものの話
ブログまではいかないものの思ったことを残したいと思いつつも、Twitter とか Instagram だと広告とか人の目を気にしてしまうから、そういうものとは無縁な、静かな場所がほしかったので、今回はゆるいつぶやき日記サイトなるものをこの技術で作りました。
次、作りたいもの
- 画像をたくさんアップするような、フォトグラファー向けのサイト
- マークダウンで書けるブログ
- 技術の話とかはやっぱりマークダウンがいいなあと。scrapbox のマークダウン版がほしい。
- あと、ブロガーの人たちって膨大なテキスト量を頻繁に書いているよね？マークダウン便利なんじゃないかなあとおもう。（既にマークダウンで書いてるのかもだけど。）
Discussion