メインコンテンツまでスキップ

通常版

完全にまっさらな Windows 環境の人向けに書いています

Mac 環境の人は適時読み替えてください

また、すでに完了している手順がある場合は適時手順を飛ばしてください

対象者​

  • ドキュメントを更新しようとしている
  • 実際にどのように表示されるかを確認したい

nodejs のインストール​

docusaurus は nodejs というツールを用いてページを生成しています

そのため、実際のプレビューを表示するには nodejs のインストールが必要になります

nvm のインストール​

nodejs は頻繁に更新されていますが、自動更新機能などは提供されていません

そのため、nodejs のバージョン管理を行う nvm というツールを導入します

  1. インストーラーのダウンロード

    Releases · coreybutler/nvm-windows
    上記リンクを開き、 Latest 表示のあるリリースの Assets から nvm-setup.exe をダウンロードします

  2. インストール
    ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します

nodejs のインストール​

本題の nodejs をインストールします

管理者権限のコマンドプロンプトまたは PowerShell を開き、

nvm install lts
nvm use lts

を実行します

完了したら

node -v
npm -v

を実行し、バージョン番号が正しく表示されることを確認します

VSCode のインストール​

  1. インストーラーのダウンロード

    Download Visual Studio Code - Mac, Linux, Windows
    上記リンクから Windows を押し、インストーラーをダウンロードします

  2. インストール ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します

GitHub Desktop のセットアップ​

インストール​

  1. インストーラーのダウンロード

    Download GitHub Desktop | GitHub Desktop
    上記リンクから Download for Windows (64bit) を押し、インストーラーをダウンロードします

  2. インストール ダウンロードが済んだらインストーラーを実行し、指示に従ってインストールを完了します

認証​

初回起動時に、GitHub へのログインを促されるので認証をおこないます

  1. Sign in to GitHub.com ボタンを押します

  2. ブラウザが開くので、アカウントが合っていることを確認して認証を行います

    ブラウザから外部アプリを開く許可を求められて場合は許可してください

  3. Configure Git 画面になったら変更せずにそのまま Finish ボタンを押して完了します

リポジトリのクローン​

手元のパソコンでドキュメントを編集するために、データをダウンロードします

  1. Clone a Repository from the Internet を押します
  2. UniMagic-VRC 内の対象リポジトリを選択し、 Clone を押します
  3. Open in Visual Studio Code を押し、VSCode を開きます

VSCode の設定​

リポジトリのクローンの章で VSCode でプロジェクトを開いている前提で話を進めます

  1. プロジェクトを信頼するか確認されている場合は信頼するを選択してください

    Do you trust the authors of the files in this folder?
    (略) [ Yes, I trust the authors ] / [ No, I don't trust the authors ]

    で、 Yes, I trust the authors を選択してください

  2. 推奨された拡張機能をインストールすることを促されるので、インストールします

    Do you want to install the recommended extensions from Prettier, Microsoft and others for this repository?
    [ Install ] / [ Show Recommendations ]

    で Install を選択してください

  3. インストールが完了したら表示言語の切り替えを促されるので、切り替えます

    Would you like to change Visual Studio Code's display language to Japanese and restart?
    [ Change Language and Restart ]

    で Change Language and Restart を選択してください

依存関係のインストール​

  1. 画面左のタブから「実行とデバッグ(再生ボタンと虫のアイコン)」を開きます

  2. 上部、再生ボタンの右のドロップダウンから「依存関係のインストール」を選択し、再生ボタンを押します

    実行中は画面下部の色が変わり、完了すると元に戻ります

  3. 完了したら、先程のドロップダウンから「Docusaurus を起動」を選択し、再生ボタンを押します

  4. 開いたブラウザ上で正しくプレビューが表示されることを確認します

環境構築は以上で完了です
お疲れ様でした