Closed2022/05/24にクローズ5

Svelte+TypeScriptの環境構築とGitHub Pagesへのデプロイ

ピン留めされたアイテム

このScrapの手順は現在は非推奨。

https://svelte.dev/

https://svelte.jp/

新規プロジェクトの作成

公式のテンプレートを使用する。

https://github.com/sveltejs/template

GitHub上のUse this templateから新規リポジトリを作成する。もしくはdegitを使用すると便利。

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app

./scripts/setupTypeScript.jsを実行してTypeScriptを有効化する。

node scripts/setupTypeScript.js

package.jsonに必要なパッケージが記述されているので、npm installでインストール。

npm install

VS Codeを使用している場合はSvelte公式の拡張機能を入れる。

TypeScriptで書く

<script>にlang="ts"を追加。

<script lang="ts">
    export let name: string;
</script>

ローカルサーバーの起動

npm run dev

ビルド

./public/に出力される。

npm run build

GitHub ActionsのWorkflowの定義

以下のファイルを./.github/workflows/に置く。デフォルトブランチがmainでない場合はブランチ名を書き換える。

./.github/workflows/deploy.yml

name: deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v2
        with:
          node-version: '16'
          cache: npm

      - run: npm install

      - run: npm run build

      - uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

GitHub Pagesの設定

リポジトリのSettingsからPagesのSourceを開き、ブランチをgh-pagesに、フォルダを/ (root)にする。

相対パスに変更

https://<username>.github.io/<repository>/で公開する場合は./public/index.htmlのパスを全て相対パスに変更。

./public/index.html

- 	<link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='icon' type='image/png' href='./favicon.png'>
+	<link rel='stylesheet' href='./global.css'>
+	<link rel='stylesheet' href='./build/bundle.css'>
-	<script defer src='/build/bundle.js'></script>
+	<script defer src='./build/bundle.js'></script>

mainリポジトリを更新すると自動でWorkflowが実行されGitHub Pagesにデプロイされる。

このスクラップは2022/05/24にクローズされました