🚀

Vueプロジェクトをgh-pagesを使ってGitHub Pagesにデプロイする

2024/07/25に公開

Vue.js

GitHub Pages

tech

はじめに

LT 用に作った Vue のプロジェクトを、gh-pages を使って GitHub Pages にデプロイしたのでそのやり方を備忘録として残しておこうと思いました。

こんな人に読んで欲しい

Vue で作ったものを GitHub Pages でデプロイしたい人

結論

gh-pages でデプロイすると簡単だけど、一部設定を書くところがあり、それをしないと画面が真っ白になるので注意！

前提

Vue のみのプロジェクト（Vue3,Vite を使用している）
GitHub のリポジトリを使っていること
コマンドラインを使えること

やり方

ビルド

公開したいプロダクトができたら、下記コマンドを実行

npm run build

このコマンドを実行するとdistフォルダが作られる

gh-pages をインストール

npm install gh-pages

package.json に追記

package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"// ここに追記する
  },

gh-pagesをインストールし、package.jsonに追記することで、

npm run deploy

というコマンドを打てばデプロイできる状態になる

vite.config.js に追記（base の設定）

vite.config.jsというファイルがあるはずなので、その中でbaseの記述をする
例）hogeというリポジトリの場合

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/hoge/', // ここに追記する
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

こうすると、https://<USERNAME>.github.io/hoge/ というアドレスでデプロイされる。

デプロイできたか確認する

GitHub のレポジトリの右下あたりに、Deploymentsというところにリンクがあるのでクリックする
上部にhttps:// から始まるリンクができているのでクリックしてきちんと表示されるか確認する

まとめ

設定さえきちんとしておけば、デプロイは簡単でした。学習用や LT 用に作ったような静的サイトのデプロイ方法としてはおすすめです。

参考

GitHubで編集を提案