Skip to content

Commit 2c2f979

Browse files
seeReadCodeseeReadCode
authored
Initial commit
0 parents  commit 2c2f979

23 files changed

+6893
-0
lines changed

‎.github/FUNDING.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# These are supported funding model platforms
2+
3+
github: gregrickaby

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# PR Title
2+
3+
Closes <!-- github ticket number, e.g., #32 -->
4+
5+
## Description
6+
7+
Please describe what did you built or fixed?
8+
9+
## Screenshot
10+
11+
Could you please drop a screenshot of your feature or fix?
12+
13+
## Steps to Verify
14+
15+
Please walk through how to verify and test this feature or fix.

‎.github/dependabot.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
version: 2
3+
updates:
4+
- package-ecosystem: 'npm'
5+
directory: '/'
6+
schedule:
7+
interval: 'weekly'
8+
day: 'monday'

‎.github/workflows/deploy.yml‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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: ["main"]
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+
jobs:
28+
# Build job
29+
build:
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
35+
- name: Detect package manager
36+
id: detect-package-manager
37+
run: |
38+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
39+
echo "manager=yarn" >> $GITHUB_OUTPUT
40+
echo "command=install" >> $GITHUB_OUTPUT
41+
echo "runner=yarn" >> $GITHUB_OUTPUT
42+
exit 0
43+
elif [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
44+
echo "manager=pnpm" >> $GITHUB_OUTPUT
45+
echo "command=install" >> $GITHUB_OUTPUT
46+
echo "runner=pnpm" >> $GITHUB_OUTPUT
47+
npm install -g pnpm
48+
exit 0
49+
elif [ -f "${{ github.workspace }}/package.json" ]; then
50+
echo "manager=npm" >> $GITHUB_OUTPUT
51+
echo "command=ci" >> $GITHUB_OUTPUT
52+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
53+
exit 0
54+
else
55+
echo "Unable to determine package manager"
56+
exit 1
57+
fi
58+
59+
- name: Setup Node
60+
uses: actions/setup-node@v4
61+
with:
62+
node-version: "lts/*"
63+
cache: ${{ steps.detect-package-manager.outputs.manager }}
64+
65+
- name: Setup Pages
66+
uses: actions/configure-pages@v4
67+
68+
- name: Restore cache
69+
uses: actions/cache@v4
70+
with:
71+
path: |
72+
.next/cache
73+
# Generate a new cache whenever packages or source files change.
74+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
75+
# If source files changed but packages didn't, rebuild from a prior cache.
76+
restore-keys: |
77+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
78+
79+
- name: Install dependencies
80+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
81+
82+
- name: Build with Next.js
83+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
84+
85+
- name: Upload artifact
86+
uses: actions/upload-pages-artifact@v3
87+
with:
88+
path: ./out
89+
90+
# Deployment job
91+
deploy:
92+
environment:
93+
name: github-pages
94+
url: ${{ steps.deployment.outputs.page_url }}
95+
runs-on: ubuntu-latest
96+
needs: build
97+
steps:
98+
- name: Deploy to GitHub Pages
99+
id: deployment
100+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎LICENSE‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
The MIT License (MIT)
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# Next.js GitHub Pages
2+
3+
Deploy Next.js to GitHub Pages with GitHub Actions. [View the deployed app](https://gregrickaby.github.io/nextjs-github-pages/) 🚀
4+
5+
> ⚠️ Heads up! GitHub Pages _does not_ support serverless or edge functions. This means dynamic functionality will be disabled. See all the [unsupported features](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features).
6+
7+
---
8+
9+
## Configure Next.js
10+
11+
### Next.js Config
12+
13+
First, you need to configure Next.js to [deploy static exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports). This is required for GitHub Pages to work.
14+
15+
1. Open the `next.config.ts` file
16+
2. Add the following:
17+
18+
```typescript
19+
import type { NextConfig } from "next";
20+
21+
const nextConfig: NextConfig = {
22+
/**
23+
* Enable static exports.
24+
*
25+
* @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
26+
*/
27+
output: "export",
28+
29+
/**
30+
* Set base path. This is the slug of your GitHub repository.
31+
*
32+
* @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
33+
*/
34+
basePath: "/nextjs-github-pages",
35+
36+
/**
37+
* Disable server-based image optimization. Next.js does not support
38+
* dynamic features with static exports.
39+
*
40+
* @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
41+
*/
42+
images: {
43+
unoptimized: true,
44+
},
45+
};
46+
47+
export default nextConfig;
48+
```
49+
50+
3. Save the `next.config.ts`
51+
52+
4. Finally, place a `.nojekyll` file in the `/public` directory to disable GitHub Pages from trying to create a [Jekyll](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/) website.
53+
54+
```treeview
55+
.
56+
├── app/
57+
├── public/
58+
│ └── .nojekyll
59+
├── next.config.ts
60+
```
61+
62+
Perfect! This is all you need to configure Next.js to deploy on GitHub Pages.
63+
64+
### Add base path to `page.tsx`
65+
66+
Next, you will need to add the base path to images in `page.tsx` file. This is required for the images to appear on GitHub Pages.
67+
68+
1. Open `app/page.tsx`
69+
2. Find the `Image` components
70+
3. Add `/nextjs-github-pages/` (or the slug of your GitHub repository) to the `src` prop:
71+
72+
```tsx
73+
<Image
74+
src="/nextjs-github-pages/vercel.svg"
75+
alt="Vercel Logo"
76+
className={styles.vercelLogo}
77+
width={100}
78+
height={24}
79+
priority
80+
/>
81+
```
82+
83+
4. Save the `page.tsx` file
84+
85+
Learn more by reading the official documentation [for basePath and images](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath#images).
86+
87+
---
88+
89+
## Configure GitHub Repository
90+
91+
Now that Next.js is configured, you need to set up your GitHub repository to deploy to GitHub Pages.
92+
93+
### Setup GitHub Action
94+
95+
This is where the magic happens! This [workflow file](https://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml) will automatically build and deploy the app when you push to the `main` branch.
96+
97+
1. Create `.github/workflows/deploy.yml` file
98+
2. Paste the contents of <https://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml>
99+
3. Save the `deploy.yml` file
100+
101+
### Enable GitHub Pages
102+
103+
1. Go to your repository's **Settings** tab
104+
2. Click "Pages" in the sidebar
105+
3. Under "Build and Deployment", select "GitHub Actions" as the source:
106+
107+
![screenshot of github pages settings](https://dl.dropboxusercontent.com/s/vf74zv2wcepnt9w/Screenshot%202025-02-03%20at%2021.10.06.png?dl=0)
108+
109+
### Push to GitHub
110+
111+
Now that everything is configured, you can commit your code and push to GitHub. This will trigger the GitHub Action workflow and deploy your app to GitHub Pages.
112+
113+
```bash
114+
git add . && git commit -m "initial commit" && git push
115+
```
116+
117+
You should see your site deployed to GitHub Pages in a few minutes. 🚀
118+
119+
---
120+
121+
## Wrap up
122+
123+
Thanks for reading and I hope this helps. If you noticed someting wrong, please [open an issue](https://github.com/gregrickaby/nextjs-github-pages/issues). Cheers! 🍻
124+
125+
---

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "tailwindcss";
2+
3+
:root {
4+
--background: #ffffff;
5+
--foreground: #171717;
6+
}
7+
8+
@media (prefers-color-scheme: dark) {
9+
:root {
10+
--background: #0a0a0a;
11+
--foreground: #ededed;
12+
}
13+
}
14+
15+
body {
16+
color: var(--foreground);
17+
background: var(--background);
18+
font-family: Arial, Helvetica, sans-serif;
19+
}

‎app/layout.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { Metadata } from "next";
2+
import { Geist, Geist_Mono } from "next/font/google";
3+
import "./globals.css";
4+
5+
const geistSans = Geist({
6+
variable: "--font-geist-sans",
7+
subsets: ["latin"],
8+
});
9+
10+
const geistMono = Geist_Mono({
11+
variable: "--font-geist-mono",
12+
subsets: ["latin"],
13+
});
14+
15+
export const metadata: Metadata = {
16+
title: "Create Next App",
17+
description: "Generated by create next app",
18+
};
19+
20+
export default function RootLayout({
21+
children,
22+
}: Readonly<{
23+
children: React.ReactNode;
24+
}>) {
25+
return (
26+
<html lang="en">
27+
<body
28+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29+
>
30+
{children}
31+
</body>
32+
</html>
33+
);
34+
}

0 commit comments

Comments
 (0)