【Nuxt.js】ブログ作成の記録①

はじめに

個人ブログをWordPressを使わずに作ってみたくなったので色々と調べながらやってみました。これは個人的備忘録です。

ブログ作成の目的としては、当ブログが自身の備忘録的な活用方法になっており、どこからどうみても第三者が見ると読みづらい記事が量産されているからです笑笑

参考サイト

仕様はなんとなく決めていたので参考になりそうなサイトを探す。

個人ブログサイトの参考

Nuxt.js + Bulma + Netlify + Contentful で技術ブログを再構築しました。

今回とても参考にしたい仕様。実際に運用されている!!

Nuxt.jsとContentfulでモダンなブログを構築してみた

インフラにAWSを使用してる。ちょっと難しそう。

実際、Contentfulなどに記事を保存しながら運用するか悩みどころではある。

Markdownの参考

調べてていろいろな手段があってこんがらがりました。苦笑

Nuxt.jsの場合

vue-markdown をやめて nuxtjs/markdownit を利用する

実際に

雑記 Nuxtでmarkdown-itを使用する

mdファイルではなくAPIベースでNuxtのルーティング機能フル活用推しでContentfulを採用している。

Nuxt.jsでMarkdownファイルからFAQページなどを作れるようしてみた(.mdファイル内でコンポーネントも使える)

これはあくまでmdファイルからの読み込みだがこんなのもある。

Vue.jsの場合

VuejsでMarkdownを使うときの最強な組み合わせ

とりあえずMarkdown-it使おう。※Nuxt.jsで使う場合はコマンド違うっぽい

Vue.jsでMarkdownを表示する

mdファイルを読み込み。HTMLにして表示させている。

JavaScirptの場合

Markdownを「Marked.js」を使ってHTMLに変換する方法

JSにMarkdown用のライブラリあるのね。

デザインの参考(Vuetify/font awesome)

Nuxtの場合

Nuxt.jsのプロジェクトにVuetify.jsを導入する方法

プロジェクトの作成にcreate-nuxt-appを使用する場合は、UIフレームワークのオプションでvuetifyを選択するだけで導入することができるとのこと。

【Nuxt.js】Nuxt.jsにFont Awesomeを導入する【nuxt-fontawesome】

nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する

Font Awesomeの導入に参考

Vue.jsの場合

【vue.js】Vuefityをマスターする(1)

Vue.jsで構築してるけどVuetifyの参考にはなりそう。

デプロイ先

徹底比較!Firebase vs Netlify (2018年版)

データベース使うならFirebase、データベース使わないならNetlify。

ここで疑問。ブログ記事を更新する場合はNetlify使えない??以下で解決。

【入門】Nuxt.js + Contentful + Netlify で始める、JAMstack な CMS 構築

この記事とても参考になる。しかも静的だけど記事更新したら自動で反映されるようにできるっぽい。でかい!!

仕様

以上の参考サイトを元に決めた仕様は以下。(習得したいからですが。。。)

フロント:Nuxt.js,Vuetify

ライブラリ:Markdown,Font Awesome

データ管理:Contentful

サーバー:Netlify

ちなみにここで浮かんだ挫折時の妥協案は以下

調べた感じContentful使うとなると動的ルーティングができるNuxt.js使うしか選択肢なさそう。

Vue.jsで作るとなると以下の感じ??

フロント:Vue.js,Vuetify

ライブラリ:Font Awesome

サーバー:Netlify

プロジェクト作成

Nuxt.js+Vuetifyの画面表示まで

プロジェクト作成

npx create-nuxt-app blog

# 以下の感じで選択
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in blog
? Project name blog
? Project description My ace Nuxt.js project
? Author name masaru
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Progressive Web App (PWA) Support
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

$cd blog

nuxtjs/markdownitのインストール

npm install @nuxtjs/markdownit --save

Font Awesomeのインストール(アイコンは公式照らし合わせながら必要なアイコンをインストールしてください。)

$ npm install nuxt-fontawesome --save
$ npm install @fortawesome/free-solid-svg-icons --save # アイコンのインストール free solid
$ npm install @fortawesome/free-brands-svg-icons --save # アイコンのインストール free brands (Twitterアイコンなど使える)

nuxt.config.jsにnuxtjs/markdownitのモジュール読み込みと設定を追加します。

これは上記のmarkdownit(ココ)とfont awesome(ココ)参考にします。

markdownitの利用方法も上記のサイト参照。

前述した$mdという変数を使って、Contentfulから取得したmarkdownのデータをhtmlにレンダリングします。

<div v-html="$md.render(post.fields.body)"></div>

post.fields.bodyがContentfulから取得したデータです。bodyがmarkdown形式の記事データになります。
renderファンクションの引数に、markdown形式のデータを渡すことでhtmlが返却されます。

開発モードで起動。(nuxt.config.jsは変更適用が再度起動したタイミングなので注意。)

npm run dev

localhost:3000にアクセスで表示。初めて見たけどカッコいい~◎

Contentful

Contentfulのインストール ココを参考にhttps://qiita.com/isihigameKoudai/items/3e45ade7c438176a4cc9

$ npm install contentful --save

その後、作成するファイルに関してはURL参照。

Contentfulでのデータ作成などもリンクを参考に実施。

所感

いろいろ参考になるサイトを漁ったりよくするのですが、最近ようやく公式ドキュメントやGitHubのREADME.mdを見ることの大切さ(効率性)を感じ始めました。

また、今まで教材のコピペで済ましていた例えばconfig.jsなど各ファイルがどのような役割を果たしているのかなども改めて理解していくことが必要だと思います。

上手くいろんなリファレンスを活用しながら学習を進めていきたいと思います。

その他参考サイト

https://ja.nuxtjs.org/guide/directory-structure/

ディレクトリ構成の理解は上記の公式ドキュメントが参考になる。

https://ja.nuxtjs.org/guide/plugins/

上記はプラグインに関して

そのNuxt、TypeScriptで。

Vue.jsと比較して便利なところもわかりやすくまとめてある◎

npmとyarnのコマンド早見表

※npxだとローカルパッケージの実行になるらしい。

 

コメントを残す