Nuxt.jsは、Vue.jsベースのフレームワークで、特にSSR（サーバーサイドレンダリング）や静的サイトジェネレーションが簡単にできる点で人気です。特に、静的サイトジェネレータとして利用する場合、SEO対策やパフォーマンス向上の面で優れた効果を発揮します。この記事では、Nuxt.jsを使って静的サイトを生成し、そのサイトをGitHub Pagesにデプロイする手順を紹介します。
必要な準備
まず、Nuxt.jsのプロジェクトを作成していない場合は、以下の手順でNuxt.jsの新しいプロジェクトを作成しましょう。
npx create-nuxt-app my-project上記コマンドを実行すると、Nuxt.jsプロジェクトのセットアップウィザードが開始されます。プロジェクト名やサーバーサイドレンダリングの設定、UIフレームワーク、デプロイ方法などを選択する画面が表示されるので、適宜設定してください。
プロジェクトの準備が整ったら、次の手順に進みます。
1. Nuxt.jsで静的ファイルを生成
Nuxt.jsを静的サイトジェネレータとして使う場合、プロジェクトを静的ファイルとしてビルドする必要があります。Nuxt.jsでは、nuxt generate コマンドを使用して静的ファイルを生成します。
まず、nuxt.config.js ファイルに以下の設定を追加して、GitHub Pagesに適したパス設定を行います。
export default {
target: 'static',
router: {
base: '/<リポジトリ名>/'
}
} <リポジトリ名> には、あなたのGitHubリポジトリ名を入力してください。これは、GitHub Pagesがホストする静的サイトの正しいルーティングを行うために必要です。
次に、静的ファイルを生成します。
npm run generate これにより、dist/ ディレクトリにHTML、CSS、JavaScriptの静的ファイルが生成されます。このディレクトリの内容をGitHub Pagesにデプロイします。
2. GitHubリポジトリの準備
GitHub Pagesでホストするためには、プロジェクトをGitHubリポジトリにプッシュする必要があります。まだリポジトリを作成していない場合は、GitHubで新しいリポジトリを作成してください。
git init
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git add .
git commit -m "Initial commit"
git push -u origin masterこれで、プロジェクトがGitHubにアップロードされました。
3. GitHub Pagesにデプロイ
GitHub Pagesにデプロイするには、gh-pagesブランチを使用するか、mainブランチの/docsディレクトリに静的ファイルを置く方法があります。ここでは、最もシンプルなgh-pagesブランチを使う方法を紹介します。
まず、gh-pages パッケージをインストールします。
npm install gh-pages --save-dev 次に、package.json ファイルにデプロイ用のスクリプトを追加します。
"scripts": {
"deploy": "gh-pages -d dist"
} この設定が完了したら、以下のコマンドで静的ファイルをgh-pagesブランチにデプロイします。
npm run deploy これで、GitHub Pagesに静的サイトがデプロイされました。リポジトリの設定から、GitHub Pagesのホスティングが正しく設定されているか確認してください。通常は、https://ユーザー名.github.io/リポジトリ名/ のURLでサイトが公開されます。
4. GitHub Actionsを使って自動デプロイ（オプション）
手動でデプロイする代わりに、GitHub Actionsを使って自動的にデプロイする方法もあります。これにより、push操作が行われるたびに自動的にサイトがデプロイされるので、作業が効率化されます。
リポジトリのルートに .github/workflows/deploy.yml ファイルを作成し、以下の内容を追加します。
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: '18'
- name: Install dependencies
run: npm install
- name: Generate static files
run: npm run generate
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist この設定を行うと、mainブランチに変更がプッシュされるたびに、自動的にnuxt generateコマンドが実行され、静的ファイルが生成され、GitHub Pagesにデプロイされます。
リポジトリに対するGITHUB_TOKENの権限がデフォルトでは読み取り専用になっているので読み書きに変更する必要があります。
以下の画像参照。
まとめ
Nuxt.jsを使った静的サイトの生成と、GitHub Pagesへのデプロイは、手順に従うことで簡単に実現できます。さらに、GitHub Actionsを活用することで、デプロイ作業を自動化でき、開発の効率が向上します。これらのツールを組み合わせることで、コストパフォーマンスに優れた静的サイトのホスティングが可能です。ぜひ、自分のプロジェクトにも活用してみてください。
