部署 VuePress v1 ドキュメントを Vercel に

はじめに#

おそらく、VuePress を使用してドキュメントを作成することに毎日のように飽きてしまったかもしれません。ターミナルで yarn docs:build を叩くのにうんざりしているかもしれません。

CI を使用したいと思っても、設定が難しいと悩んでいるかもしれません。

ここでは、VuePress ドキュメントを Vercel にデプロイする方法を共有します。

この記事は VuePress v1 ドキュメントにのみ適用されます。v2 ドキュメントについては、各自で調べてください。

詳細は省略しますが、登録リンクから GitHub アカウントを使用して OAuth ログインすることをおすすめします。

ダッシュボードに入ったら、右上の「New Project」をクリックして新しいプロジェクトを作成します。

ドキュメントを保存しているリポジトリを選択し、「Import」をクリックします。ここでは、PCL 生存服のドキュメントを表示します。

リポジトリのインポート

組織アカウントからデプロイする場合は、まずチームアカウントを作成する必要があります。

FRAMEWORK PRESET では必ず Vue.js を選択してください。

次に、BUILD AND OUTPUT SETTINGS ページに移動し、2 番目のスイッチをオンにし、隣のテキストボックスに .vuepress/dist と入力します（もしドキュメントがサブディレクトリにある場合は、前にそのディレクトリの名前を追加する必要があります）。

その他の項目は空白のままにしておいてください。以下の画像のように設定してください（直接コピーしないでください）。

「Deploy」ボタンをクリックし、デプロイの完了を待ちます。

花火が表示されたら、ドキュメントが正常にデプロイされたことを意味します。

プロジェクトを開き、Settings をクリックし、Git に移動します。"Production Branch" をドキュメントの作業ディレクトリのブランチに設定します。

注意点として、ドキュメントの作業ディレクトリのディレクトリ構造は通常次のようになります：

ドキュメントのディレクトリ構造

設定が完了したら、「Save」をクリックし、リポジトリを一度コミットして変更を自動的に本番環境にデプロイします。

これで、すべての作業が完了しました！