Programming / Travel / Liquor

Nuxt + Prismicで構築した本ブログの技術構成について【ドメイン代以外完全無料】

Nuxt Prismic ブログ構築

今回はNuxt.jsとPrismic.ioで構築した本ブログの技術的な構成について紹介したいと思います。

構成図

まず、いきなりですが以下の画像がこのブログのアーキテクチャー構成図になります。

ブログ構成図

ブログ構築に使用している技術は以下です。

  • Nuxt.js(フロント開発)
  • Vuetify(フロント開発:UIフレームワーク)
  • Prismic(ヘッドレスCMS:記事コンテンツ管理)
  • Netlify(ホスティング)

フロントエンド開発にはVue.jsのフレームワークであるNuxt.jsとUIフレームワークであるVuetifyを使用しています。

ブログ記事についてはヘッドレスCMSのPrismicを使用して記事作成および、記事・画像管理をしています。

フロント側ソースをGitHubにPushしたタイミングで、Netlifyが変更を検知してビルドを行いNuxt generate静的ページを生成しています。またこの時にPrismicからAPIで記事コンテンツを取得しています。

生成した静的ページをNetlifyでホスティングして公開している、といった構成です。

Nuxtの強力な機能+Netlifyのおかげで、サーバーレス・DB無しのシンプルな構成を実現しています。

フロント開発

Nuxt.js

ブログのフロントエンド開発には今回Nuxt.jsを選択しました。

もともとVue単体では使用したことがありましたが今回は下記の理由からNuxtを利用しています。

 ※ ちなみに、Vueで構築したサービス→ QT Visualizer | 技術記事のランキング

VueによるSPAブログも考えたのですが、SEOの観点からSPAはちょっと。。。ということでSSRか静的に公開するかということで、とりあえずそのどちらも使えるNuxtを選択し、結果的に上記の通り、静的に公開しています。

Vuetify

VuetifyはUIフレームワークです。

Nuxt(Vue)で使えるUIフレームワークだとBootstrap-vueやBuefyなど色々ありますが、その中でもVuetifyはVueとの親和性が高くアップデートも頻繁でかなり良いライブラリなのでおススメです。

VuetifyのおかげでCSSをほとんど書く必要がなくなっており、元々フロントエンド開発専門でない私にとってはかなり重宝しています。

コンテンツ管理

Prismic.io

記事およびアセット(記事画像など)の作成・管理についてはヘッドレスCMSのPrismicを使用しています。ヘッドレスCMSで有名どころだとcontentfulがありますが、contentfulには無料枠5000レコード(記事+アセット)という制限があったのでPrismicを採用しました。

じゃあPrismicには無料枠に制限はないのか、ということになりますが、下記リンクにある通り無料枠で制限があるのはユーザ数(Prismicのリポジトリに対して1人)ぐらいで記事数や画像枚数の制限などはなく、ほぼ制限なしといえるのではないかと思います。

ユーザ数についてもブログであれば自分1人しか基本的には使わないので問題ないはず。

>> Prismic プラン

※ 100 GB /月の帯域使用制限はあります。これはまぁ当分問題ないだろうし、Netlifyでキャッシュもされるし問題はないかなと。

カスタムドメイン・SSL対応

Netlifyを使うとNetlifyドメインで公開することが出来るのですが、カスタムドメインも使用可能で、本ブログも別途取得したドメインで公開しています。

SSL化についても当然対応しており、Let's Encryptでカスタムドメインの場合含めて完全無料でSSL化可能です。

ここらへんについてはブログ構成というよりNetlifyのことですが。。。

Netlifyは無料枠でも十分運用できるので、かなりおススメです!

サイトパフォーマンス

本ブログは2019年11月時点でまだまだ構築中でかつ、そもそも記事も少ないため必然的に"重い"サイトではないです。

今時点のサイトパフォーマンス計測でそこまで有意なデータが得られるかは別として、ChromeのAuditsにかけてみました↓

Audits実行結果

ご覧のとおりかなり良い数値がでています。というのも当初からパフォーマンスについては意識しつつブログ構築していたので、このような数値になっています。

右端のPWAはまだ実装していませんが、今後対応する予定でいます。

費用について

このブログの維持費についてですが、現状はカスタムドメイン代以外かかっておりません!

このブログで使用しているもので料金が発生しうるものはPrismicとNetlifyですが、無料枠で収まっており、かつどちらとも無料枠がかなり大きいのでよほどのことがない限り今後も無料で維持出来ると思います。

WordPressだとどうしてもサーバー代がかかるので、この費用という面においてはまさっている部分かなと思います。

おわりに

ブログ全体の構成について書いてみました。

WordPressだけでなく、本ブログのようなJAMStack構成なブログ(サイト)がもっと増えてほしいです。

今度はヘッドレスCMSのPrismicにフォーカスした記事を書きたいと思います。

About
K

旅行とお酒、そしてプログラミングが大好きなエンジニアです。

バックエンド、言語としてはJava(Spring FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。

旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)

お酒はビール・ウイスキー・日本酒があればOK。

Portfolio

QT Visualizer

Portfolio Site

プライバシーポリシー

Frontend by Nuxt & Vuetify / Contents by Prismic.io

© 2019 K note.life