facebook youtube pinterest twitter reddit whatsapp instagram

Hosting A Static Site in TonicsCloud

In this guide, I will be showing you how to host a static site in TonicsCloud from scratch.

I have prepared the following materials:

The Zip file would be useful along the line, before that, lets...

Deploy an Instance

To Add a new Instance, go-to: Cloud → Instances → Add New

You would see the instance form, choose the instance name, the region you want the instance to be deployed to and the plan you want.

Hit Deploy Instance to deploy it, then wait for a while for the instance to be configured, might take between 1 minute to 5 minutes, chill out and take some 🍵

Once the instance is deployed, you would get Running in the status, if you are not getting any info, please hit the reload after a minutes or so:

Once the instance is in the running state, you can either start to Add Container, please click the Edit button to get the IP info if you are managing the domain records outside of TonicsCloud:

Configuring Domain Records

Skip this section if you are not managing the Domain Records in TonicsCloud, otherwise, let's bind the domain to the newly created instance .

First, add a new domain if you already haven't added one, by going to: Cloud -> Domains -> New Domain

Enter your domain name, and choose the instance you just deployed in "Default A/AAAA Value From 👇", then hit Save Changes, you do not need to do anything else, it would automatically fill the IP addresses for you.

Once you hit Save Changes, it would redirect you to the Domain List page, ensure the info does not have no error, depending on which record you are creating, the below is an example of success:

If you click on the domain Edit link, you would see further instructions on how to configure the nameserver at your domain registra:

Adding a Container

Once your domain is binded or is pointing to the instance IP, you can create a container, click on the Cloud menu:

and click Add Container.

You would be presented the container form, please:

  1. Add the container name
  2. The container description (optional)
  3. For Profiles, please select Port 80 & 443
  4. Click on Variable Recipe and add the following:
    ACME_EMAIL=youremail@email.com
    ACME_DOMAIN=yourdomain.com
  5. For Image, choose Nginx, if you do not pick a version for the image, it would use the first option
  6. For Instance, select the instance you want to place the container onto
  7. Finally, hit the Deploy Container button
  8. The container would be provisioned in less than a minute, hit reload to track the changes

Here are the images for the above step:

Add a Container Step 1

Add a Container Step 2 - Adding a Common Variables

Add a Container Step 3 - Choosing Image and Deploying Container

Configuring Apps

Once the container is deployed, the only thing left is configuring Apps in the container, for example, uploading your static project, HTTPS, and the likes.

Container App List Page

In most of the typical cases, you won't be doing any crazy configuration than just clicking one or two buttons, so, let's go...

  • Again, click on the container Apps, see above image for example
  • Edit Unzip
  • Copy and Paste the zip link in the Archive File, then hit Save Changes
  • Go-back to the Container Apps, please use the breadcrumb menu to make going back faster:
     Container Apps Breadcrumb
  • Ensure there is no error message in the Unzip Msg box, if you see Reloaded, that is an indication that everything works fine
  • Edit Nginx
  • In the Choose Field, please select: App TonicsCloud Nginx Recipe »» [Static Site (HTTP)], then scroll to the bottom and hit Save Changes
  • Ensure there is no error message in the Nginx Msg box, if you see Reloaded, that is an indication that everything works fine
  • If you want free https, Edit ACME, leave all of the options (except you know what you are doing) as is and hit the Save Changes button
  • Go-back to the Container Apps, wait for a Reloaded message in the ACME Msg and ensure there is no error in Msg
  • Finally, Edit Nginx one more time, in the Choose Field, select App TonicsCloud Nginx Recipe »» [Static Site (HTTPS)], then Save Changes

If everything went well, Unzip, Acme and Nginx should all have Reloaded:

Container Apps Successfully Reloaded

Result

Viewing static.tonics.app, shows the static site with HTTPS connection:

Final result of the static site

Related Post(s)

  • Hosting Multiple Websites on a Server with TonicsCloud

    In the previous guide, I covered Hosting a Static Site in TonicsCloud, that setup is limited in the sense that you can't host more than a site in your server. In this guide, we would take it a step f