たまには開発者らしいことを……
わたしは! 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はこういうふうに並列で書くのですね。
完成
こうなりました。ご参考まで。

Meycough Works
個人サイト。