kedzkiestの日記

普段の発見や開発の進捗について書いていきます。

Svelteで作ったアプリをGitHub Pagesでホスティングするまで

はじめに

新し目のフレームワークを使ってWebアプリを作る体験がしてみたいと思い、作ったはいいもののそれをGitHub Pagesでホスティングするのに詰まったので、解決までの手順を備忘録として残しておきます。

作ったもの

あなたと親族の関係性」というWebアプリです。"深さ2:あなた->父->母"のように関係性の深さと対象を選択し、最後に「結果を見る」ボタンを押すと、あなたと対象の家系図上の続柄が分かります。

何に詰まったか

.svelteファイルを編集し終え、アプリのルートディレクトリでnpm run buildして、生成されたファイル群をデプロイ用のブランチに置いたのですが、生成されたURLを辿っても空白のページになってしまう(リソースが正しく読み込まれていない)か、CSSとJSの抜け落ちた生のhtmlが表示されている状態でした。

解決までの手順

まず、Svelteの公式ページに載っている手順でプロジェクトの初期化を行いました。

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

初めのnpm createを叩いた段階で、テンプレートプロジェクトを3種類のうちから選ぶよう聞かれますが、デフォルトで選択されているCounter付きのものを選択しました。
その後は自分の好きなようにApp.svelteファイルを編集した後、このブログのdeploy it in Github pages以降を参考に

npm install --save-dev gh-pages

を打ち、vite.config.jsファイルを

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
base: "/my-app/",
plugins: [svelte()],
});

のように編集し(my-appの部分は公開したいリポジトリ名)、最後にpackage.jsonファイルを

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "npx gh-pages -d dist"
},

のように編集しました。
あとはプロジェクトに変更を加えるたびに

npm run build
npm run deploy

を走らせれば、指定したリポジトリでデプロイ用のブランチが生成(更新)され、Webアプリとして利用できるようになりました。