Skip to content

Commit e5f583f

Browse files
hendychuahendychua
committed
Changes to make nextjs static export work nicely with Github pages.
1 parent d3b9e4c commit e5f583f

File tree

7 files changed

+115
-8
lines changed

7 files changed

+115
-8
lines changed

‎.github/workflows/nextjs.yml

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
2+
#
3+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
4+
#
5+
name: Deploy Next.js site to Pages
6+
7+
on:
8+
# Runs on pushes targeting the default branch
9+
push:
10+
branches: ["github-pages"]
11+
12+
# Allows you to run this workflow manually from the Actions tab
13+
workflow_dispatch:
14+
15+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16+
permissions:
17+
contents: read
18+
pages: write
19+
id-token: write
20+
21+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23+
concurrency:
24+
group: "pages"
25+
cancel-in-progress: false
26+
27+
defaults:
28+
run:
29+
working-directory: ./airstrip-fe
30+
31+
jobs:
32+
# Build job
33+
build:
34+
runs-on: ubuntu-latest
35+
steps:
36+
- name: Checkout
37+
uses: actions/checkout@v4
38+
- name: Detect package manager
39+
id: detect-package-manager
40+
run: |
41+
echo "manager=yarn" >> $GITHUB_OUTPUT
42+
echo "command=install" >> $GITHUB_OUTPUT
43+
echo "runner=yarn" >> $GITHUB_OUTPUT
44+
- name: Check working directory
45+
run: |
46+
pwd
47+
ls -la
48+
- name: Setup Node
49+
uses: actions/setup-node@v4
50+
with:
51+
node-version: "20"
52+
cache-dependency-path: "./airstrip-fe/yarn.lock"
53+
cache: ${{ steps.detect-package-manager.outputs.manager }}
54+
- name: Setup Pages
55+
uses: actions/configure-pages@v5
56+
with:
57+
# Automatically inject basePath in your Next.js configuration file and disable
58+
# server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
59+
#
60+
# You may remove this line if you want to manage the configuration yourself.
61+
static_site_generator: next
62+
- name: Restore cache
63+
uses: actions/cache@v4
64+
with:
65+
path: |
66+
.next/cache
67+
# Generate a new cache whenever packages or source files change.
68+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
69+
# If source files changed but packages didn't, rebuild from a prior cache.
70+
restore-keys: |
71+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
72+
- name: Install dependencies
73+
run: |
74+
pwd
75+
ls -la
76+
${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
77+
- name: Build with Next.js
78+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
79+
- name: Upload artifact
80+
uses: actions/upload-pages-artifact@v3
81+
with:
82+
path: /home/runner/work/airstrip/airstrip/airstrip-fe/out
83+
84+
# Deployment job
85+
deploy:
86+
environment:
87+
name: github-pages
88+
url: ${{ steps.deployment.outputs.page_url }}
89+
runs-on: ubuntu-latest
90+
needs: build
91+
steps:
92+
- name: Deploy to GitHub Pages
93+
id: deployment
94+
uses: actions/deploy-pages@v4

‎airstrip-fe/next.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
output: 'export',
4+
basePath: '/airstrip',
5+
assetPrefix: '/airstrip',
6+
};
7+
8+
module.exports = nextConfig;

‎airstrip-fe/next.config.mjs

-4
This file was deleted.

‎airstrip-fe/src/components/github-repo-button/GithubRepoButton.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { GITHUB_REPO_URL, PRODUCT_NAME } from '@/constants';
44
import { Button } from '@mantine/core';
55
import Image from 'next/image';
6+
import githubMark from '../../../public/github-mark.svg';
67

78
export default function GithubRepoButton({ variant }: { variant?: string }) {
89
return (
@@ -12,7 +13,7 @@ export default function GithubRepoButton({ variant }: { variant?: string }) {
1213
href={GITHUB_REPO_URL}
1314
target="_blank"
1415
leftSection={
15-
<Image alt="github" src="/github-mark.svg" width={20} height={20} />
16+
<Image alt="github" src={githubMark} width={20} height={20} />
1617
}
1718
>
1819
Check out {PRODUCT_NAME} on GitHub

‎airstrip-fe/src/components/landing/Footer.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Image from 'next/image';
66
import Logo from '../logo/Logo';
77
import classes from './Footer.module.css';
88
import Link from 'next/link';
9+
import githubMark from '../../../public/github-mark.svg';
910

1011
export default function Footer() {
1112
return (
@@ -16,7 +17,7 @@ export default function Footer() {
1617
</div>
1718
<Group gap="sm">
1819
<Link href={GITHUB_REPO_URL} target="_blank">
19-
<Image alt="github" src="/github-mark.svg" width={20} height={20} />
20+
<Image alt="github" src={githubMark} width={20} height={20} />
2021
</Link>
2122
<Text c="dimmed" size="sm">
2223
© {new Date().getFullYear()} {PRODUCT_NAME}.

‎airstrip-fe/src/components/landing/Hero.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ export default function Hero() {
2828
</div>
2929
<Card p={0} w="100%" withBorder shadow="lg" mb="xl">
3030
<AspectRatio w="100%" ratio={1.78}>
31-
<video src="/airstrip-demo.mp4" controls loop width="100%" />
31+
<video
32+
// repository name prefix because of github pages. ugly, but works for now.
33+
src={`/airstrip/airstrip-demo.mp4`}
34+
controls
35+
loop
36+
width="100%"
37+
/>
3238
</AspectRatio>
3339
</Card>
3440
</Container>

‎airstrip-fe/src/components/logo/Logo.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import classes from './Logo.module.css';
66
import Link from 'next/link';
77
import { Links } from '@/utils/misc/links';
88
import { PRODUCT_NAME } from '@/constants';
9+
import logoImage from '../../../public/logo.svg';
910

1011
export default function Logo({
1112
size,
@@ -18,7 +19,7 @@ export default function Logo({
1819
}) {
1920
const logo = (
2021
<Group gap="0">
21-
<Image alt="Logo" src="/logo.svg" width={size} height={size} />
22+
<Image alt="Logo" src={logoImage} width={size} height={size} />
2223
{withText && <Text fw="bold">{PRODUCT_NAME}</Text>}
2324
</Group>
2425
);

0 commit comments

Comments
 (0)