Edit

Static Websites

Quick-start tutorial

This tutorial walks you through the process of deploying a static website on KintoHub.

There are two examples, one with standard HTML files, and one where the static website is generated with a framework, in this case Angular.

Static HTML website

Create a Website KintoBlock

• Navigate to the KintoHub dashboard.
• Click KintoBlocks in the menu.
• Select Create New KintoBlock.
• Choose the Website KintoBlock type.

The Create New KintoBlock page appears where we can set the configuration of the Website KintoBlock.

• Enter a KintoBlock Name.
• Enter a Description.
• Select for Website Type the Static Website.
• Enter the name of the repository where the static files are in the root of the repository.
• Click Create New KintoBlock.

The KintoBlock page appears for the newly created KintoBlock.

• Click Build Latest Commit to make a build that holds the static website files.
• Next, click Add to Project and a menu with projects appears.
• Click the New Project button.
• Enter a project name.
• Click Create.

Create a project with the KintoBlock

The New Project page appears for the newly created project.

• Notice that the KintoBlock has been added to the KintoBlocks section.
• Click Create New Project.

The Project page appears, and a new deployment is in progress.

• Wait for the deployment to complete.
• Once completed, scroll down to the KintoBlocks section.
• Click the Open button on the website KintoBlock to navigate to the URL.

You'll see the static files hosted on the internet.

Static Angular website

Create a Website KintoBlock

• Navigate to the KintoHub dashboard.
• Click KintoBlocks in the menu.
• Select Create New KintoBlock.
• Choose the Website KintoBlock type.

The Create New KintoBlock page appears where we can set the configuration of the Website KintoBlock.

• Enter a KintoBlock Name.
• Enter a Description.
• Select for Website Type the Static Website.
• Activate the Build Required toggle.

Additional settings appear in the Advanced Options section.

• The Build Command allows to call the framework's command to trigger a static site build. In the case of Angular, make sure you have added @angular/cli as a dev dependency, and call the CLI with the npx command. E.g. npm install && npx ng build --prod.
• The Path to Build Folder is where the generated files reside. After the Build Command completes, in the case of Angular CLI, this will be the dist/ folder, with the workspace name. E.g. dist/myworkspace.
• For Language select Node.js since Angular depends on Node.js.
• Select an appropriate Version of Node.js.
• Next, enter the name of the repository that contains the Angular application.
• Click Create New KintoBlock.

The KintoBlock page appears for the newly created KintoBlock.

• Click Build Latest Commit to build the static website using the Build Command from the previous steps.
• Next, click Add to Project and a menu with projects appears.
• Click the New Project button.
• Enter a project name.
• Click Create.

Create a project with the KintoBlock

The New Project page appears for the newly created project.

• Notice that the KintoBlock has been added to the KintoBlocks section.
• Click Create New Project.

The Project page appears, and a new deployment is in progress.

• Wait for the deployment to complete.
• Once completed, scroll down to the KintoBlocks section.
• Click the Open button on the website KintoBlock to navigate to the URL.

You'll see the Angular app hosted on the internet.