シスアド：Vitepressのファイル構成

Vitepressのファイル構成について説明します。

ファイル構成

Vitepressのファイル構成は、以下のようになっています。

.
├── .vitepress
│   ├── cache
│   │   └ ... (キャッシュファイル)
│   ├── dist
│   │   └ ...（npm run buildで生成されるファイル）
│   ├── theme
│   │   ├ custom.css（カスタムするためのCSS）
│   │   └ index.js（テーマの設定ファイル）
│   └── config.js（Vitepressの設定ファイル）
├── components
│   ├── Movie.vue（動画を埋め込むコンポーネント）
│   └── Note.vue（吹き出し形式のコンポーネント）
├── node_modules
│   └ ...（npmでインストールしたパッケージ）
├── public
│   └ ...（ドキュメントルートに置く画像や動画など）
├── students
│   └ ...（学生向けのマニュアル置き場）
├── sysadmin
│   └ ...（シスアド向けのマニュアル置き場）
├── teachers
│   └ ...（先生向けのマニュアル置き場）
├── .editorconfig（VSCodeなどのエディタの設定ファイル）
├── .gitattributes（Gitの設定ファイル）
├── .gitignore（Gitの設定ファイル）
├── package-lock.json（npmの設定ファイル）
├── package.json（npmの設定ファイル）
└── そのほか...

基本的には、markdownファイルを置いたらどこにでもページが作成されるので、ファイル構成を気にする必要はありません。

覚えておくとよい点

• CSSをいじりたいときは、.vitepress/theme/custom.cssを編集します。
• vitepressの設定を変更したいときは、.vitepress/config.jsを編集します。
• ドキュメントルート以下に画像や動画を置きたいときは、publicディレクトリに置きます。ビルド時にコピーされます。