Static Website Deployment

Before deploying a static website, the following general things are needed:

  • Awanio Account [register]
  • Registered SSH public key on the Awanio dashboard page for you development machine [quick start]
  • Project and application for the deployment with sufficient credits [quick start]
  • Git URL of the project to push the code to. The format is git@awan.io:TEAM/APP_NAME.git
  • awan.yml file that is placed in the top application folder

After these prerequisites are present, the following 5 steps need to be taken to deploy the application to Awanio:

  1. Create application folder and files
  2. Add the awan.yml configuration file to the project
  3. Initialize the Git repository and add awan as Git remote
  4. Deploy to Awanio
  5. Enjoy your application!
  6. (OPTIONAL) Add .htaccess file

1. Create application folder and files

Create a folder to store all application files, for example we named ours mywebapp. In this folder, create a folder with the name public.

We will use the public folder to store all static files and assets that will be directly accessed by the browser. Naming these public folders can be adjusted by another name.

Inside the public folder, create a file named index.html. You can also add css, js, ico images, fonts etc. as needed. Fill in the index.html file with the contents:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

2. Add the awan.yml configuration file

Awanio requires the awan.yml configuration file in the root of the repository. Create the awan.yml file in the main (root) folder. Paste the content in the awan.yml file, check out the reference for more options:

NOTE: make sure that the doc_root path matches the name of the folder in which static files e.g. the index.html are stored. In the above example this is the public folder.

version: '1.0'
web:
  type: static
  doc_root: ./public

3. Initialize Git and add awan as Git remote

3.1. Initialize

Initialize the Git repository if you haven't done it before by executing this command within the mywebapp folder:

git init

3.2. Add remote

Add Git remote Awanio to the project:

NOTE: modify the command by using your own TEAM and APP_NAME.

git remote add awan git@awan.io:TEAM/APP_NAME.git

4. Deploy to Awanio

The application is now ready for deployment, use the command to commit everything and to push it to Awanio:

git commit -a -m "Deployment v1.0"
git push awan master

5. Enjoy

After the deployment is complete, please check your website at https://app-name.onawan.eu

NOTE: modify the URL by using your own application URL.

6. (OPTIONAL) Add .htaccess file

Awanio uses Apache Httpd as a runtime. This way, you can add the .htaccess file to the application's doc doc_root. You can use this feature for SPA applications that use pushstate in the browser. Place the .htaccess file in the root of the folder and push it to Awanio.

Here is an example .htaccess file for rewriting request handlers:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]

</IfModule>