Astro.jsで生成フォルダをdistから任意のフォルダ名にする方法 – フレームワークAstro.jsで静的サイト制作

最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。

今回はビルドコマンドで生成されるフォルダをデフォルトの「dist」から任意の名前に変更する方法です。

なぜ任意のフォルダ名にしたいか

既存のサイト内の子ページを作成したい場合にはフォルダ名を変更してアップロードする必要があります。

ビルドコマンドで生成の段階でフォルダ名を指定できれば便利です。

フォルダ名の設定方法

npm create astro@latest コマンドで生成される astro.config.mjs の defineConfigに設定を行うだけで簡単に変更できます。

const distDir = '***'; // 任意のフォルダ名
export default defineConfig({
  // ↓これ
  outDir: `/${distDir}`
  // ↑これ
});

defineConfigのoutDirの値を生成したいフォルダ名に変更するだけです。

これで任意のフォルダにサイトが生成されます。