Friday, 28 October, 2022 UTC
Summary
GitHub pages can be a simple and easy-to-use hosting solution for your NextJs learning projects. Let's see how we can deploy a first Hello world app to GitHub Pages.
First, we will need to create a blank new GitHub repo. I will name the repo
nextjs-helloworld.Next from the Setting tab of the repo go to the Pages menu and select the GitHub Actions option.
This will allow us to set de project build flow as Next Js.
Finally, GitHub will generate a
.github/workflows/pages.yml page for us to describe the deploy flow for GitHub pages.So far so good. For the moment our project is empty, so let's make it a NextJs project! We will first check out the git project on our local machine.
git clone https://github.com/your_github_username/nextjs-helloworld.gitIt will only contain the
pages.yml file. Let's go ahead and install NextJs and React.npm install next react react-domBe sure to add to your project a
.gitignore file for the node_modules and Next files. /node_modules
.nextWill create a
pages folder containing an index.js file. Inside this file will have a simple React component with just a Hello world text. export default () => (
<div>
<p>Hello World!</p>
</div>
)Next, save all and push all to GitHub.
git commit -am "added first component"
git pushWith all of this in place, Github will start the deployment to Github pages. Be sure to check that the build status is green.
And finally, you can see your live project at:
https://daniel-jscraft.github.io/nextjs-first/Just be sure to use your real Github username.
If you want you can download my code from here. Just be sure to run
npm install and npm run dev to start the project.