📌

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

2021/05/27に公開

Node.js

概要:

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

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

環境

svelte: 3.17.3
sapper: 0.28.0

追加

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

yarn dev

export

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

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

yarn export

参考のデモページ

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

参考のコード

上記 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

...

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

概要:

環境

関連

追加

参考のデモページ

参考のコード

更新

Discussion