Deploy Next.js App to GitHub Pages with new GitHub Actions
Learn how to deploy Next.js app or any static site generator to GitHub pages with new GitHub actions.
3 min read
Hey there, GitHub just recently posted a tweet about deploying any static site generator to GitHub pages using their new GitHub actions. Let me show you below. 👇
For your reference here's the example setup I made with this tutorial. 😁
Today we are going to deploy a sample next.js app to GitHub pages using new GitHub actions to package your sample next.js app. The old way of doing this is that you need to use something like gh-pages package just to make it work.
Basically, it creates a separate branch just for your exported static site and it works like a magic. Let's learn the new way! Sounds good? Let's go! 💪🔥
Here are the basic requirements for today's tutorial.
- GitHub account. (obviously 😅)
- Code editor. (VS Code 👀)
- Sample Next.js app.
📦 Sample Next.js App
Let's assume that you have the GitHub account and code editor ready. Now let's clone or fork my sample Next.js app to your local machine. I'm gonna use GitHub CLI for a quick repo clone. 👀
gh repo clone warengonzaga/sample-nextjs-app
After that, do
yarn install and
yarn dev to start a server on
Feel free to edit the sample next.js to your liking. This sample next.js app is based on
create-next-app so nothing special here.
🖥️ Set Up Repository
If you fork the sample repo and clone locally, you are good to skip this part. 💪
If you clone the repo without forking it, follow these instructions from GitHub! 🏋️
🧰 Pages and Actions
Here's the exciting part, now navigate to the Settings of your repository and click Pages. You'll see it like this. 👇
Now change it to the new GitHub actions! 😊
You'll see a recommended workflow here, let's configure it! ☕
We don't need to configure this for now as we are deploying a sample next.js app therefore committing this workflow to your repository is a go signal. 🔥
It is now building something similar to Vercel! 💪😊
Now deploying directly to GitHub pages... 👀
and... it's done with a URL. 😅
Here's what it looks like...
Don't forget to configure your custom domain via GitHub pages settings. 😊
To end this, unlike the old method this one is much easier now, as you may notice there is no additional branch created from the process, and all the building and deployment process happens on GitHub actions with the help of Next.js workflow. 💪
This update is still in beta at the time of this writing and hopefully, it will improve more in the future. If you have feedback about this fantastic update you can participate by going to GitHub feedback page. 👍
To learn more about this update, read this blog. 📖
Like this blog? 🤔 Please consider supporting me on GitHub Sponsors or nominate me (@warengonzaga) as a GitHub Star. Your support means the world to me. 🥰
See you on my next blog... 👋