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
- Set up SvelteKit project using standard process
-
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 insrc/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
- each page can define a
- Rendering - generate some HTML to match
Static site generation#
adapter-static
documentation and github pages specifics which adds more steps
- Update
paths.base
to match repo name - add the
.nojeckyll
file to the static folder - More detail in
svelte.config.js