Deploy to GitHub Actions

.github/workflows/publish.yml

@@ -0,0 +1,68 @@
+name: publish-to-github-pages
+on:
+    push:
+        branches:
+            - master
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: "pages"
+    cancel-in-progress: false
+
+jobs:
+    cache-and-install:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout 🛎️
+              uses: actions/checkout@v4
+
+            - uses: pnpm/action-setup@v4
+              name: Install pnpm 📦
+              with:
+                  version: 8
+                  run_install: false
+
+            - name: Install Node.js 🚀
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: "pnpm"
+
+            - name: Install dependencies 📥
+              run: pnpm install
+
+    build:
+        runs-on: ubuntu-latest
+        needs: cache-and-install
+
+        steps:
+            - name: Setup Pages ⚙️
+              uses: actions/configure-pages@v4
+              with:
+                  static_site_generator: next
+
+            - name: Build with Next.js 🏗️
+              run: pnpm run build
+
+            - name: Upload artifact 📡
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: ./out
+
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        runs-on: ubuntu-latest
+        needs: build
+
+        steps:
+            - name: Publish to GitHub Pages 🚀
+              id: deployment
+              uses: actions/deploy-pages@v4

app/layout.tsx

@@ -20,6 +20,7 @@ export const metadata: Metadata = {
 		card: "summary_large_image",
 		site: "@getRubyApp",
 	},
+	metadataBase: new URL("https://rubyapp.co"),
 };
 
 export default function RootLayout({

next.config.mjs

@@ -1,3 +1,9 @@
 import { withContentCollections } from "@content-collections/next";
+import withExportImages from "next-export-optimize-images";
 
-export default withContentCollections();
+export default async function config() {
+	const config = await withExportImages({
+		output: "export",
+	});
+	return withContentCollections(config);
+}

package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev --turbo",
-		"build": "next build",
+		"build": "next build && next-export-optimize-images",
 		"start": "next start",
 		"lint": "next lint"
 	},
@@ -23,6 +23,7 @@
 		"@types/react-dom": "^18",
 		"eslint": "^8",
 		"eslint-config-next": "14.2.5",
+		"next-export-optimize-images": "^4.5.0",
 		"postcss": "^8",
 		"tailwindcss": "^3.4.7",
 		"typescript": "^5"