SvelteKit + Newt + Github Pageでブログをデプロイするまで

npm i -D @sveltejs/adapter-static

import static_adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	...
	kit: {
		adapter: static_adapter(),
		...
		prerender : {
			default : true // デフォルトで全てのページがprerenderされる
		}
	}
};

import { getArticle } from '$lib/newt/client'
import type { RequestHandler } from '@sveltejs/kit';

export const get: RequestHandler = async ({ params }) => {
	const article = await getArticle(params.slug)
	return {
	    body : {
		article
	    }
	};
};

import { createClient } from 'newt-client-js'
import type { Auther, Article, } from '$lib/types'
// UIDとTOKENは環境変数より取得
const client = createClient({
    spaceUid: import.meta.env.VITE_SPACE_UID as string, 
    token: import.meta.env.VITE_CDN_API_TOKEN as string,
    apiType: 'cdn' // You can specify "cdn" or "api".
});

const AppId = 'blog'
const ArticleId = 'article'

...
// Newtの記事を取得するメソッド
export const getArticle = async (slug:string)=> {
    // Newtから記事データを取得する
    const article = await client
        .getContent<Article>({
            appUid: AppId,
            modelUid: ArticleId,
            contentId: slug
        })
    return article
}

<script lang="ts">
	import type { Article } from '$lib/types';
	export let article: Article; // Endpointで設定されたBodyからデータを受け取る
</script>

<svelte:head>
	<title>{article ? article.title : '記事が存在しません'}</title>
</svelte:head>

<div class="container">
	{#if article}
		<article>
			<header>
				<h1 bind:this={element}>{article.title}</h1>
				...
			</header>
			<div class="content">
		<!-- 記事本文のレンダリング -->
                {@html article.body}
			</div>
			<footer>
				<div class="meta">{format(new Date(article._sys.updatedAt), 'yyyy-MM-dd')}(更新)</div>
			</footer>
		</article>
	{:else}
		<h1>記事が見つかりませんでした</h1>
	{/if}
</div>
<style lang="scss">
	...
</style>

npm i -D @playwright/test
# ブラウザのインストール
npx playwright install

import type { PlaywrightTestConfig } from '@playwright/test';

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config : PlaywrightTestConfig = {
	webServer: {
		command: 'npm run build && npm run preview',
		port: 3000
	}
};
export default config;

import { expect, test } from '@playwright/test';
// ベースパスを忘れると page.gotoでpageが見つからなくなるので、忘れずに指定する
const BASE_PATH = '/リポジトリ名'
test('index page to article page transition', async ({ page }) => {
	await page.goto(BASE_PATH);
	expect(await page.textContent('h1')).toBe('My Profile');
        ...
});

touch static/.nojekyll

import static_adapter from '@sveltejs/adapter-static';
...
+// productionの場合のみベースパスを設定する
+const production = process.env.NODE_ENV === 'production';

/** @type {import('@sveltejs/kit').Config} */
const config = {
...
	kit: {
		adapter: static_adapter(),
+		paths: {
+			base: production ? '/リポジトリ名' : '',
+		},
		prerender : {
			default : true
		}		
	}
};

export default config;

<script lang="ts">
	import { base } from '$app/paths';
</script>
...
<div class="container">
<!-- リンクの場合 -->
	<a sveltekit:prefetch href={`${base}/pages/0`}>Articles</a>
<!-- 画像の場合 -->
	<img src={`${base}/my_image.svg`} width="128" alt="me" />
...
</div>

npm install -D gh-pages

npm run build && gh-pages -d build -t true

name: Svelte blog CI
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  # webhookをトリガにする
  repository_dispatch:
    types:
      - webhook
env:
  VITE_SPACE_UID: ${{ secrets.VITE_SPACE_UID }}
  VITE_CDN_API_TOKEN: ${{ secrets.VITE_CDN_API_TOKEN }}
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'    
    - run: npm install
    
# Playwrightによるテスト 記事更新(webhook)では動かないようにする
    - name: install playwright
      run: npx playwright install
      if: github.event_name != 'repository_dispatch'
    - name: run test
      run: npm test
      if: github.event_name != 'repository_dispatch'
    
    - run: npm run build
    - name: Deploy website
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: build