(CI/CD): Deploy Next.js (SSG) to GitHub Pages using GitHub Actions

hello youtube today we are going to deploy our microphone store into github pages using github actions the main reason to use github actions today is because every time we do a git push i don't want also to run a command to do the deployment i want just to push the code to github and then github takes care of everything automatically well it's not automatically because we will have to do some configuration but after that configuration is done then it will be automatically running for every push that we do to master if you are going to follow me along with your own application just make sure that your application when you run these two commands npm run builds and npm run export that you get this export successful message if you don't usually there are three main reasons for that or you are using get initial props or you are using get server side props or in the get static parts you are returning a fallback to true any of those three reasons will file the next export so keep that in mind and also read the messages that next js prints over here because usually they are quite nice okay just keep in mind also that by default this export command will not be in your package json so please add it before running that command okay now that we are on the same page we can go to our repository in my case is this one in your case it will be your own repository and click on actions and clicking on actions you will see that we have a lot of workflows to decide and the one we want we can come over here and click on the more continuous integration workflows and we will type node.js and the one we want is this one that says build and test a node.js project with npm we will click on setup this workflow and the first thing you see that you have to decide is the name of this file actually you can even call it isd isd it really doesn't matter the name of the file so in my case i will call it bruno dash deploy but as i said you can call something that makes sense for your application then over here we can see that it will run on every push to master branch and it will also run every time a pull request is merged to master so this is exactly what we want to have then what will happen it will run on ubuntu if you really want this to run in another operating system you can for example say windows latest and it will run on windows okay so that's there if you really need to or even if you have a program that only runs in mac os you can put mac os over there and it will run on that operating system then this is the versions of node that you want your workflow to run in our case we just needed to run in the latest one which is 14. if you are doing a library that needs to run in multiple versions of node maybe is a good idea to test in multiple okay so then this is the part that starts to interest us for today we will have these steps and the first one is just to get our code is the checkout then this is just one to say which version of node we are going to run now this is the bits that start to interest us we will have a run npm ci which is roughly the same as an npm install i will leave links in the description to you understand what is an npm ci then we will do an npm run build we can delete this if present and the last command that we need to run ourselves is the run npm run export we don't have a testing command so we can delete that one and as you may assume now the last command we really need to do is the latest deployment to the github pages itself and if we go to google we can type over here github actions deploy github pages and usually this will be the first one but if you don't find this one i will leave the link in the description of this video as well just scroll a bit on that one and you will see this last command over here we will copy that and have to change something on it but let's first copy that one let's come over here and do a paste of that command and you immediately see that this editor on github is telling you that the indentation is not correct and if you see this is a yaml file so we don't have the curly braces the only method we we have is the indentation is a bit like python there is no curly braces there so your indentation is important so let's just make the proper indentation of this file so one two over there and this i think is like this but it will complain in a bit if not so now that we have this over here we can just come over there and do the following just come here and say this the github token is always provided to us so there is no problem with that one every single github action workflow that runs will have this secret with the github token so that one we don't need to worry about then the branch the default branch of gh pages as well gh pages and what happens behind the scenes is that this will create a branch called gh pages put all your static assets from that out folder over there and that's how github serves your static content so as i said it will be from our out folder not from our build folder so we will change that one to be an out folder with this done we can now start the commit of this one you can say something i will just say create bruno deploy.yamo let's do that commit of this file doing that commit you can now go to your code check your commits and you will see this yellow dot over here clicking on that yellow dot you see that some checks are running so let's click on details and clicking on details you see that you have a job that is going to start to run and this will probably take the first one one to two minutes so i will fast forward the video to when this job finishes now that the job finished you can see that it took roughly one minute and nine seconds to run and after that one is finished you can go first to your code and see that now you will have two branches and as i said one will be your master and the other one will be the gh pages branch if you click over here you will have all the out folder that you also have on your vs code after doing the npm run export this is the exact same out folder and this is good this is good news now the next thing we need to do is to go to our settings and scroll a bit in our settings and when we scroll we will see something called github pages right and so in these github pages sometimes gita picks this automatically other times like now it doesn't so when it doesn't you need to come over here and say that the branch that we want to use for our github pages is the gh pages branch it will go on the root and then you do save and after you do a save you can now scroll again to the bottom and you will see that your site is ready to be published at that one usually now you have two options or you do another commit to force your um job to run once again or you go over here and you can just rerun that action and that's actually what we are going to do we can come over here and say reply this action over there rerun jobs right so rerun all the jobs and when we do that to rerun all the jobs you see that now we have one cute job and once again this will take roughly a minute or a minute and something to run so once again i will fast forward this one for you this job is now finished so we can now flip to our settings and if we scroll we will see a green banner saying that our application is now published this one if you wait a bit more it probably does it automatically i'm just a bit impatient that's why we rerun our github action now that we have this one we can open this application and quite immediately you will see one major problem our images are not loading and this is expected so if we inspect and we go over here you will see that we are loading or trying to load our images from the root of the domain without adding this by spot over here that's the first problem you may notice the second one if you scroll a bit up you will see that we are not loading all the javascript files from next.js the ones that we have inside our out folder over here in this folder underscore next underscore data etc right and those ones are not being loaded those are easy to fix next.js has something called base prefix and asset prefix so let's go first to the asset prefix asset prefix and when we go to the asset prefix you can see this over here next we'll automatically use your prefix in the scripts it loads but this has no effect whatsoever on the public folder which is our images all our images are being loaded from the public folder that's fine we will fix it ourselves as well no problem at all then let's go back to our page and try to navigate and when we try to navigate in our localhost we navigate but if we go to the real page and we try to navigate you will see that we are going to slash microphone slash one without that by spot as well so we can go to google again and say next js base button and when we do that by spot it will be another configuration in our next next.config.js and this one will be for our router so our router will be able to keep the base path so let's add those two already to next.js let's do a deployment it will file still the images and then we will come back and forward to solve the problems one by one and let's come over here let's say that we do a git pull i already did a git pull but let's do again to get our github configuration file which is this bruno deploy in my case right and let's create a new next dot next dot config dot js and let's do a module dot export equals to base path and we will put that specific part of our url and in the asset prefix we will put that specific bit as well in a second we will start to use environment variables but for now to test we will do it without that so let's go over here go back and copy this bit of the url without the last slash don't put the last slash all right so let's go over here and copy two boats like that right and now that we have that we can even fix the images already because the images actually is quite easy so let's go to our index and in our index where we are doing the loading of the images over here we can just come over here and put the prefix but because we are going to use environment variables in a second let me just say prefix equals to this bit oops and i lost that bit so let me copy again and now that we have that bit we can just say prefix oh what is it it's here so prefix plus the image url that we already have all right and this when we start to have environment variables this will be undefined so we will pass an empty string so it will work both on our localhost and on github pages let's just do a commit over here git commit minus m add asset prefix base path and image url and now we can just do a git push as well and i forgot to add my files so we will do am and now we will commit this we will push this and i will just fast forward this for you once again when this job is finished i will show you the job finished so our second job also finished we can even open the job if we want to click over here in the build and we can see that everything is green so we can go once again to our application but before going to our application if you want to understand if it's already fully deployed you can go to these github branches over here click on that gh page and click on the commits and after each deployment we do you will see this green tick when you have the green tick on those commits it means that it's really deployed and now you can come over here we will do a hard refresh and now we start to have images right and now we will have another funny problem this one is interesting one so if you see what's not loading is only the underscore next folders and you may say oh why that is happening well that's actually because of github itself github runs on every underscore folder something called jekyll and in order for us to remove that functionality from github we just need to create a nodejacket on our out folder and you can come over here read these uh issues and all those issues are going to say this one is actually with a next folder probably an xjs project and all of them will tell you to create that node jekyll file so that's what we are going to do we will go to our bitbucket our vs code why i said bitbucket we will go to our vs code do a git pull just to make sure that we are on the latest version open our bruno deploy and over here after our npm run export we can now do run and because we are in linux we can do touch out slash dot no jekyll right and this one will create a file inside our out folder and the file will be named no jekyll file so that's exactly what we need so let's come over here and say the following git add dot git commit minus m add node jekyll file right now jack your file and then we will do a git push when we do that i will go now back to our github actions and you will see that now we have another action starting and when this action now that started now finishes i will come back to you once again all right this one also finished now and so we have this add node jekyll file finished so let's go back to our browser and now if we do another first refresh we should get no errors the last bit that you may want to do is if you see in localhost we have this versa logo and over here in our deployed version we don't have that favicon and that is happening because your browser by default will try to go to the root of your domain favicon so how to solve that well in our case it's actually simple we can go to our underscore app.js and over here we will add a new link and that link if i'm not mistaken it will be of rail type shortcut icon shortcut icon or can shortcut i'm not 100 sure we will check that in the documentation in one second and over here we just need to do exactly what we did before so we can come over here to our index copy these prefix over here inside the following come over here type this prefix before we go to our environment variables right and now we just need to say the following this one will be the prefix plus now fav con where is the favicon on our out folder is five econ dot eco okay con and this is basically what we need in order to now load our five econ so if i do the typical github and this one will be just five econ right we will push this one and as soon as this one is finished we should now have the availability to have our new favicon in the page so once again this one is running when it finishes we will come back and test it again another job finished so we can now come over here do another refresh and now when we do the art refresh you can see that we have the versailles logo so if you don't care about the environment variables this video i hope it was helpful for you if you care about the environment variables let's go to that one let's go over here and type github actions environment variables and now what we need to do in these environment variables is literally just passing them like that and so we can do something interesting over here let's go over here to our workflows and now we will need the environment variables in two of our steps only the other steps don't need that those environment variables so let's come over here and do the following a control v of those environment variables and for us the only environment variable that we care about will be next public underscore base but and we don't need any other environment variable if you are asking why i'm putting that next underscore public is because after version 9.4 next.js gave us the possibility to declare environment variables just next underscore public and they will be available in our client bundle without you having to do any other things like we did in the part 10 of our next js uh tutorial because we were still using next 9.3 with next 9.4 you just declare the environment variable like that with next underscore public and now we can go everywhere where we had that one art coded and start to replace by this one so we can say process dot f process dot f dot oops not events dot f dot that name and now we can come over here replace by that and if i'm not mistaken we did that on the index which is over here and we also did it and this is the one that i will say if it's undefined we will say it's an empty string in order to pass the image as prefix like that okay and so let's copy this bit as well and we change it in app.js so we can come over here do this i will copy this bit because i will need that for our yaml file so let me copy that one and now we can go to our yaml file and say instead of being mona it will be that bit i will copy this one and i will pass it over here as well and now those two commands nothing else knows about these environment variables if you want you can just declare the environment variables once at the top of the job i usually prefer to declare the environment variable only when i need it but if it starts to be more than two or three probably it's a good idea to put it at the top of the job okay for now i will keep it in build and on the export let's come over here and say gita dot git commit minus m m variables and we will do a git push after this git push you are probably already thinking what's going to happen we will go to our github actions we will refresh this page and now after a while it should start a new job did we push yes we did push so in a second a new job should start and when that job starts i will come back to you well not when it starts when it finishes i will come back to you now that that workflow is finished i think we have everything we can come over here do a command r our images are loading we can click and we navigate to the right place our files are all being loaded because we don't have any errors in our console so now you have everything you need in order to play around if you don't want these names of the steps for example if you come over here if you don't want these names of the steps to be the name of the command that you executed you can come over here and all of this for example npm run ci you can say the following name and in the name you say something for example installing my packages right in this one you will say for example name i don't know build my app okay and i will just do these two for you to see and now we just need to come over here do another commit with names for example let's call this one with names with names we will do the commit the push and you will see that instead of now our commands saying npmci and npm run build they will say the names we have over there that sometimes is really helpful as you can see we have npm run ci and things like that and sometimes that's not as useful so when this one finishes well this one doesn't even need to finish it just needs to show uh the name of the steps that will execute and after the name of the steps you can already start to see that it says installing my packages building my app and well the others that we didn't change are still the same ones so i really hope this video was helpful for you i would like to do a bit more videos with github actions and a bit more deployment videos but i'm not sure if it's what you are looking for in this channel if it is let me know and we can start to do a bit more deployment work to let's say versailles even to azure i'm not a big specialist in aws but i can have a look as well so let me know what you want to see in terms of these more devops work because it's something that i like but i'm not sure if that's something you want to see in the channel so i hope to see you next week until then i hope you have a great week and bye

Channel: Bruno Antunes

Views: 7,990

Rating: 4.9882355 out of 5

Keywords: Next.js, Nextjs, Next.js deployment, nextjs deployment, next js deployment, next js github pages, next.js ssg, nextjs ssg, next js ssg deployment, github actions, github pages, gh-pages, next.js gh-pages, next.js github pages, deploy to github pages using github actions, deploy to github pages github actions, nextjs static site generation deployment, next.js static site generation deployment, next js ssg deployment github, next github pages, next github actions, CI/CD

Id: yRz8D_oJMWQ

Length: 24min 0sec (1440 seconds)

Published: Fri Aug 28 2020