VitePress プロジェクトの作成と実行
VitePress とは？
VitePress は Vite をベースに構築された静的サイトジェネレーターで、主にドキュメントを書くために設計されています。VitePress は Vue によって駆動され、非常に高速なビルド速度と開発体験を提供します。シンプルで強力な API を提供し、ドキュメントの作成と管理が非常に容易になります。
VitePress の主な特徴と利点
- 高速な開発体験：VitePress は Vite をベースにしており、超高速のホットリロードとビルド速度を提供します。
- シンプルな設定：シンプルな設定ファイルを使用して、ユーザーは独自のドキュメントサイトを素早く設定およびカスタマイズできます。
- 強力な Markdown 拡張：Vue コンポーネントやカスタム Markdown プラグインをサポートしており、ドキュメントの作成が柔軟で強力です。
- 内蔵の SEO 最適化：自動生成されるサイトマップと最適化された HTML 構造により、検索エンジンのフレンドリーさが向上します。
- 非常に小さいパッケージサイズ：Tree-shaking 技術を利用して生成された静的ファイルが非常に小さく、読み込みが速いです。
VitePress を使用することで、開発者は高性能なドキュメントサイトを迅速に構築することができます。
ServBay を使用して VitePress プロジェクトを作成して実行する
この記事では、ServBay が提供する Node.js 環境を使用して VitePress プロジェクトを作成して実行します。ServBay の「ホスト機能」を使用して Web サーバーを設定し、リバースプロキシと静的ファイルサービスを通じてプロジェクトにアクセスします。
VitePress プロジェクトの作成
プロジェクトの初期化
最初に、ServBay が提供する Node.js 環境をインストール してください。その後、以下のコマンドを使用して新しい VitePress プロジェクトを初期化します：
bashcd /Applications/ServBay/www mkdir servbay-vitepress-app cd servbay-vitepress-app npm add -D vitepress npx vitepress init1
2
3
4
5プロンプトに従ってプロジェクト情報を入力し、必要に応じて他のオプションを選択してください：
┌ Welcome to VitePress! │ ◇ Where should VitePress initialize the config? │ ./docs │ ◇ Site title: │ ServBay VitePress Demo │ ◇ Site description: │ A ServBay VitePress Demo Site │ ◇ Theme: │ Default Theme │ ◇ Use TypeScript for config and theme files? │ Yes │ ◇ Add VitePress npm scripts to package.json? │ Yes │ └ Done! Now run npm run docs:dev and start writing.
VitePress プロジェクトの内容を編集
docs/index.mdファイルの編集docs/index.mdファイルを開き、内容を「Hello ServBay!」に変更します。markdown# Hello ServBay! ServBay を使用して VitePress ドキュメントサイトを実行するための歓迎メッセージです。1
2
3
開発モードに入る
開発サーバーの実行
開発サーバーを起動し、ポート（例：8585）を指定します：
bashnpm run docs:dev -- --port 85851これにより、ローカルで開発サーバーが起動し、ポート 8585 が公開されます。
ServBay のホストリバースプロキシの設定
ServBay の「ホスト機能」を使用して開発サーバーにアクセスできるようにリバースプロキシを設定します。ServBay の設定内で新しいリバースプロキシを追加します：
- 名前：
My first VitePress dev site - ドメイン：
servbay-vitepress-test.dev - ホストタイプ：
リバースプロキシ - IP：
127.0.0.1 - ポート：
8585
詳細な設定手順については、Nodejs 開発サイトの追加をご参照ください。
- 名前：
開発モードのアクセス
ブラウザを開き、
https://servbay-vitepress-test.devにアクセスしてプロジェクトをリアルタイムで確認します。ServBay はカスタムドメインと無料の SSL 証明書をサポートしているため、より高いセキュリティを享受できます。
プロダクションビルドの作成
プロダクションビルドの作成
開発が完了したら、以下のコマンドを使用してプロダクションビルドを実行します：
bashnpm run docs:build1ビルドが完了すると、生成された静的ファイルは
docs/.vitepress/distディレクトリに保存されます。静的ファイルサービスの設定
ServBay の「ホスト機能」を使用してプロダクションバージョンにアクセスできるように静的ファイルサービスを設定します。ServBay の設定内で新しい静的サイトを追加します：
- 名前：
My first VitePress production site - ドメイン：
servbay-vitepress-test.prod - ホストタイプ：
静的 - サイトのルートディレクトリ：
/Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
- 名前：
プロダクションモードのアクセス
ブラウザを開き、
https://servbay-vitepress-test.prodにアクセスしてビルドされたプロダクションバージョンを確認します。ServBay のカスタムドメインと無料の SSL 証明書によって、サイトのセキュリティと信頼性が向上します。
クリーン URL モードでの実行
もしあなたの VitePress が クリーン URL モード（cleanUrls: true）で動作している場合、ServBay のホスト設定で以下の設定を行ってください。
- 名前：
My first VitePress production site - ドメイン：
servbay-vitepress-test.prod - カスタム設定：
チェック - Caddy 設定：
encode zstd gzip
import set-log servbay-vitepress-test.prod
tls internal
try_files {path} {path}/ {path}.html
root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
file_server2
3
4
5
6
7
8
9
10
設定を保存した後、.html を持たない方法で VitePress にアクセスできるようになります。例えば、https://servbay-vitepress-test.prod/path です。
以上の手順を通じて、VitePress プロジェクトの作成と実行が成功し、ServBay の機能を使用してプロジェクトを管理およびアクセスできるようになりました。