この度、くりすたのブログをリニューアルしました。リニューアルした経緯と使用している技術等に軽く触れられればと思います。

今までは、Go言語で作られた静的サイトジェネレータのHugoとStackというテーマを使用していました。

Stack | Hugo Themes

https://themes.gohugo.io/themes/hugo-theme-stack/

デザインもよく使いやすかったのですが、最近フロントエンドを学び始めた私にとってとある考えが生まれます。
「あれ、ブログもいっそ自作しちゃえばよくね? Hugoのテンプレート作るのめんどいしNuxtあたりでやっちゃえ」 ということで急遽Nuxt3を用いてブログをリニューアルすることになるのでした。

Nuxt3は、Vue.jsの機能に加えて

• 外部CMSで記事を管理、API経由でブログを構築
• nuxt/content
  プラグインでオフラインで管理・構築

前者は、Contentfulや、MicroCMSなどがあげられます。記事をオンライン上で管理できるほかmarkdownを書かなくても良いという利点がありますが、記事の取得はAPI経由で行うため意外とコストがかかってしまいます。
後者の場合は、Gitで記事を管理できるほかCloudflareでデプロイすればコストがかからないという利点があります。
ということでNuxt3での構築を始めます。

npx nuxi@latest init

Hugoのブログでもそうですがモダンで見やすいブログはとても重要です。とはいえいちいちCSSを書く暇などありません。そこでTailwind CSSを用います。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

https://tailwindcss.com

Tailwind CSSはリセットCSSとも呼ばれ、デフォルトのUIをリセットします。代わりに簡略化されたクラスを書くことで見やすいUIを作ることができます。このリセットの影響でブログで表示するほぼすべてのUIを再構築する必要があります。ですが、TailwindCSSにコンポーネントのコード例があるほか、preline UIというTailwindベースのUIライブラリがあり、そのコードを用いています。それでもブログには欠かせないコードブロックや引用、テーブル、リンクカードを自作するのはかなりの労力がかかりました。Nuxt/contentでは、これらのスタイルを定義する仕組み(Prose Components)というものがあります。これを用いるとこのブログのようにスタイルを変更することができます。

このブログを作るうえで苦労した点はリンクカードです。このページにもたくさんありますが、例えば私のホームページを表示させると次のようになります。

CrystaWorld

Welcome to CrystaWorld!

https://crystaworld1221.com

このリンクカードでは、OpenGraphのデータを読み込み、カードとして見やすくするという効果があります。Nuxt3ではServerという仕組みがあり、ローカルでAPIサーバーを作成し、そのAPIを叩いて結果をvueコンポーネントとして利用することができます。カレントディレクトリに

このタイプは、APIを作成する際と同じ命名規則なので調べれば出てくると思います。APIを叩いてデータを取得する方法は公式ドキュメントをご覧ください。OGPの取得には、unfurl.jsというライブラリを用いました。

server/ · Nuxt Directory Structure

The server/ directory is used to register API and server handlers to your application.

https://nuxt.com/docs/guide/directory-structure/server

ウェブサイトを作るうえで欠かせないのがSEOの設定です。この設定をすることでGoogleにクロール(検索エンジンに登録)され検索した際に上位に表示されやすくなります。Nuxt3には、Nuxt SEOというプラグインがあります。

<template>  <div class="mt-2 mb-2">
    <div
      class="p-4 rounded-lg bg-[#323631] dark:bg-neutral-900 border-gray-700">
    </div>
  </div>
</template>

これにより、HTMLでいうところの

Tutorial: Getting Familiar With Nuxt OG Image · Nuxt SEO

Get started with the module by setting up your first og:image on your home page.

https://nuxtseo.com/og-image/getting-started/getting-familar-with-nuxt-og-image