Giter Club home page Giter Club logo

sveltekit-gh-pages's Introduction

sveltekit-gh-pages

Minimal static SvelteKit set-up made deployable to GitHub Pages.

1) Use the static adapter

Install the SvelteKit static adapter to prerender the app.

package.json

  "devDependencies": {
+   "@sveltejs/adapter-static": "^3.0.1",
    "@sveltejs/kit": "^2.5.4",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "gh-pages": "^6.1.1",
    "svelte": "^4.2.12",
    "vite": "^5.1.6"
  }

svelte.config.js

+ import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
+   adapter: adapter(),
  },
};

export default config;

Ensure your top-level +layout.js exports prerender = true. Note that for SvelteKit version 2, trailingSlash should be set to "always" so that the app does not redirect the URL to /about.

// src/routes/+layout.js
export const prerender = true;

export const trailingSlash = "always";

2) Modify paths.base in the config

kit.paths.base should be your repo URL subpath (see the Vite docs). In the example below, replace /sveltekit-gh-pages with your repository name.

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
+   paths: {
+     base: process.env.NODE_ENV === "production" ? "/sveltekit-gh-pages" : "",
+   },
  },
};

export default config;

Note: You will also need to prepend relative paths with the SvelteKit base path so that your app can build successfully for production.

<script>
  import { base } from "$app/paths";
</script>

<a href="{base}/about">About</a>

3) Add a .nojekyll file to the /static folder

The last step is to add an empty .nojekyll file to the static folder to bypass Jekyll on GitHub Pages. SvelteKit will copy static assets to the final build folder.

package.json

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "deploy": "gh-pages -d build -t true"
  }
}

The deploy script

The deploy script instructs gh-pages to do the following:

  • -d build: Publish the build folder
  • -t true: Include dotfiles (e.g., .nojekyll)

Quick start

Use degit to quickly scaffold a new project from this repository:

npx degit metonym/sveltekit-gh-pages my-app
cd my-app && npm install

Deploying to GitHub Pages

First, build the app by running npm run build.

Then, run npm run deploy to deploy the app to GitHub Pages.

sveltekit-gh-pages's People

Contributors

metonym avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

sveltekit-gh-pages's Issues

npm run deploy doesn't change img path

Hi.

I have made a simple app using your repository. I tried to put a image in a img element. In my code I have something like this

<script>
	import logo from '$lib/images/logo.png';
</script>

<header>
	<div class="corner">
		<a href="https://www.mypersonalweb.gov.co/">
			<img src="{logo}" alt="My personal web" />
		</a>
	</div>
</header>

But when I go to check the img src after npm run deploy i got:

<img src="/sveltekit-gh-pages/_app/immutable/assets/defensoria-pueblo.1dc2ac36.png" alt="Defensoría del Pueblo de Colombia" class="svelte-1st7820">

I tried to change svelte.config.js to:

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    paths: {
      base: "/formulario-app",
    },
  },
};

export default config;

But doesn't work.

Any ideas ?

Using with custom domain

Great tool! It's really useful for quickly getting a sveltekit project on github pages.

One issue I'm having is getting a CNAME file to propagate from static folder to output, the same way one does with .nojekyll. It simply doesn't propagate. I can edit the custom domain manually, which causes github to just make a commit that puts a CNAME file into the gh-pages branch, but any time I make other merges to main, it overwrites this. Any ideas?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.