部署 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」をクリックし、リポジトリを一度コミットすると、変更が自動的に本番環境にデプロイされます。

これで、私たちが行う必要があるすべての作業が完了しました！