Skip to content

Commit

Permalink
Fix README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
conradolandia committed Aug 7, 2024
1 parent 21cc91c commit 0cb2235
Showing 1 changed file with 20 additions and 90 deletions.
110 changes: 20 additions & 90 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,107 +1,37 @@
# sveltekit-gh-pages
# Spyder-Website

> Minimal static [SvelteKit](https://kit.svelte.dev/) set-up made deployable to [GitHub Pages](https://metonym.github.io/sveltekit-gh-pages/).
Minimal static [SvelteKit](https://kit.svelte.dev/) set-up made deployable to [GitHub Pages](https://metonym.github.io/sveltekit-gh-pages/). Based on [sveltekit-gh-pages](https://metonym.github.io/sveltekit-gh-pages/)

## 1) Use the static adapter
- PostCSS framework provided by [TailwindCSS](https://tailwindcss.com/)
- Icons from the [Svelte Icons Pack](https://leshak.github.io/svelte-icons-pack/)
- Markdown files processed with [mdsvex](https://mdsvex.pngwn.io/)

Install the [SvelteKit static adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-static) to prerender the app.
## Deployment

**package.json**
### 1) Install dependencies with NPM:

```diff
"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"
}
```bash
npm install
```

**svelte.config.js**

```diff
+ 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](https://kit.svelte.dev/docs/page-options#trailingslash) should be set to "always" so that the app does not redirect the URL to `/about`.

```js
// 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](https://vitejs.dev/guide/static-deploy.html#github-pages)). In the example below, replace `/sveltekit-gh-pages` with your repository name.

```diff
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;
### 2) Test the website (optional)

```bash
npm run dev
```

**Note:** You will also need to prepend relative paths with the [SvelteKit `base` path](https://kit.svelte.dev/docs/modules#$app-paths) so that your app can build successfully for production.
And visit your local copy at [https://localhost:5173](https://localhost:5173)

```svelte
<script>
import { base } from "$app/paths";
</script>
### 3) Build the website

<a href="{base}/about">About</a>
```bash
npm run build
```

## 3) Add a `.nojekyll` file to the `/static` folder
You can also test the built website with

The last step is to add an empty `.nojekyll` file to the static folder to [bypass Jekyll on GitHub Pages](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/). SvelteKit will copy `static` assets to the final build folder.

**package.json**

```json
{
"scripts": {
"dev": "vite dev",
"build": "vite build",
"deploy": "gh-pages -d build -t true"
}
}
```bash
npm run preview
```

**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`)

---

## 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.
And preview your built site at [https://localhost:5174](https://localhost:5174)

0 comments on commit 0cb2235

Please sign in to comment.