個人サイトを書き直した

この記事は旧ブログより移植したものです。現在、Next.js および Nuxt.js は使用していません。

個人サイトを書き直したので、使った技術などを書いておく。

（筆が遅すぎてだいぶ書くのが遅くなった）

Nuxt v3

最近(？) v3 系がリリースされました。

v2 系からだいぶ進化しており、サクサク動作するので開発体験は良いです。

ただ、まだ v2 系のみ対応の module も数多く存在するため、まだ発展途上感はあります。

Vuetify

Vue 用のマテリアルデザインフレームワーク。

超簡単にコンポーネントを使えるのでめちゃくちゃ楽できます。実際このサイトもあんまり CSS は書いてない。

たとえばポップアップもこれだけ↓ (サンプルより)

<template>
  <div class="text-center">
    <v-dialog
      v-model="dialog"
      width="auto"
    >
      <template v-slot:activator="{ props }">
        <v-btn
          color="primary"
          v-bind="props"
        >
          Open Dialog
        </v-btn>
      </template>

      <v-card>
        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

microCMS

記事を管理するための、API のみの CMS です。

最初は Markdown で書きたくて、@nuxt/content や Strapi を試しましたが、Strapi は重すぎて微妙、@nuxt/content は拡張性に欠けるように感じたため、結局 micrCMS にしました。

色々な企業でも採用されているだけあって、やはり使いやすいです。

ただ、Nuxt v3.5 と micrCMS の module の相性が悪く、Nuxt v3.4 で運用せざるをえない影響で、サイトマップの module が使えないのが残念です。 2023/06/14 修正されました。もう文句ないです。

Vercel

デプロイ先。何も設定する必要もなく、高速にデプロイできて良い。あの Next.js の開発元でもあるので、安心して使えます。

giscus

GitHub の Discussion を利用したコメントシステム。

なぜかローカルの開発サーバーではエラーが出るのが謎。