VitePressの紹介
VitePressは、ViteとVue 3をベースにした静的サイトジェネレーター（SSG）です。Markdownファイルを静的HTMLに変換し、ウェブサイトを素早く構築できます。
VitePressはドキュメンテーションサイトで広く使用されています。例えば、Vue.jsやViteの公式ドキュメントはどちらもVitePressで構築されています。
ドキュメンテーションに加えて、多くの人がVitePressを個人的なブログ作成にも利用しています。Markdownファイルをウェブページに変換するため、技術的な詳細にあまり悩むことなくコンテンツ作成に集中できます。
VuePressとの違い
名前に1文字の違いがあるだけのように見えますが、VuePressとVitePressはかなり異なります。
VuePressはVueチームからリリースされた初期の静的サイトジェネレーターで、特にVue 2.x用に設計されていました。対照的に、VitePressはVue 3.xに最適化されています。
Vue 3が主流になるにつれて、より活発なエコシステムとコミュニティサポートの恩恵を受けるために、最新バージョンのVitePressを使用することが推奨されています。
クイックスタート
新しいVitePressプロジェクトを作成するには、以下のコマンドを順に実行します。
上記のコマンドを実行すると、VitePressがコンテンツの場所、サイトタイトル、テーマなどの一連の質問を通じて基本的な設定をガイドしてくれます。初心者の方は、すべての質問でEnterキーを押すだけでデフォルトオプションを受け入れることができます。
ウィザードが完了すると、プロジェクトは初期化されます。プロジェクトのディレクトリ構造は以下のようになります。
開発サーバーを開始するには、次のコマンドを実行します。
ブラウザで http://localhost:5173 を開くと、VitePressサイトが表示されます。
最初の投稿を追加する
ルートディレクトリに新しいMarkdownファイルを作成します。例えば my-first-post.md です。内容を記述します。
投稿を記述した後、サイトに表示されないことに気づくでしょう。これは、VitePressがファイル変更を自動的に検出してナビゲーションを更新しないためです。投稿をVitePressに追加するには、設定ファイルを手動で更新する必要があります。
.vitepress/config.mts ファイルを開き、sidebar 設定オプションを見つけて、新しい投稿を追加します。
ファイルを保存した後、ブラウザページをリフレッシュします。サイドバーに投稿へのリンクが表示されます。それをクリックして新しい投稿を表示します。
サイドバーを自動更新する方法はありますか？
投稿を作成するたびにサイドバーを手動で更新するのは面倒です。しかし、現在、公式チームから提供されている組み込みの自動化ソリューションはありません。
この問題は、VitePress Sidebarのようなコミュニティプラグインを使用して解決できます。
ホームページをカスタマイズする方法？
デフォルトのホームページは index.md にあります。しかし、その内容は奇妙に見えます。MarkdownやHTMLはなく、設定のセットのみで構成されているようです。
設定ブロックがどのようにして完全なウェブページになるのでしょうか？
ホームページは実際にはVitePressテーマによって生成されます。デフォルト設定を使用して作成したサイトにもテーマが含まれています。
index.md のFrontmatter（ファイル上部の設定領域）で layout: home を指定すると、VitePressはテーマに組み込まれているホームページテンプレートを使用してページをレンダリングします。テンプレートに必要なタイトル、タグライン、ボタンなどのコンテンツはすべて、index.md で設定する hero や actions などのフィールドから取得されます。
ホームページのスタイルを最も直接的に変更するには、サイトのテーマを変更またはカスタマイズします。
ホームページを完全に書き直すか、コミュニティが提供するテーマを使用できます。Awesome VitePressのような「素晴らしいリスト」で多くのコミュニティテーマを見つけることができます。
ブログをさらに充実させるには？
基本的なフレームワークがセットアップされたら、ブログをより豊かでパーソナライズされたものにするために、さらに学習を進めることができます。
- Vue.jsを学ぶ: Vueを学ぶことで、Markdownファイル内にカスタムコンポーネントを作成し、チャート、カルーセル、またはより複雑なアプリケーションなどのウェブコンテンツを充実させることができます。
- VitePressドキュメントを深く掘り下げる: 公式ドキュメントを読む時間を確保して、ナビゲーションバー、フッター、国際化（i18n）の設定方法、そして組み込みのMarkdown拡張機能を最大限に活用する方法を学びましょう。
- コミュニティテーマとプラグインを探る: Awesome VitePressなどにあるコミュニティ開発者によって提供されたテーマやプラグインを使用することで、ブログに高度な機能やスタイルを素早く追加できます。
VitePressウェブサイトのデプロイ
ブログがセットアップされたので、オンラインで共有するためにオンラインにデプロイする時です。
デプロイにはLeapcellの使用をお勧めします。
Leapcellはウェブアプリホスティングプラットフォームで、非常にシンプルで使いやすいインターフェースを提供しており、数回の簡単な手順でVitePressサイトをオンラインにデプロイできます。
さらに、Leapcellには組み込みのトラフィック分析機能があり、ユーザーの訪問頻度やユーザーソースなどのウェブサイトのアクセス情報を確認するのに非常に便利で、読者をよりよく理解するのに役立ちます。
具体的なデプロイ手順
-
プロジェクトのルートディレクトリで、
Caddyfileという名前のファイルを作成し、以下の内容を記述します。 -
プロジェクトをGitHubにコミットします。手順についてはGitHubの公式ドキュメントを参照してください。Leapcellは後でGitHubリポジトリからコードをプルします。
-
Leapcellページで「Create Service」をクリックします。
-
ランタイムとして「nodejs20」を選択し、これらのデプロイメントフィールドに入力します。
Build Command:
Start Command:
Port:
8080
-
下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイメントホームページに戻ります。ここで、Leapcellがドメインを提供していることがわかります。これがブログのオンラインアドレスです。
これで、オンラインでアクセスできるブログができました。友達に見せてあげましょう！
Xでフォローする：@LeapcellJP
関連記事：
