feat: deploy to GitHub Pages with adapter-static

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,5 +1,7 @@
 # Fluid Language
 
+[Visit the blog](https://jhwheeler.github.io/fluid_language/)
+
 My personal blog, built with [Svelte](https://svelte.dev), [SvelteKit](https://kit.svelte.dev) and [MDsveX](https://mdsvex.com).
 
 In this multi-lingual blog, I write about various topics, including philosophy, linguistics, and spirituality.

package.json

@@ -14,7 +14,7 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^8.56.0",

src/lib/components/ArticleMeta.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { base } from '$app/paths';
   import { formatDate } from '$lib/utils';
 
   export let date;
@@ -13,7 +14,7 @@
 
       {#each tags.split(',') as tag}
         <span>
-          <a href={`/?tag=${tag}`}>
+          <a href={`${base}/?tag=${tag}`}>
             #{tag}
           </a>
         </span>

src/lib/components/ArticlePreview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { base } from '$app/paths';
   import ArticleMeta from '$lib/components/ArticleMeta.svelte';
   import type { Post } from '$lib/types';
   import { type ComponentType, onMount } from 'svelte';
@@ -16,7 +17,7 @@
   });
 </script>
 
-<a href={`posts/${slug}`}>
+<a href={`${base}/posts/${slug}`}>
   <article
     class="flex flex-col gap-6 bg-amber-50 p-4 rounded-sm w-full text-slate-800 h-full bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 hover:bg-opacity-30 transition-opacity transform duration-300"
   >

src/posts/a-new-voice.md

@@ -21,4 +21,4 @@ I carry with me a deepening of my ability to integrate ideas and traditions toge
 
 I call in discipline to keep me focused and consistent in my creativity. I call in a teaching role in my community, sharing the wisdom and knowledge God has given me. I call in overflowing creativity to share with others. I call in the true expression of my voice as a vehicle for the Divine.
 
-These reflections inspired a poem: [Open Voice](/posts/open-voice).
+These reflections inspired a poem: [Open Voice](./open-voice).

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -2,30 +2,32 @@
   import ArticlePreview from '$lib/components/ArticlePreview.svelte';
   import { hasSeenIndexPageAnimations } from '$lib/stores';
   import { page } from '$app/stores';
+  import { browser } from '$app/environment';
   import { onMount } from 'svelte';
 
   export let data;
 
-  let showAnimations: boolean | null = null;
+  let mounted = !browser;
+  let showAnimations = false;
 
-  $: tag = $page.url.searchParams.get('tag');
+  $: tag = browser ? $page.url.searchParams.get('tag') : null;
   $: filteredPosts =
     tag && data?.posts?.length
       ? data?.posts?.filter((p) => p.tags.includes(tag))
       : data?.posts || [];
 
   onMount(() => {
-    // Hide animations if the user has seen them already or has set the `hideAnimations` query param to true
     showAnimations =
       !$hasSeenIndexPageAnimations && $page.url.searchParams.get('hideAnimations') !== 'true';
     hasSeenIndexPageAnimations.set(true);
+    mounted = true;
   });
 </script>
 
 <main
   class="p-4 md:p-8 flex flex-col items-center w-full h-dvh overflow-y-auto bg-gradient-to-b from-sea to-sand"
 >
-  {#if showAnimations !== null}
+  {#if mounted}
     <header class="mb-6 lg:mb-8 flex flex-col items-center w-full justify-center gap-4 text-center">
       <h1 class="text-4xl uppercase bg-clip-text text-transparent bg-cover" class:showAnimations>
         Fluid Language

src/routes/posts/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { base } from '$app/paths';
   import ArticleMeta from '$lib/components/ArticleMeta.svelte';
 
   export let data;
@@ -16,14 +17,14 @@
       <h1 class="text-3xl/tight">{data.metadata.title}</h1>
     </header>
 
-    <main>
+    <div>
       <svelte:component this={data.content} />
-    </main>
+    </div>
 
     <footer class="mt-6 flex flex-col gap-3">
       <ArticleMeta {...data.metadata} />
 
-      <a href="/" class="text-sm/4">&larr; Back</a>
+      <a href={`${base}/`} class="text-sm/4">&larr; Back</a>
     </footer>
   </article>
 </main>

svelte.config.js

@@ -1,21 +1,28 @@
-import preprocess from 'svelte-preprocess'
-import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import mdsvexConfig from './mdsvex.config.js'
-import { mdsvex } from 'mdsvex'
+import mdsvexConfig from './mdsvex.config.js';
+import { mdsvex } from 'mdsvex';
+
+const dev = process.argv.includes('dev') || process.argv.includes('preview');
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   extensions: ['.svelte', ...mdsvexConfig.extensions],
   preprocess: [
     vitePreprocess(),
     preprocess({
-      postcss: true
+      postcss: true,
     }),
     mdsvex(mdsvexConfig),
   ],
   kit: {
-    adapter: adapter()
+    adapter: adapter({
+      fallback: '404.html',
+    }),
+    paths: {
+      base: dev ? '' : '/fluid_language',
+    },
   },
 };