How to deploy Jamstack sites to cloudcannon?

Intro

We're going to learn how we can easily deploy a Jamstack app and manage git-based Markdown content with cloudcannon. Cloudcannon gives you and your team awesome collaborative features with a great UX developer experience that generally allows you to deploy sites that are going to be performant for your user experience. If you want to learn more about all the awesome features cloudcannon provides on top of what we're going to work through, make sure you head over to cloudcannon where you can sign up for your account for a free trial...

Hands-on Lab:

Effort : 30 mins

Objectives

After completing this reading, you will be able to:

1. Clone project files from a remote repository using the command line.
2. Install Dependencies.
3. Create a new Repository on Github.
4. Signup for Cloudcannon.
5. Add a new site synced to a remote repository on Github.
6. Commit and push changes to a remote repository.
7. Deploy new site to cloudcannon.

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

• A basic understanding of working with the terminal.
• A Laptop or PC with Windows installed
• A Internet connection
• Git installed on your local machine. For more details on accomplishing this, review Installing & Setting Up Git on Windows.
• A GitHub account.
• The latest version of Visual Studio Code is installed on your machine.

Tools & Frameworks

If you're not familiar with the Jamstack, it's traditionally based on being able to provide users static sites where that first load isn't going to have to do any kind of rendering on the server, instead, we use our static site generator or framework of choice, which pulls in all of our content at compile time, where we then can publish that site basically wherever we want, such as an awesome provider like cloudcannon.

To see how this works, we're going to use the REACT framework and Nextjs which give us a ton of features out of the box, including routing and data fetching, and it just helps us get super productive with our apps.

Now if you're already familiar with Nextjs maybe you're wondering, doesn't it need a server? And while we do this at compile time, we can use tools like get static props and then statically export our site, which we'll see how we can do that, and then deliver a pure static HTML site with all the assets included.

Create a new app from a demo website starter

Now, particularly, we're going to use this demo website starter that I put together, which is just going to give us a simple blog website out of the box with some markdown capabilities that are generating the content for the site.

If you want to follow along, you can find the link to this starter right here

1 - So to get started, I'm going to go ahead and copy the following command:

 $ git clone https://github.com/Joshhortt/demo-website-starter.git

2 - I'm going to go ahead and paste that code into my terminal.

3 - I'm going to type cloudcannon-app after that URL because I want my app to have a nicer name.

It's going to clone down that project from GitHub to your chosen Local Directory

4 - I can now change cd into that directory.

I'm going to run yarn install or npm install which is going to install the dependencies.

4 - After that, I'm going to run yarn dev or npm run dev which is going to start up a local development server, which I can open up in a new tab. (url: http://localhost:3000)

5 - Once it's loaded, we can see our new website, where we just have some blog posts on our main page, an about page, and a newsletter page, and it's just some sample content that we have in there to get started with our new website.

Now we're not going to dig too much into the code, but if we go to pages and go to index.js we can see that for the most part, this looks like a pretty basic react application, but if we scroll down to the bottom, we see we have this function that we talked about earlier called get static props which is going to allow us to do, is get our data at compile time, meaning before we upload it and deploy it, that way we can save all that hard work for the network request for when it's getting built and we can grab all that post data and pass it in as props into our application and not make our user pay for that actual networking time but ultimately get this application up and deployed over to cloudcannon.

Set up a new site on CloudCannon

So let's see how we can do that now if this is our first time logging into cloudcannon

We'll see that we're going to start on our account summary and we don't have any sites yet so we want to click return to sites

It is going to show us this UI

Now we can hit add your first site

A new page opens up. We have a few options but we're going to choose to connect our own files

We can say whatever our site name is going to be. Let's call it cloudcannon-app or whatever you want your site to be called.

We can then choose our source, and in particular, we're going to use github for this walkthrough.

Note: We also have support for gitlab and bitbucket or even uploading a folder from our computer if we'd like to.

• Click on Authenticate

After selecting github and authenticating, this webpage opens up for us to give cloudcannon permission to access our github repository.

• Just click Authorize Cloudcannon

Then we're going to need to select our repository, this means we're going to need to get our site up to a github before we can move forward.

I'm going to go ahead and first create a new repository over on github.

