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

概要

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

リンク

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最初は難しかったけど今とても楽しい◎