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. 😁

🤝 Intro

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! 💪🔥

📃 Requirements

Here are the basic requirements for today's tutorial.

1. GitHub account. (obviously 😅)
2. Code editor. (VS Code 👀)
3. 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 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.

🖥️ 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... https://opensource.warengonzaga.com/sample-nextjs-app

Don't forget to configure your custom domain via GitHub pages settings. 😊

🤔 Conclusion

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... 👋