Wechlog
Portfolio

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

【目次】 -概要 -動機 -学び -おわりに

概要

※※当記事は過去に作成した記事の引用(※一部修正)になります。※※

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

Wechlog

Nuxt.jsでプロジェクトを作成。
UIコンポーネントはVuetifyに少しだけVuesaxを使いました。(併用できました。)
記事はContentfulにマークダウン記述で作成。
APIで取得してHTML変換して表示しています。
デプロイ先はNetlifyです。

完成品

PCトップ画面

PC完成①

PC記事画面

PC画面②

スマホトップ画面

スマホ画面①

スマホ記事画面

スマホ画面②

動機

最近WordPressでよく記事を書いていますが、
気付けば個人的な備忘録的日記と化してしまいました。
少しは役に立てそうな情報に絞って発信するブログを別で作りたいと思い作りました。

学び

ブログ作成を通じて沢山のことを学ぶことができました。

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

おわりに

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

また、作る過程は僕の日記的ブログに書いてますので省きました。
気になる方はぜひ覗いてみてください。

個人ブログ

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

  • masaru