Zenn
🚀

DocusaurusをVercel上で動かす手順

2025/02/10に公開
GitHub
Node.js
Vercel
Docusaurus
tech

DocusaurusをVercel上で動かす手順

本記事では、Docusaurusを簡単にVercel上で動作させる手順について解説します。Node.jsのセットアップから始め、Docusaurusのプロジェクト作成、GitHubのリポジトリ管理、そしてVercelでのデプロイまで、順を追って説明していきます。

前準備：Node.jsのセットアップ

まずはNode.jsをインストールします。Node.jsはJavaScript環境をローカルで動かすために必要です。以下の手順でセットアップしましょう。

Step 1: Homebrewのセットアップ

Node.jsのバージョン管理ツールを利用するために、まずHomebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Nodebrewのインストール

Node.jsのバージョン管理ツールであるNodebrewをインストールします。

brew install nodebrew

Step 3: Nodebrewのセットアップ

Nodebrewを初期化します。

nodebrew setup

つづいて、パスを通します。以下のコマンドを実行してください。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

Step 4: Node.jsのインストール

Node.jsの最新安定版をインストールします。

nodebrew install-binary stable

インストールが完了したら、使用するバージョンを指定します。

nodebrew use stable

Step 5: 動作確認

以下のコマンドでインストールされたNode.jsとnpmのバージョンを確認します。

node -v
npm -v

バージョン番号が表示されれば成功です。

Docusaurusのセットアップ

Docusaurusは静的サイトジェネレーターであり、公式ドキュメントサイトやブログを簡単に作成できます。

Step 1: 作業ディレクトリの作成

cd ~
mkdir github
cd github
mkdir docusaurus_sample
cd docusaurus_sample

Step 2: Docusaurusプロジェクトの作成

以下のコマンドでDocusaurusのテンプレートプロジェクトを作成します。

npx create-docusaurus@latest my-website classic

my-websiteディレクトリが自動的に作成され、中にプロジェクトがセットアップされます。テンプレートはclassicを指定しています。

GitHubにリポジトリを作成し設定する

生成したプロジェクトをGitHubで管理するように設定します。

Step 1: リポジトリの作成

以下のURLにアクセスして新しいリポジトリを作成してください:

GitHubで新しいリポジトリを作成

  • リポジトリ名: 適宜入力（例: docusaurus_sample）
  • 公開範囲: Privateに設定

この２つの情報を設定したらCreate repositoryを押してリポジトリ作成し、次に進みましょう。

Step 2: Fine-grained personal access tokenの発行

Privateリポジトリに安全にアクセスするために、以下のURLからアクセストークンを発行します:

Access Tokenの発行ページ

以下の設定を行う:

  • Token name: for docusaurus_sample
  • Expiration: 90 days
  • Repository access: Only select repositories → 作成したリポジトリを選択
  • Permissions: ContentsをAccess: Read and write

設定後、Generate tokenを押してトークンを発行します。トークンは発行直後に表示されるため必ずコピーしてください。

Step 3: リポジトリのPushする

発行したアクセストークンを使用してリポジトリにコードをPushします。

cd ~/github/docusaurus_sample
git init
git checkout -b main
git add .
git commit -m "First special commit Yeah!"
git remote add origin https://<ユーザー名>:<発行したトークン>@github.com/<ユーザー名>/<リポジトリ名>.git
git push -u origin main
  • <ユーザー名>：あなたのGitHubのユーザー名
  • <発行したトークン>：コピーしたFine-grained personal access token
  • <リポジトリ名>：作成したリポジトリの名前

VercelでDocusaurusをデプロイ

いよいよ作成したDocusaurusプロジェクトをVercelにホストします。

Step 1: Vercelにログイン

以下のURLにアクセスしてVercelにログインします（GitHubアカウントを使用するのが便利です）。

https://vercel.com/

まだアカウントがない場合はGitHubアカウントで新規作成してください。

Step 2: プロジェクトの作成

ログイン後、以下の手順でプロジェクトを作成します。

  1. Vercelダッシュボードの左上でプロジェクト一覧を開きます。
  2. Create Projectを押します。
  3. Import Git Repositoryセクションから、先ほど作成したリポジトリを選択してImportをクリックします。

Step 3: デプロイ

次の画面でそのままDeployをクリックします。しばらく待つとデプロイが完了し、URLが発行されます。

動作確認

デプロイされたURLにアクセスし、Docusaurusサイトが正常に動作していることを確認してください。

これで、DocusaurusをVercelで動かす手順は完了です！Enjoy！🚀

Discussion