はじめに
GitHubのGitHub Pagesで静的HTMLを公開できるのは知っていたんですが、GitHub Actionsのことを全く知らなかったため、Vueで作ったサイトをGitHub Actionsを使って公開するのに1日かかりました。
GitHub Pagesで公開する方法は、GitHub Actionsを直接使うもの以外にも、branchの/や/docsディレクトリの中身を公開する方法があります。しかし、これらの方法だと、mainに/docsを置いたり、専用のgf-pagesブランチを用意しなければなりません。GitHub Actionsを使えばレポジトリを汚さずページを公開できます。
今回は備忘録として、Vite + Vue3 + VuetifyでGitHub Actionsを使ってGitHub Pagesを公開する方法を回想していきます。
参考
以下のページを参考にしました。
これがなければ永遠に表示されないことに悩んでいました。
環境
- windows11 + wsl(Ubuntu 22.04.3 LTS)
- nodejs(v20.16.0)
- npm(10.8.2)
- git(2.34.1)
- VSCode(1.92.1)
※VSCodeでGitHubと事前に連携しているため、認証関係は飛ばしています。
方法
プロジェクト作成
プロジェクトを作成したいディレクトリに移動します。
（自分の場合は、~/work）
$ cd ~/work
公式の説明にしたがってVuetifyのプロジェクトを作成します。
$ npm create vuetify@latest
Need to install the following packages:
create-vuetify@2.2.6
Ok to proceed? (y) y
> npx
> create-vuetify
Vuetify.js - Material Component Framework for Vue
# プロジェクト名（ディレクトリ名）は今回「vue_vuerify_test」としました
? Project name: › vue_vuetify_test
# プリセットはVue + Vuerifyのみを選択
? Which preset would you like to install? › Barebones (Only Vue & Vuetify)
❯ Barebones (Only Vue & Vuetify)
Default (Adds routing, ESLint & SASS variables)
Recommended (Everything from Default. Adds auto importing, layouts & pinia)
# TypeScriptは使わないのでNoを選択（使う人はYes）
? Use TypeScript? › No
# パッケージマネージャーはnpmを選択
? Would you like to install dependencies with yarn, npm, pnpm, or bun? › npm
yarn
❯ npm
pnpm
bun
none
# 依存関係をインストールYes
✔ Install Dependencies? … Yes
インストールが終わったら、以下のコマンドを実行して
$ cd vue_vuetify_test/
$ npm run dev
ブラウザでhttp://localhost:3000/にアクセスして表示されればインストール成功です。
Ctrl(or Cmd) + Cでnpm run devを終了させます。
Vuetifyを使わない、Vueのみのプロジェクトにしたい場合は、
Vite公式の説明の通りにすれば、ほぼ同じようにできます。
npm create vite@latest
✔ Project name: … vue_vuetify_test
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Vite + Vueの場合は以下のような表示になると思います。
コードの修正
現在の状態だとローカルでbuildするときはいいんですが、GitHub Actionsからbuild/deployされるとパスが通らなくなってしまうため、vite.config.mjsの末尾にコードを挿入します。
// Plugins
import Components from "unplugin-vue-components/vite";
import Vue from "@vitejs/plugin-vue";
import Vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
import ViteFonts from "unplugin-fonts/vite";
// Utilities
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Vue({
template: { transformAssetUrls },
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
Vuetify(),
Components(),
ViteFonts({
google: {
families: [
{
name: "Roboto",
styles: "wght@100;300;400;500;700;900",
},
],
},
}),
],
define: { "process.env": {} },
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
},
server: {
port: 3000,
},
+ build: {
+ outDir: "dist",
+ },
+ base: "./",
});
GitHubにアップロード
GitHubのNew Repositoryからリポジトリを作成します。
リポジトリ名はプロジェクト名にします。
公開範囲はPublic(でないと無料版ではGitHub Pagesを利用できない)、他はオフでいいです。
作成したら表示されるレポジトリのURL(https://github.com/~~~/~~~.git)をコピーして
ローカルのvue_vuetify_test/から
$ git init
$ git remote add origin レポジトリのURL
$ git add -A
$ git commit -m "Initial commit"
$ git branch -M main
$ git push -u origin main
でGitHubにプッシュできるはずです。
GitHub Pagesのセッティング
GithubレポジトリのSetting -> PagesからGithub Pagesのセッティングを行います。
Build and deploymentがDeploy from a branchになっているので、Github Actionsを選びます。
選択すると下に出てくる、GitHub Pages JekyllのボックスのConfigureを押します。
表示されたjekyll-gh-pages.ymlを編集します。
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
+ - run: npm ci
+ - run: npm run build
- name: Build with Jekyll
uses: actions/jekyll-build-pages@v1
with:
- source: ./
+ source: ./dist
destination: ./_site
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
そうしたら、右上緑色のCommit changesを押します。
jekyll-gh-pages.ymlの上部分では以下のようにワークフローの起動タイミングが定義されており、
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
デフォルトの設定では、mainブランチにpushされたときと、workflow画面から直接起動できるようになっています。GitHubのActions画面で左のタブからDeploy Jekyll with GitHub Pages dependencies preinstalledを押すとrun workflowと表示されるのでそこから能動的に起動できます。
今回はjekyll-gh-pages.ymlをCommit changesでpushされたのでActionが起動します。
おそらく数十秒で完了します。
deployに表示されたURLを開いて、npm run devしたときと同じ画面が表示されれば完了です。
アップロードされたページがこちら
GitHubからjekyll-gh-pages.ymlを直接編集してpushしたので、このままローカルから編集してpushするとエラーが起きます。
忘れずにプルしておきましょう。
$ git pull origin main
終わりです。