Astroを使ってサイトを作り直しました

たまには開発者らしいことを……

わたしは！ Static Site が作りたいのだ！

今までMeycough Works.のサイトはNuxt.jsを使って作っていたのですが、Nuxt3が先日リリースされ、なぜだかうまくStatic Siteがhostできないという問題に直面しました。
なぜただのHTMLを吐いてくれないのか……

というわけで、調べていたところで見つかった、AstroというSSGを使ってサイトを作り直すことにしました。

ターミナルがかわいいことになった

プロジェクトを作る際にインストールまでできるのですが、何これかわいいアニメーションが見られます。
静止画ですがインストール過程はこんなかんじでした。

Themeを使ってみることにした

よさげなテーマがあったのでテーマを使ってみることにしました。
デモはこんなかんじ。

外部リンクは別タブで開くようにしたかったので、Pluguinsでrehypeを使用しました。
書き方としてはこんなです。

astro.config.mjs

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import remarkToc from "remark-toc";
import sitemap from "@astrojs/sitemap";
import rehypeExternalLinks from "rehype-external-links";

export default defineConfig({
  site: "ここにあなたのサイトのURL",
  integrations: [
    tailwind({
      config: {
        applyBaseStyles: false,
      },
    }),
    react(),
    sitemap(),
  ],
  markdown: {
    remarkPlugins: [
      remarkToc,
    ],
    rehypePlugins: [
      ['rehype-external-links', { target: '_blank', rel: 'external' }], // relとtargetを追加
    ],
    shikiConfig: {
      theme: "one-dark-pro",
      wrap: true,
    },
    extendDefaultPlugins: true,
  },
});

targetとrelはこういうふうに並列で書くのですね。