Nuxt.js+Vuetify+Contentfulでブログを作ってみた。

概要

ブログサイトを作ってみました。

chobilog

Nuxt.jsでプロジェクトを作成。
UIコンポーネントはVuetifyとほんとにちょっとだけVuesaxを使いました。(併用できるのかの実験を兼ねて。結果できました。)
記事はContentfulにマークダウン記述で作成。
APIで取得してHTML変換して表示しています。
デプロイ先はNetlifyです。

完成品

PCトップ画面

 

 

 

 

 

 

 

 

 

PC記事画面

スマホトップ画面

スマホ記事画面

動機

最近WordPressにハマってよくブログを書いているのですが、
あまりにも自分のためだけの備忘録的日記と化してしまっていました。笑
少しは誰かの役に立てるような情報を僕なりに発信するブログを別で作りたいなと思って作りました。

学び

ブログ作成を通じて沢山のことを学ぶことができました。
– Vue.jsの基礎(データバインディングも初めて実装&理解)
– Nuxt.jsの基礎(SSR)
– Markdown記法(markdownitの実装)
– Font Awesomeの実装
– Vuetifyの実装(VUesaxとの併用)
– 公式ドキュメント(英文でも逃げずに)を読む大切さ
– ブログデザイン(WordPressのテーマとかよくできているなと思いました。)
– ESLint便利だけどたまに邪魔になる(初心者だからですきっと。。。)
– CSS設計(楽で使いがちだったインライン記述をやめる。)
– Flexboxの利用

おわりに

引き続きこのブログサイトは記事書きながら、追加・微修正していく予定です。

次はLaravel+Vue.jsでポートフォリオを作りたいなと思います。
Vue.js最初は難しかったけど今とても楽しい◎

作る過程はブログ内で別の記事にしてまとめました。

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

コメントを残す