Nuxt.jsで新しくブログを作成した
はじめに
はじめまして、yuta（@yutaiwasawa1212）と言います。
日々のことや自分の考えや学んだことをアウトプットできる場所を作りたかったので、ブログを作成しました。
またブログを続けやすくするためにも、作成するにあたって以下のことを心がけました。
- 運用・更新のしやすさ
- メンテナンスのしやすさ
- 費用を抑える
それを踏まえて、最初は以前使ったこともあった、HUGOなどの静的サイトジェネレーターで作成しようと思ったのですが、自分の技術向上のためにも今回はNuxt.jsを使ってブログを作成することにしました。
（WordPressに関しては、運用するのは自分だけなのでオーバスペックかなと思い見送りました。）
使った技術・サービス
Nuxt.js
Nuxt.js
Webアプリケーションフレームワークです。
SEOやOGP対応するためにSPAではなくSSRで開発しています。
netlify
netlify
ブログをインターネットに表示するホスティングサービスです。
ビルド&デプロイを行います。
contentful
contentful
ビューを持たないヘッドレスCMSです。
ブログ記事を管理しています。
GitHub
GitHub
バージョン管理システムです。
ソースを管理しています。
開発・記事作成の流れ
開発の流れ
- 機能追加やデザイン修正、バグ修正など、ローカルで開発する。
- 開発完了後、githubへpushする。
- pushがトリガーとなり、自動的にnetlifyでビルド&デプロイされて公開される。
記事作成の流れ
- contentfulで記事を作成する。
- publishボタンを押して公開される。
開発も記事作成も2ステップで公開できるのでシンプルで簡単です。
費用について
上限はありますが、基本全てのサービスは無料で利用でき、現状かかっている費用はドメイン代のみになっています。（SSLも無料です。）
もし何かしらの有料プランに引っかかるとすれば、contentfulの上限5000レコードのところかなと思います。
計算方法は「1記事 = 1レコード」として換算されます。また画像もレコードの対象になり、「1画像 = 1レコード」となります。例えば1記事で5枚の画像が使われていたら「1記事 + 5画像 = 6レコード」になります。
なので単純計算すると
5000/6 = 833.333...
つまり833記事までなら無料でいけます。
なので、続けていけばいずれかは達するのですが、しばらくは無料で続けられます。
もちろんできる節約はしたいので、アイキャッチ以外の画像はGoogle フォトを画像サーバとして、そこから参照して表示させるようにしました。
さいごに
ブログ作成にあたって、いくつかつまづいたところがあったのですが、それと同時に新しい知識や考え方を吸収できる喜びも久々に感じられたので、Nuxt.jsでブログを作成して良かったです。
また作成するにあたって、心がけたことに関しては達成できたので、今後は作成したことに満足せず、定期的にアウトプットしていけるマインドを維持していきたいと思います。