hinode icon

Nuxt.jsとmicroCMSでJamstackブログを作りました

calendar icon 2021.11.01 公開 update icon 2022.10.31 更新

ブログを作りました

NuxtJSとmicroCMSを使用してNetlifyにデプロイしている、Jamstack構成でブログを作りました。

WEBのフロントエンド技術やデザインについて学習した内容、たまに趣味のことなどを書いていけたら良いなと思っています。


使用技術

主な使用技術は以下のものです

  • NuxtJS(2.15.7)
  • tailwindcss(2.2.16)
  • microCMS
  • Netlify


今回Nuxt 2を使用して作成しましたが、Nuxt 3のbeta版が出たばかりだったりtailwindも近々ver3が出そうなので、学習も兼ねてそちらに移行していけたら良いなと思っています。

その他には、コードのシンタックスハイライトにhighlight.jscheerioを使用したり、nuxt-microcms-module を利用したりしていますが、この辺りはかなりmicroCMSブログに助けられています。

まだコード自体にかなり修正する部分があるので、少しまとまってきたら記事にまとめていきたいなと思っています。


感想

最初にJamstackというアーキテクチャを知ったのが『プロフェッショナルWebプログラミング Vue.js』という本の中で紹介されているものでした。そこからCodeGridmicroCMSブログの記事などで少しづつ勉強していきました。WEBサイトを作成して公開すること自体が初めてだったので、他の技術との比較みたいなことがあまりできないのですが、今はNuxt.jsとmicroCMSを使用したJamstack開発は楽しいなと感じています。


課題

大きなところでは、Nuxtのバージョン上げをどうするか、microCMSのAPIキーが新しくなったので修正したいなどです。

細かなコードのリファクタリング(コンポーネントの分割したり...)も勉強も兼ねて少しづつやっていきたいです。

あとは文章書くのが極端に苦手なのでこれを機に上達したら良いなと思っています。


まずは記事が何もないのでゆるゆると書いていけたら良いです。

今回のピクトグラム
hinode icon

日の出

日の出はいいですね、なんだが一日が終わる気がしてそのまま眠りたくなります。

素材提供: 日本デザインセンター/EXPERIENCE JAPAN PICTOGRAMS

personal rogo

koyama shigehito

桑沢デザイン研究所でデザインを学び、本作りの仕事をしています。現在、Web領域のデザインに興味を持ちUIデザインやフロントエンド開発について学習中です。猫2匹と0歳児の親として日々奮闘しています。