Nuxt Contentでブログ作ってみた。（その1）

4/2/2021

# Vue # Nuxt # Vuetify

このブログはVue.jsのアプリケーションフレームワークであるNuxtを利用しています。
さらに、そのNuxtが公開している@nuxt/contentというモジュールが便利で、
これにより、Nuxtでブログが作りやすくなりました。

何回かに分けて、Nuxtでブログサイトを作る流れをまとめてみたいと思います！
とりあえず今回はプロジェクト作成〜起動確認まで🙋‍♂️

Nuxtプロジェクトの作成

まずは、npx create-nuxt-app [PJT名]でプロジェクトを作成します。
必要に応じてプロジェクト作成用のディレクトリを作成してください。

## 必要に応じてディレクトリ作成
$ mkdir projects
## プロジェクトを作成するディレクトリへ移動
$ cd projects
## Nuxtプロジェクトを作成
$ npx create-nuxt-app nuxt-content-blog

以下が表示された場合はyes(y)を選択してインストールしてください。

Need to install the following packages:
  create-nuxt-app
Ok to proceed? (y)

バージョンによって対話形式の内容が変わりますが、以下の一番下のところで、 Nuxt/Contentを選択するとContentを利用できます！

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-content-blog
? Project name: nuxt-content-blog
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules:
 ◉ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
❯◉ Content - Git-based headless CMS ←ここ

その他の設定内容としては以下のような感じです！お好みで調整してください👍

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-content-blog
? Project name: nuxt-content-blog
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client, Content - Git-based headless CMS
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username?
? Version control system: Git
⠴ Installing packages with npm

起動確認

nuxt-content-blogのディレクトリが作成されていることを確認し、
プロジェクト直下へ移動します。

$ ll
total 0
drwxr-xr-x  23 hoge  hoge  736  5  3 01:52 nuxt-content-blog
$ cd nuxt-content-blog

プロジェクト直下には必要なファイルが生成されています。

MacBook:nuxt-content-blog hoge$ ll
total 2488
-rw-r--r--    1 hoge  hoge      355  5  3 01:51 README.md
drwxr-xr-x    4 hoge  hoge      128  5  3 01:51 assets
drwxr-xr-x    5 hoge  hoge      160  5  3 01:51 components
drwxr-xr-x    3 hoge  hoge       96  5  3 01:51 content
drwxr-xr-x    5 hoge  hoge      160  5  3 01:51 layouts
drwxr-xr-x    3 hoge  hoge       96  5  3 01:51 middleware
drwxr-xr-x  948 hoge  hoge    30336  5  3 01:52 node_modules
-rw-r--r--    1 hoge  hoge     2017  5  3 01:53 nuxt.config.js
-rw-r--r--    1 hoge  hoge  1256537  5  3 01:52 package-lock.json
-rw-r--r--    1 hoge  hoge      891  5  3 01:52 package.json
drwxr-xr-x    5 hoge  hoge      160  5  3 01:51 pages
drwxr-xr-x    3 hoge  hoge       96  5  3 01:51 plugins
drwxr-xr-x    6 hoge  hoge      192  5  3 01:51 static
drwxr-xr-x    3 hoge  hoge       96  5  3 01:51 store
-rw-r--r--    1 hoge  hoge      627  5  3 01:51 tsconfig.json

プロジェクト直下でnpm run devを実行することで、アプリケーションをローカル起動することができます！
ターミナル上に以下が表示されたらhttp://localhost:3000にアクセスします。

ℹ Waiting for file changes
ℹ Memory usage: 397 MB (RSS: 539 MB)
ℹ Listening on: http://localhost:3000/
No issues found.

以下、デフォルトの画面がブラウザに表示されれば、一旦プロジェクトの作成は完了です！

次回

次回はnuxt/contentの利用編ということで、
マークダウンファイルを作って画面表示するところまでを記事にしたいと思います👍

次の記事はこちら👉