Skip to content

Commit f19d50a

Browse files
vijaythecodervijaythecoder
authored
Initial commit
0 parents  commit f19d50a

21 files changed

+6198
-0
lines changed

‎.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.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: 94 additions & 0 deletions
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: ["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 }}/package.json" ]; then
44+
echo "manager=npm" >> $GITHUB_OUTPUT
45+
echo "command=ci" >> $GITHUB_OUTPUT
46+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
47+
exit 0
48+
else
49+
echo "Unable to determine package manager"
50+
exit 1
51+
fi
52+
53+
- name: Setup Node
54+
uses: actions/setup-node@v4
55+
with:
56+
node-version: "lts/*"
57+
cache: ${{ steps.detect-package-manager.outputs.manager }}
58+
59+
- name: Setup Pages
60+
uses: actions/configure-pages@v4
61+
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+
73+
- name: Install dependencies
74+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
75+
76+
- name: Build with Next.js
77+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
78+
79+
- name: Upload artifact
80+
uses: actions/upload-pages-artifact@v3
81+
with:
82+
path: ./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

‎.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
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: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
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+
Now with Next.js App Router support! If you need Pages Router support [click here](https://github.com/gregrickaby/nextjs-github-pages/releases/tag/pages_dir).
6+
7+
> ⚠️ 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).
8+
9+
---
10+
11+
## Configure Next.js
12+
13+
### Next.js Config
14+
15+
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.
16+
17+
1. Open the `next.config.mjs` file
18+
2. Add the following:
19+
20+
```js
21+
/** @type {import('next').NextConfig} */
22+
const nextConfig = {
23+
/**
24+
* Enable static exports for the App Router.
25+
*
26+
* @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
27+
*/
28+
output: "export",
29+
30+
/**
31+
* Set base path. This is the slug of your GitHub repository.
32+
*
33+
* @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
34+
*/
35+
basePath: "/nextjs-github-pages",
36+
37+
/**
38+
* Disable server-based image optimization. Next.js does not support
39+
* dynamic features with static exports.
40+
*
41+
* @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
42+
*/
43+
images: {
44+
unoptimized: true,
45+
},
46+
};
47+
48+
export default nextConfig;
49+
```
50+
51+
3. Save the `next.config.mjs`
52+
53+
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.
54+
55+
```treeview
56+
.
57+
├── app/
58+
├── public/
59+
│ └── .nojekyll
60+
├── next.config.js
61+
```
62+
63+
Perfect! This is all you need to configure Next.js to deploy on GitHub Pages.
64+
65+
### Add base path to `page.tsx`
66+
67+
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.
68+
69+
1. Open `app/page.tsx`
70+
2. Find the `Image` components
71+
3. Add `/nextjs-github-pages/` (or the slug of your GitHub repository) to the `src` prop:
72+
73+
```tsx[class="line-numbers"]
74+
<Image
75+
src="/nextjs-github-pages/vercel.svg"
76+
alt="Vercel Logo"
77+
className={styles.vercelLogo}
78+
width={100}
79+
height={24}
80+
priority
81+
/>
82+
```
83+
84+
4. Save the `page.tsx` file
85+
86+
Learn more by reading the official documentation [for basePath and images](https://nextjs.org/docs/app/api-reference/next-config-js/basePath#images).
87+
88+
---
89+
90+
## Configure GitHub Repository
91+
92+
Next you need to configure Github for automated deployments via GitHub Actions.
93+
94+
### Enable GitHub Pages
95+
96+
The following settings use the [Github Action Deploy Pages](https://github.com/actions/deploy-pages) to deploy. I prefer this workflow because you don't need to generate SSH keys or use a personal access token.
97+
98+
1. Go to your repository's **Settings** tab
99+
2. Click "Pages" in the sidebar
100+
3. Under "Build and Deployment", select "GitHub Actions" as the source:
101+
102+
![screenshot of github pages settings](https://github.com/gregrickaby/nextjs-github-pages/assets/200280/a5f757c3-f515-4ca2-aadf-d2979c2c3bf5)
103+
104+
### Setup GitHub Action
105+
106+
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.
107+
108+
1. Create `.github/workflows/deploy.yml` file
109+
2. Paste the contents of <https://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml>
110+
3. Save the `deploy.yml` file
111+
112+
### Push to GitHub
113+
114+
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.
115+
116+
```bash
117+
git add . && git commit -m "Initial commit" && git push
118+
```
119+
120+
You should see your site deployed to GitHub Pages in a few minutes. 🚀
121+
122+
---
123+
124+
## Wrap up
125+
126+
Thanks for reading and I hope this helps. If you noticed someting wrong, please [file an issue](https://github.com/gregrickaby/nextjs-github-pages/issues). Good luck! 🍻
127+
128+
---

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
}
28+
29+
@layer utilities {
30+
.text-balance {
31+
text-wrap: balance;
32+
}
33+
}

0 commit comments

Comments
 (0)