add github pages example

Author: ryansolid

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+# https://github.com/actions/deploy-pages#usage
+name: Deploy to GitHub Pages
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - github-pages
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - run: pnpm install
+      - run: BASE_URL="/solid-hackernews" pnpm run build
+        env:
+          NITRO_PRESET: github_pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./.output/public
+
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

app.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from "@solidjs/start/config";
 
+const baseURL = process.env.BASE_URL || "";
+
 export default defineConfig({
+  ssr: false,
   server: {
-    preset: "netlify",
+    preset: "github_pages",
+    baseURL,
   },
 });

src/app.tsx

@@ -5,9 +5,12 @@ import { Suspense } from "solid-js";
 import "./app.css";
 import Nav from "./components/nav";
 
+const base = import.meta.env.SERVER_BASE_URL;
+
 export default function App() {
   return (
     <Router
+      base={base}
       root={(props) => (
         <>
           <Nav />

src/components/comment.tsx

@@ -1,4 +1,5 @@
 import { createSignal, For, Show } from "solid-js";
+import { A } from "@solidjs/router";
 import type { CommentDefinition } from "../types";
 
 const pluralize = (n: number) => n + (n === 1 ? " reply" : " replies");
@@ -9,7 +10,7 @@ export default function Comment(props: { comment: CommentDefinition }) {
   return (
     <li class="comment">
       <div class="by">
-        <a href={`/users/${props.comment.user}`}>{props.comment.user}</a>{" "}
+        <A href={`/users/${props.comment.user}`}>{props.comment.user}</A>{" "}
         {props.comment.time_ago} ago
       </div>
       <div class="text" innerHTML={props.comment.content} />

src/components/nav.tsx

@@ -1,30 +1,32 @@
+import { A } from "@solidjs/router";
+
 export default function Nav() {
   return (
     <header class="header" $ServerOnly>
       <nav class="inner">
-        <a href="/">
+        <A href="/">
           <strong>HN</strong>
-        </a>
-        <a href="/new">
+        </A>
+        <A href="/new">
           <strong>New</strong>
-        </a>
-        <a href="/show">
+        </A>
+        <A href="/show">
           <strong>Show</strong>
-        </a>
-        <a href="/ask">
+        </A>
+        <A href="/ask">
           <strong>Ask</strong>
-        </a>
-        <a href="/job">
+        </A>
+        <A href="/job">
           <strong>Jobs</strong>
-        </a>
-        <a
+        </A>
+        <A
           class="github"
           href="http://github.com/solidjs/solid"
           target="_blank"
           rel="noreferrer"
         >
           Built with Solid
-        </a>
+        </A>
       </nav>
     </header>
   );

src/routes/[...stories].tsx

@@ -1,5 +1,6 @@
 import {
   createAsync,
+  A,
   type RouteDefinition,
   cache,
   type RouteSectionProps,
@@ -48,13 +49,13 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a
+          <A
             class="page-link"
             href={`/${type()}?page=${page() - 1}`}
             aria-label="Previous Page"
           >
             {"<"} prev
-          </a>
+          </A>
         </Show>
         <span>page {page()}</span>
         <Show
@@ -65,13 +66,13 @@ export default function Stories(props: RouteSectionProps) {
             </span>
           }
         >
-          <a
+          <A
             class="page-link"
             href={`/${type()}?page=${page() + 1}`}
             aria-label="Next Page"
           >
             more {">"}
-          </a>
+          </A>
         </Show>
       </div>
       <main class="news-list">

src/routes/stories/[id].tsx

@@ -1,6 +1,7 @@
 import {
   cache,
   createAsync,
+  A,
   type RouteDefinition,
   type RouteSectionProps,
 } from "@solidjs/router";
@@ -25,15 +26,15 @@ export default function Story(props: RouteSectionProps) {
     <Show when={story()}>
       <div class="item-view">
         <div class="item-view-header">
-          <a href={story()!.url} target="_blank">
+          <A href={story()!.url} target="_blank">
             <h1>{story()!.title}</h1>
-          </a>
+          </A>
           <Show when={story()!.domain}>
             <span class="host">({story()!.domain})</span>
           </Show>
           <p class="meta">
             {story()!.points} points | by{" "}
-            <a href={`/users/${story()!.user}`}>{story()!.user}</a>{" "}
+            <A href={`/users/${story()!.user}`}>{story()!.user}</A>{" "}
             {story()!.time_ago} ago
           </p>
         </div>