ビルドとデプロイ
Static site generation
Edit this page on GitHubSvelteKit を static site generator (SSG) として使用するには、adapter-static
を使用します。
この adapter はサイト全体を静的なファイルのコレクションとしてプリレンダリングします。もし、一部のページのみをプリレンダリングして他のページは動的にサーバーでレンダリングしたい場合、別の adapter と prerender
オプション を組み合わせて使用する必要があります。
使い方permalink
npm i -D @sveltejs/adapter-static
を実行してインストールし、svelte.config.js
にこの adapter を追加します:
ts
importCannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.adapter from'@sveltejs/adapter-static' ;export default {kit : {adapter :adapter ({// default options are shown. On some platforms// these options are set automatically — see belowpages : 'build',assets : 'build',fallback :undefined ,precompress : false,strict : true})}};
…そして prerender
オプションを最上位のレイアウト(root layout)に追加します:
ts
// This can be false if you're using a fallback (i.e. SPA mode)export constprerender = true;
ts
// This can be false if you're using a fallback (i.e. SPA mode)export constprerender = true;
SvelteKit の
trailingSlash
オプションを、あなたの環境に対して適切に設定しなければなりません。もしあなたのホスト環境が、/a
へのリクエストを受け取ったときに/a.html
をレンダリングしない場合、/a/index.html
を作成するために最上位のレイアウト(root layout)でtrailingSlash: 'always'
を設定する必要があります。
ゼロコンフィグサポートpermalink
ゼロコンフィグサポートがあるプラットフォームもあります (将来増える予定):
これらのプラットフォームでは、adapter のオプションを省略することで、adapter-static
が最適な設定を提供できるようになります:
export default {
kit: {
adapter: adapter({...})
adapter: adapter()
}
};
Optionspermalink
pagespermalink
プリレンダリングされたページを書き込むディレクトリです。デフォルトは build
です。
assetspermalink
静的なアセット (static
のコンテンツと、SvelteKit が生成するクライアントサイドの JS と CSS) を書き込むディレクトリです。通常は pages
と同じにするべきで、デフォルトでは、それがどんな値だったとしても、pages
の値になります。しかし、まれな状況では、出力されるページとアセットを別々の場所にする必要があるかもしれません。
fallbackpermalink
SPA モード向けにフォールバックページ(fallback page)を指定します。例えば、index.html
や 200.html
、404.html
などです。
precompresspermalink
true
の場合、brotli や gzip でファイルを事前圧縮(precompress)します。これによって .br
ファイルや .gz
ファイルが生成されます。
strictpermalink
デフォルトでは adapter-static
は、アプリの全てのページとエンドポイント (もしあれば) がプリレンダリングされているか、もしくは fallback
オプションが設定されているかをチェックします。このチェックは、アプリの一部が最終的な出力に含まれずアクセスできない状態なのに誤って公開されてしまうのを防ぐために存在します。もし、それでも良いことがわかっている場合 (例えばあるページが条件付きでしか存在しない場合)、strict
を false
に設定してこのチェックをオフにすることができます。
GitHub Pagespermalink
GitHub Pages 向けにビルドするときは、paths.base
をあなたのリポジトリ名に合わせて更新するようにしてください。サイトが root からではなく https://your-username.github.io/your-repo-name から提供されるためです。
GitHub が提供する Jekyll が、あなたのサイトを管理するのを防ぐために、空の .nojekyll
ファイルを static
フォルダに追加する必要があります。
GitHub Pages 向けの設定は以下のようになるでしょう:
ts
importCannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.adapter from'@sveltejs/adapter-static' ;constdev =process .argv .includes ('dev');/** @type {import('@sveltejs/kit').Config} */constconfig = {kit : {adapter :adapter (),paths : {Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'. Type 'string' is not assignable to type '"" | `/${string}` | undefined'.2322Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'. Type 'string' is not assignable to type '"" | `/${string}` | undefined'.: base dev ? '' :process .env .BASE_PATH ,}}};
GitHub actions を使用して、サイトが変更されたときに自動で GitHub Pages にデプロイすることができます。サンプルの workflow はこちらです:
yaml
name: Deploy to GitHub Pageson:push:branches: 'main'jobs:build_site:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3# If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`# - name: Install pnpm# uses: pnpm/action-setup@v2# with:# version: 8- name: Install Node.jsuses: actions/setup-node@v3with:node-version: 18cache: npm- name: Install dependenciesrun: npm install- name: buildenv:BASE_PATH: '/your-repo-name'run: |npm run buildtouch build/.nojekyll- name: Upload Artifactsuses: actions/upload-pages-artifact@v1with:# this should match the `pages` option in your adapter-static optionspath: 'build/'deploy:needs: build_siteruns-on: ubuntu-latestpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deployid: deploymentuses: actions/deploy-pages@v1