svelte + sapperで、SSG 静的サイトの出力と netlifyデプロイ

1 min read

概要:

svelte + sapper で、静的サイト構築等のメモとなります

  • svelteも知識が無いのですが、sapperでSSG可能のようでしたので試した内容となります

環境

  • svelte: 3.17.3
  • sapper: 0.28.0

関連

https://sapper.svelte.dev/docs#Getting_started


追加

npx degit "sveltejs/sapper-template#rollup" sapper_sample

yarn dev
  • export

sapper/export に、出力されました 、netlify等ホスティングにデプロイします

  • 数ページで、約10秒以下で サイト全体出力されましたので。速い感じはしました
yarn export

参考のデモページ

https://cms-kuc-sapper1.netlify.app


参考のコード

https://github.com/kuc-arc-f/sapper_2_1sample
  • 上記 npxで、サンプルページが表示されましたが。下層ページ等を追加しました

  • 実装など、

src/routes/posts/index.json.js , データは src/lib/LibData.js に置く例です

index.json.js

import posts from '../../lib/LibData.js';

const contents = JSON.stringify(posts.map(post => {
	return {
		title: post.title,
		slug: post.slug
	};
}));

export function get(req, res) {
	res.writeHead(200, {
		'Content-Type': 'application/json'
	});

	res.end(contents);
}
  • src/routes/posts/index.svelte , preloadが読込まるようです,fetchで js配列を設定
index.svelte
<script context="module">
	export function preload() {
		return this.fetch(`posts.json`).then(r => r.json()).then(posts => {
//console.log(posts)
			return { posts };
		});
	}
</script>

<script>
	export let posts;
console.log(posts)
</script>

<style>
	ul {
		margin: 0 0 1em 0;
		line-height: 1.5;
	}
</style>

<svelte:head>
	<title>Posts</title>
</svelte:head>
<h1>postsIndex</h1>
<hr />
<ul>
	{#each posts as post}
		<li><a rel="prefetch" href="posts/{post.slug}">{post.title}</a></li>
	{/each}
</ul>


  • 詳細, src/routes/posts/[slug].svelte

更新

  • 外部jsonファイルを読込む例を追加しました : 2021/05/28

https://github.com/kuc-arc-f/sapper_2_2json

...