Search for a command to run...
Learn how to deploy Next.js app or any static site generator to GitHub pages with new GitHub actions.
A Filipino self-taught software engineer, open-source maintainer, cybersecurity researcher, tech community builder, Web3 enthusiast, and technopreneur from the Philippines. 💻💖☕
No comments yet. Be the first to comment.
You'll learn how to set up thirdweb Engine instantly on your local machine.
Learn how to deploy instantly your self-hosted thirdweb Engine on Railway in less than minutes.
You'll learn how to quickly set up a Buy Me a Coffee button for your open source project on GitHub.
Learn how to recover the ownership of your thirdweb pre-built smart contract if your admin wallet address has been compromised.
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.
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 http://localhost:3000.
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.
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! 🏋️
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... https://opensource.warengonzaga.com/sample-nextjs-app
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... 👋