記事一覧へ戻る

nuxt/contentブログを設置しました

Kinya Fujimoto Kinya Fujimoto
2021年12月13日 この記事はおよそ1分で読めます

何を書くのか

基本的には、技術的なメモになる予定です。日々の業務の中で様々な課題が生じて対応するわけですが、どうしてもやったことを残す作業がおざなりになってしまいます。そうすると、時間をおいて同じ課題に対処するときに、あれ前どうやったっけという思い出すコストがかかることがけっこうあります。

まぁそのようなことを極力排除して効率アップできたら良いなということで、特に忘れガチな内容をここに残していこうと思います。 さっそくnuxt/contentに関するメモを残しておきます。

nuxt/contentのインストール

詳しいインストール方法はググれば記事が沢山出てくるのでここでは割愛します。

nuxt/contentの設定

基本的にnuxt.config.jsを編集する。

nuxt/contentの起動(開発モード)

開発モードで起動しておいて記事を作成すると、その場ですぐに結果を確認できる。(高速ホットリロード)http://localhost:3000等でアクセスする。

yarn dev

nuxt/contentのブログ記事の作成方法

プロジェクト直下のcontentフォルダの下に、ファイル名.mdでファイルを作成していく。ファイルの中身は、マークダウン記法で書くのが基本。 記事のカテゴリー分けなどのために、フォルダを作成しても良い。 画像ファイル等のメディアファイルは基本的に、staticフォルダの下に置く。なお、開発モードで起動しているときは、ブラウザ上で表示している記事をダブルクリックすると、その場で編集モードになって編集が行える。

nuxt/contentのデプロイ

下記のコマンドを実行するとdistフォルダ下に静的ファイルが作成されるので、distフォルダの中身を丸ごとサーバーにアップロードするだけ。

yarn generate

なお、distフォルダ下の静的ファイルの状態でサイト表示を確認したいときは、下記のコマンドを実行して、http://localhost:3000等でアクセスして確認できる。

yarn start

今後の予定

コンテンツ(contentフォルダ)も含めてGitHubで管理しているので、pushしたら自動でサーバーへデプロイしてくれるようなGitHub actionsを書きたいなぁと。

この記事をシェアする
nuxt/content Nuxt.js