Skip to content

SvelteKit and Github pages#

See also: foam-dev

Current status: "pretend" blog from SvelteKit documentation is working on local dev. However, publishing to github not working. The about and blog pages aren't working

Experiment #1 - Simple combination#

Using these instructions to work with this repo

Basic setup process

  1. Set up SvelteKit project using standard process

  2. Add the static adapter - way to generate static files from SvelteKit - specific to gh-pages

    Note: need to remove the existing adapter import 3. Modify the projects config file to use the static adapter 4. Modify the layout 5. Modify the package.json

To deploy npm run gh-pages based on changes to package.json

The original repo used routes/+page.svelte as the static content that was created

And that works.

Experiment #2 - Learn a bit more about SvelteKit#

Working through the svelte tutorial

Basic SvelteKit#

  • ??must be named +page.svelte?? Svelte files in src/routes define the pages/URLs for the app
  • +layout.svelte defines common layout for all sibling and child pages
  • use folder names surrounded by square brackets to define dynamic parameters
  • three tasks for SvelteKit
  • Routing - which route matches the request
  • Loading - get the data needed by the route
    • each page can define a load function to get the data - defining title and slug +page.server.js
    • use setHeaders to set response headers
    • use cookies
    • same with layouts +layout.server.js
    • src/lib can be used for common code
  • Rendering - generate some HTML to match

Static site generation#

adapter-static documentation and github pages specifics which adds more steps

  1. Update paths.base to match repo name
  2. add the .nojeckyll file to the static folder
  3. More detail in svelte.config.js