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:

• Demo of The Static Site
• The Zip File (Ensure your zip file has no parent folder)

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

Prerequisite

1. The first thing you should do if you haven't is to deploy an instance: Deploying an Instance in TonicsCloud
2. If you are managing the domain in TonicsCloud: Point your domain to your instance

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:

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.

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:
   
• 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:

Result

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