このサイトのAstro構築環境について

2024-09-09

このサイトはAstroで構築しており、以下はその構築内容のメモです。
node.jsはHomebrewでインストール・管理している。

npm create astro@latest

作成したディレクトリに移動して以下を実行。それぞれMDX対応、サイトマップ、RSS、GAのPageSpeed Insightsパフォーマンス最適化。

npx astro add mdx
npx astro add sitemap
npm install @astrojs/rss
npm install -D @astrojs/partytown

コードブロック機能拡張のExpressive CodeとTailwind CSSを入れている。

npx astro add astro-expressive-code
npx astro add tailwind

フォントはFontsourceから。Astroのベーステンプレートで読み込んで、tailwind.config.mjsで指定する。
Noto Sans JPを入れているけど、今現在は使用していない。

npm install @fontsource-variable/noto-sans-jp
npm install @fontsource-variable/lexend-peta

RSSフィードで記事の全文を出力するため、sanitize-htmlとmarkdown-itを入れる。

npm install sanitize-html
npm install markdown-it

以下設定ファイル（いろいろ追加している）

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import partytown from '@astrojs/partytown';
import tailwind from '@astrojs/tailwind';
import expressiveCode from 'astro-expressive-code';

// https://astro.build/config
export default defineConfig({
  site: 'https://note.sorakakeru.info',
  markdown: {
    syntaxHighlight: false
  },
  integrations: [
    expressiveCode({
      themes: 'rose-pine-dawn',
      styleOverrides: {
        codeFontSize: '1rem'
      }
    }),
    mdx(),
    sitemap(),
    partytown({
      config: {
        forward: ['dataLayer.push']
      }
    }),
    tailwind()
  ]
});

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        //sans: ['Noto Sans JP Variable', ...defaultTheme.fontFamily.sans],
        body: [
          'Hiragino Kaku Gothic ProN',
          'Hiragino Sans',
          'Meiryo',
          'sans-serif'
          //...defaultTheme.fontFamily.sans
        ],
        lexcendpeta: ['Lexend Peta Variable', 'sans-serif']
      },
      colors: {
        primary: '#3bb0b4',
        secondary: '#dadada',
        bgprm: '#fffffb'
      }
    },
    container: {
      center: true,
    },
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '8': '8px',
    }
  },
  plugins: [
    function({addComponents}) {
      addComponents({
        '.container': {
          width: '90%',
          '@screen sm': {
            maxWidth: '800px',
          },
          '@screen md': {
            maxWidth: '800px',
          },
          '@screen lg': {
            maxWidth: '800px',
          },
          '@screen xl': {
            maxWidth: '800px',
          },
        },
        '.list-circle': {
          listStyleType: 'circle'
        },
        '.list-square': {
          listStyleType: 'square'
        },
      })
    },
  ],
}

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
const parser = new MarkdownIt();

export async function GET(context) {
  const article = await getCollection('article');
  return rss({
    title: 'note.sorakakeru.info RSS Feed',
    description: 'note.sorakakeru.info RSS Feed',
    site: context.site,
    items: article.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      customData: post.data.customData,
      content: sanitizeHtml(parser.render(post.body)),
      link: `/article/${post.slug}/`,
    })),
  });
}

Astroをアップグレードする場合

npx @astrojs/upgrade