Nuxtでブログを構築しよう!!

私が Nuxt を知ったのは、2020 年 3 月に東京都、Vue+Nuxt.js で構築した「新型コロナウィルス感染症対策サイトを Netlify で公開」の記事をみたのが初めてでした。その後、Create a Blog with Nuxt Content を読んでこれなら Vue も知らない私でも作れるのではと想像したからです。

そこでシンプルなブログを作ってみようと思います。今回は、全体構想を書いていきます。

開発ポリシー

ブログは、自宅サーバにいれたいと思いますので、軽いもの、とにかくシンプルな構成にしたいと思います。また利用する技術は可能な限り最新のものを使っていきたいと思います。Nuxt Content 機能がシンプルで良さそうです。Markdown で記事を作成し、それを表示するシンプルな構成としました。

フレームワークは Nuxt2.14 + Composition API + Typescript で、可能な限り余計な物は入れないことを目標とします。Vuetify は魅力的ですが、これも利用しないで、最低期限の CSS を Vue ファイルに書きたいと思います。また多言語対応にも取り組みますが、定番の vue-i18n は入れないで、最低限の機能をスクリプトに書くことにします。

ブログの画面構成

画面構成は、ヘッダー、ボディ、フッターのみのシンプルな構成にします。当初、サイドメニューを付けてみましたが、ごちゃごちゃしそうなのでやめました。ヘッダには、プログを説明するリンク先、メニューと言語切ボタンを配置します。ボディ部分に記事の一覧や記事の内容を表示する構成としました。

開発と本番環境

本番環境は、先日再構築したコンテナサーバに配置したいと思います。開発環境は手元の MAC にいれたいと思います。開発環境は次回の記事に書きたいと思います。