github pages example

solidjs · Mar 12, 2024 · 9fde1d0 · 9fde1d0
1 parent 4f019cf
commit 9fde1d0
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 23 deletions.
diff --git a/.github/workflows/deploy.yml b/.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
diff --git a/README.md b/README.md
@@ -3,8 +3,7 @@
 Demo app based on [Vue Hackernews 2.0](https://github.com/vuejs/vue-hackernews-2.0). It is powered by [`solid-start`](https://github.com/solidjs/solid-start);
 
 You can view it on:
-[Netlify Functions](https://solid-start-hn.netlify.app/).
-[Netlify Edge](https://solid-hackernews-edge.netlify.app/).
+[Github Pages](https://solidjs.github.io/solid-hackernews/).
 
 ## Developing
 

diff --git a/app.config.ts b/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,
   },
 });
diff --git a/src/app.tsx b/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 />

diff --git a/src/components/comment.tsx b/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} />

diff --git a/src/components/nav.tsx b/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="https://github.com/solidjs/solid"
           target="_blank"
           rel="noreferrer"
         >
           Built with Solid
-        </a>
+        </A>
       </nav>
     </header>
   );

diff --git a/src/routes/[...stories].tsx b/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">

diff --git a/src/routes/stories/[id].tsx b/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>