Deploy Next.js App to GitHub Pages with new GitHub Actions

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.

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

Intro GIF

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. ๐Ÿ‘‡

GitHub pages settings

Now change it to the new GitHub actions! ๐Ÿ˜Š

Choose new GitHub actions

You'll see a recommended workflow here, let's configure it! โ˜•

Configure the Next.js workflow

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. ๐Ÿ”ฅ

Commit the Next.js workflow

It is now building something similar to Vercel! ๐Ÿ’ช๐Ÿ˜Š

Building

Now deploying directly to GitHub pages... ๐Ÿ‘€

Deploying to GitHub pages

and... it's done with a URL. ๐Ÿ˜…

Done building and deployment

Here's what it looks like... https://opensource.warengonzaga.com/sample-nextjs-app

Published and it works

Don't forget to configure your custom domain via GitHub pages settings. ๐Ÿ˜Š

๐Ÿค” Conclusion

Conclusion GIF

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... ๐Ÿ‘‹

ย