Chris Lee Cleecanth

The Simplest Svelte Static Site Generator

Assuming you don't want to statically export a Sapper app, most of the parts to build a simple SSG for Svelte already exist. The only thing that is missing is the tooling ('only').

However, you don't need a lot to get things going: just a couple of rollup builds and a config file will get you most of the way there. Just some glue.

What follows is a bunch of rambling, half thought out thoughts on how I would probably go about this. Most of the stuff discussed here is stuff I've actually done or half done or am in the process of doing with varying degrees of success. It is something I'll be spending more time on in the future. There are other things I have done, want to do, or think would be a good idea that are not listed here as they don't fall into the scope of a simple SSG.

*Dislaimer: This is how I would build an SSG, this isn't the only way, but I like this approach as there are a bunch of compile-time optimisations you can per

Git Cheat Sheet

Commands

Getting Started

git init

or

	/**
	* Basic example of routerless store based routing.
	* To understand what is going on check out
	* https://svelte.dev/tutorial/writable-stores
	* https://www.npmjs.com/package/feather-route-matcher
	*/


	// stores.js

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	import React, { Component } from 'react';
	import './App.css';
	import { SearchUI } from './SearchUIWrapper';

	class App extends Component {

	getTemplateContent() {
	return `
	<div class="coveo-result-frame">
	<div class='coveo-result-row'>

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	// HTML files: try the network first, then the cache.
	// Other files: try the cache first, then the network.
	// Both: cache a fresh version if possible.
	// (beware: the cache will grow and grow; there's no cleanup)

	const cacheName = 'files';

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	{
	"type": "Program",
	"body": [
	{
	"orginal": "<h1>Hello ",
	"type": "ContentStatement",
	"value": "<h1>Hello "
	// ...
	},
	{

	/**
	* Print Stylesheet fuer Deinewebsite.de
	* @version 1.0
	* @lastmodified 16.06.2016
	*/

	@media print {

	/* Inhaltsbreite setzen, Floats und Margins aufheben */
	/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */

	$z-indexes: (
	main: (
	above-inherit: (),
	nested: (
	low,
	middle,
	high
	),
	tooltip: ()
	),