Serve Static Files
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 home page.
- Select KintoBlocks from the sidebar.
- Click on the Create New KintoBlock card.
- Choose the Website KintoBlock type.
Once the Choose Repository page is displayed, specify the repository details as suggested below:
- Enter the name of the repository where the static files are in the root of the repository.
- Click on the Continue button.
In the Create Website page, specify the configuration details of the Website KintoBlock by following these steps:
- Enter a unique Name.
- Choose the
Static Website
in Choose a Type. - Click on Create Website button.
View the newly created KintoBlock in the KintoBlock page and proceed as follows:
- Click on 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.
A build is successfully created in the KintoBlock.
Create a project with the KintoBlock
- Navigate to Create New Project page
- Enter the Project Name
- Add the KintoBlock in the KintoBlocks section.
- Click Create New Project.
The Project page is displayed, and a new deployment is shown as 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 are successfully hosted on the internet.
Static Angular website
Create a Website KintoBlock
- Navigate to the KintoHub home page.
- Select KintoBlocks from the sidebar.
- Click on the Create New KintoBlock card.
- Choose the Website KintoBlock type.
Once the Choose Repository page is displayed, specify the repository details as suggested below:
- Enter the name of the repository where the static files are in the root of the repository.
- Click on the Continue button.
In the Create Website page, specify the configuration details of the Website KintoBlock by following these steps:
- Enter a unique Name.
- Choose the
Static from Build
in Choose a Type. - For Language, select
Node.js
since Angular depends on Node.js. - Select an appropriate Version of Node.js.
- The Build Command allows calling 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 Build Output 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
. - Click on Create Website button.
View the newly created KintoBlock in the KintoBlock page and proceed as follows:
- Click on 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.
A build is successfully created in the KintoBlock.
Create a project with the KintoBlock
- Navigate to Create New Project page
- Enter the Project Name
- Add the KintoBlock in the KintoBlocks section.
- Click Create New Project.
The Project page is displayed, and a new deployment is shown as 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 is successfully hosted on the internet.