I'm going to call that cloudcannon-app just like I did locally, and I'm also going to click New repository.

Now we have a few instructions on how we can get our local project up and running now because of the way that NEXTjs already initialized git for us, and it already has a main branch

A new window will pop up with some git instructions, which we should type into our terminal.

All we need to do is these last two steps.

$ git remote add origin https://github.com/YOUR-USER-NAME/cloudcannon-app.git
$ git push -u origin main

Note: Just in case git wasn't initialized follow all these commands below

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/YOUR-USER-NAME/cloudcannon-app.git
$ git push -u origin main

Now after we finish pushing all files to our newly created github remote repository, if I refresh the page, we can see that I have my new github repository with all those files.

Going back over cloudcannon, I'm going to refresh the page and then reselect my github repository file source, that way inside of this search for your repository once it collects all my repositories I can search for my cloudcannon-app

We can see that it will pop up right here, and we can see that I have an option for either using my existing branch or creating a new branch. Now, because I only have a main branch at this point, I'm just going to use that and select main as that'll be the default production branch.

Next, click sync files to keep moving this process forward.

Now we can see that cloudcannon has actually detected what kind of site we have, particularly in NEXTjs, but we can also see that we have the ability to define our build options where we have our preserved paths, ours is going to be node modules. That makes a lot of sense. Note that we don't have any environment variables at this time, but if you do, this would be the place to add them.

When we go further down to our install options, like our command line options, this has npm install by default. Because I'm using yarn locally, I'm just going to go ahead and use yarn install but you can keep npm install if you decide to use npx and npm for your project, and then also for the build command: yarn build or leave npm build.

Now the tricky thing for the build command is that when we're using NEXTjs, we want to make sure that we're statically compiling this, and we'll see in a second that what we want to do is not only yarn build this, but we also want to do something called next export which we don't currently have an option for in our project.

So we're going to leave this as yarn build for now, and we're going to set the output path to out because that's where the folder is going to get compiled to, but then we can scroll down and we can see that we have two other options where we have to use the beta integration version of the cloudcannon reader, which we're going to select to check because we want cloudcannon to try to read the information of our repository, and then finally we can just leave the include get folder off as we don't need that part of our system.

Finally, as I said, we can click build site and that's going to go through and run all the commands and try to deploy our site once cloudcannon gets through all those steps,

We can see that mine was deployed to the random name of green-cassowary

If I open that up in a new tab we can see that it's Page Not Found.

If we click over to the status tab inside cloudcannon and I look inside, I can see all the build logs. I'm going to particularly select NEXTjs, and if I look through, it says that it cannot find that out directory as it doesn't exist, and that's because we're only currently building our NEXTjs site and now we also need to export it, as I said a while back.

Statically export the NEXT.js app

Inside the project, I'm going to open up my package.json file, and we can see under scripts that we already have a few options, and particularly, we see our build script going on, where all it's doing is running next build and that's great, but we want to also export it, so I'm going to tack on two && (and) signs and I'm going to add also next export right after next build which is going to export it to static files for us, so we can even test locally.

Inside the terminal, run yarn build or npm run build, where we can already see that it ran next build && next export and we can see that as it goes through, it's going to first build the site, just as we'd expect, and then we can see how it's going to work when we try to export it.

We can see after it goes through the build process that we had a successful export.

And we can even look inside our project under the out directory, where we see all those HTML files, which are exactly what's going to get deployed out to cloudcannon.

I'm going to run the following commands to commit my changes:

$ git add .

$ git commit -m "updating build script"

$ git push

What's going to happen is that as soon as we push that out, we can see that cloudcannon is already building that new site with that new commit automatically without us having to trigger a new build. That way, we can always make sure that we're keeping our production branch nice and up-to-date.

Once it's complete, we can open up that URL again, and we can now see that our new site is deployed to cloudcannon.

Summary

Cloudcannon gives us a great way to deploy our projects to the web.

Are you a fan of the Jamstack? Let me know in the comments what's your favorite part of the building with the Jamstack is.

What's Next?

If you want to follow along with more advanced stuff in the next article I'll talk about Making Page content editable and making Git-based changes through the CloudCannon UI.

Thanks for the read! Now go practice & build something awesome!