Deploy a NuxtJS static website and enable GitHub Actions

well our documentation site so far looks really really really similar to just being the next js default splash page which hey it is we just created the project just now and before i really go further in building upon the template for this documentation site i actually want to deploy it out to a vps server and the reason for doing that is sometimes when we're building stuff on our local environment well it doesn't quite exactly look the same when we deploy it out into a production type server and let's just say sometimes i do silly things that end up being optimized away once we go into production so for me i like to merge my changes and then see what they look like on a production type server well let's go ahead and do that with cleaver i already have a server set up so i'm going to click into the server and then add a new next site and i'm going to add a next static website for the domain let's just use one of the free default cleaver domains and then click on add and this is going to add a new next static site to our server and then once that's done we'll go to the web app section to complete the setup we saw that when we added the site it was also installing node.js onto the server as that's a dependency for the application okay let's go ahead into the web app section and then complete the setup of our web app here all right i already uploaded this to my github account so i'll select that and then find the repository which i named docs template and we'll use the master branch and then instead of push to deploy i'm actually going to use github actions after i click on update all right now i'm going to go to the github actions page and then enable this when you enable github actions this actually creates a new file on your repo so it adds a new workflow file and if you're curious what that looks like you could click into it and then browse it and it also kicks off a build request so we can see right here that github is now building our project and once the project is finished being built within github it'll send the notice back down to cleaver and then cleaver will finish the deployment process from there okay we see that the build process is complete let's go back and then we should see it pick up here in cleaver which it is and if we click into it we'll see some more details so it's activating a new deployment and then it'll clean all deployments we should go really quick and as you can see if my slack notification and this other notification boom it's already done and perfect we see what we expect which is the production website looks just like our local website

Channel: Cleavr

Views: 730

Rating: 5 out of 5

Keywords: nuxtjs, nuxt, static, jamstack, deployment, deploy, cleavr, node, nodejs, vue, vuejs

Id: yOa8WOjyuzQ

Length: 2min 55sec (175 seconds)

Published: Sat Jan 02 2021