Ontwikkel een statisch gegenereerde website

[M4TThys123]

Deze opdracht is done als:

• [ ] jouw code een statische website ‌build;
• [ ] jouw code automatisch opnieuw gebuild wordt en gepubliceerd wordt naar de live site bij een push naar GitHub of na een update van de content(continuous deployment);
• [ ] de statische website online te bekijken is;
• [ ] documenteer het verschil in respons tijd en het het verschil in kilobytes.

[M4TThys123]

Bouw een statisch gegenereerde website

Om je pagina te laden zonder Server-Side Rendering, moet je de build van te voren renderen. Hiervoor ga ik een SvelteKit adapter gebruiken.

Install dependency

npm i -D @sveltejs/adapter-static@next

[M4TThys123]

Set up svelte.config.js

Na het installeren moet je nog svelte.config.js aanpassen

• [ ] Vervang sveltejs/adapter-auto met sveltejs/adapter-static
• [ ] Configureer de adapter met pages, assets, fallback.
• [ ] Voeg de prerender section toe.

svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null
    }),
  },;

export default config;

[M4TThys123]

Set up +layout.js

• [ ] Maak een +layout.js ->src/routes/+layout.js
• [ ] Defineer wat parameters in +layout.js

+layout.js

export const prerender = true;
export const ssr = true;
export const trailingSlash = 'ignore';

[M4TThys123]

Builden

Nu kan je de static files bouwen

npm run build

Voor het lokaal testen van uw gebouwde bestanden kunt u gebruiken

npm run preview

[M4TThys123]

In wezen bedient het lokaal uw gebouwde bestanden (niet de slanke bestanden, maar de gebouwde bestanden in uw build-directory). Om uw bestanden op de openbare server te publiceren (Netlify, Vercel, Surge.sh, GitHub-pagina's enz.) moet u kopiëren de inhoud van de map build/. Als u een service gebruikt voor het publiceren van uw website, waardoor u een submap moet gebruiken om uw statische bestanden te bedienen (bijvoorbeeld GitHub-pagina's), kunt u de paden gebruiken in de sectie config.kit:

paths: { base: '/your-repo-name', },