LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@h4cker_j

VitePressガイド：インストールからデプロイまで

Posted at

Cover

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プロジェクトを作成するには、以下のコマンドを順に実行します。

# 新しいプロジェクトフォルダを作成し、その中に入る
mkdir vitepress-blog && cd vitepress-blog

# VitePressを追加
npm add -D vitepress@next

# 初期化ウィザードを実行
npx vitepress init

上記のコマンドを実行すると、VitePressがコンテンツの場所、サイトタイトル、テーマなどの一連の質問を通じて基本的な設定をガイドしてくれます。初心者の方は、すべての質問でEnterキーを押すだけでデフォルトオプションを受け入れることができます。

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Where should VitePress look for your markdown files?
│  ./
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run npm run docs:dev and start writing.

ウィザードが完了すると、プロジェクトは初期化されます。プロジェクトのディレクトリ構造は以下のようになります。

.
├── .vitepress
│   └── config.mts  # VitePress設定ファイル
├── api-examples.md
├── markdown-examples.md
├── index.md      # サイトのホームページ
└── package.json

開発サーバーを開始するには、次のコマンドを実行します。

npm run docs:dev

ブラウザで http://localhost:5173 を開くと、VitePressサイトが表示されます。

最初の投稿を追加する

ルートディレクトリに新しいMarkdownファイルを作成します。例えば my-first-post.md です。内容を記述します。

---
title: My First Post
date: 2025-09-21
---

# Hello, VitePress!

This is the first post on my personal blog.

@Built with VitePress

投稿を記述した後、サイトに表示されないことに気づくでしょう。これは、VitePressがファイル変更を自動的に検出してナビゲーションを更新しないためです。投稿をVitePressに追加するには、設定ファイルを手動で更新する必要があります。

.vitepress/config.mts ファイルを開き、sidebar 設定オプションを見つけて、新しい投稿を追加します。

import { defineConfig } from 'vitepress';

export default defineConfig({
  // ... その他の設定
  themeConfig: {
    // ... その他のテーマ設定
    sidebar: [
      {
        text: 'My Posts', // これはグループタイトルです
        items: [{ text: 'My First Post', link: '/my-first-post' }],
      },
    ],
  },
});

ファイルを保存した後、ブラウザページをリフレッシュします。サイドバーに投稿へのリンクが表示されます。それをクリックして新しい投稿を表示します。

ImageP1

サイドバーを自動更新する方法はありますか？

投稿を作成するたびにサイドバーを手動で更新するのは面倒です。しかし、現在、公式チームから提供されている組み込みの自動化ソリューションはありません。

この問題は、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

Leapcellはウェブアプリホスティングプラットフォームで、非常にシンプルで使いやすいインターフェースを提供しており、数回の簡単な手順でVitePressサイトをオンラインにデプロイできます。

さらに、Leapcellには組み込みのトラフィック分析機能があり、ユーザーの訪問頻度やユーザーソースなどのウェブサイトのアクセス情報を確認するのに非常に便利で、読者をよりよく理解するのに役立ちます。

ImageP2

具体的なデプロイ手順

  1. プロジェクトのルートディレクトリで、Caddyfile という名前のファイルを作成し、以下の内容を記述します。

    :8080 {
  root * ./.vitepress/dist
  file_server
}

  2. プロジェクトをGitHubにコミットします。手順についてはGitHubの公式ドキュメントを参照してください。Leapcellは後でGitHubリポジトリからコードをプルします。

  3. Leapcellページで「Create Service」をクリックします。
    ImageP3

  4. ランタイムとして「nodejs20」を選択し、これらのデプロイメントフィールドに入力します。

    Build Command:

    apt update && apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list
chmod o+r /usr/share/keyrings/caddy-stable-archive-keyring.gpg
chmod o+r /etc/apt/sources.list.d/caddy-stable.list
apt update && apt install -y caddy

npm install && npm run docs:build

    Start Command:

    caddy run

    Port:
    8080

    ImageP4

  5. 下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイメントホームページに戻ります。ここで、Leapcellがドメインを提供していることがわかります。これがブログのオンラインアドレスです。
    ImageP5

これで、オンラインでアクセスできるブログができました。友達に見せてあげましょう！

Xでフォローする：@LeapcellJP

ブログでこの記事を読む

関連記事：

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?