Nuxtでブログを構築した

以前までWordPressで運用していたこのブログをNuxtで再構築しました。

Vercelが提供するテンプレートの中にBlog Starter Kitがあり、今回このテンプレートを使用しました。

まず、記事をMarkdownで書きたかったということと、運用コストをできる限り下げたいというのが理由です。 VarcelとNuxtを使うと、この要望を満たすことができます。

Blog Starter KitはMarkdownで記事を書き、Vercelでデプロイができます。 Vercelは独自ドメインを無料で設定できるので、今回はhazm.jpドメインを設定しました。

これによりLightSailを完全に停止できます。

カスタマイズ

一部、自分好みにカスタマイズしています。まず、テンプレートファイルをサイトの目的に合わせてタイトルや投稿者画像の固定化をしました。 Nuxtを触っていたことがあるので、コンポーネントの概念については理解に問題がありません。

それに加え、コードブロックのSyntaxHighlightを有効化しました。下記のようなものです。

ary = Array.new(3, "foo")
p ary                     #=> ["foo", "foo", "foo"]
ary[0].capitalize!
p ary                     #=> ["Foo", "Foo", "Foo"]  (各要素は同一のオブジェクトである)

これには、ライブラリを追加してmarkdownを変換するプロセスの中でうまくハイライトさせるように設定しました。

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm'
import remarkRehype from 'remark-rehype';
import rehypeHighlight from 'rehype-highlight';
import rehypeStringify from 'rehype-stringify';

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse) // Parse markdown.
    .use(remarkGfm) // Support GFM (tables, autolinks, tasklists, strikethrough).
    .use(remarkRehype) // Turn it into HTML.
    .use(rehypeHighlight) // SyntaxHighlight.
    .use(rehypeStringify) // Serialize HTML.
    .process(markdown);
  return result.toString();
}

記事の移行でURLが変わりますが、その点は無視しました。本当は301リダイレクトするべきなんですが、商用サイトではないので時間をかけたくありません。

全体として、テンプレートとVarcelの恩恵を受けてサイトの構築に成功しました。以上！

<Hazm Blog />

Nuxtでブログを構築した

カスタマイズ