KintoHub Docs

›Websites

Introduction

  • Getting Started
  • The KintoHub Workflow
  • Try an example app

    • Node.js
    • Python
    • Java
    • .NET
    • PHP
    • Ruby
    • Go
    • Elixir

KintoBlocks

  • Introduction
  • Websites
  • Microservices
  • Custom Services
  • Job

Projects

  • Introduction
  • Environments
  • Promoting
  • Rollbacks
  • Shut Down
  • Metrics

Features

    Building

    • Pulling Source Code
    • Branches & Tags
    • Manage KintoBlocks
    • API Docs
    • Build Arguments
    • Helm Arguments

    Deploying

    • Manage Projects
    • Manage Environments
    • Environment Variables
    • High Availability

    Operating

    • Accessing API Endpoints
    • API Tokens and Sessions
    • Logs

    Workspaces & Teams

    • Introduction
    • Managing Workspaces
    • Sharing Workspaces

Plans & Billing

  • Plans
  • Upgrading
  • Billing

Quickstarts

    Microservices

    • Express
    • Koa
    • Fastify
    • Hapi
    • FastHttp
    • Gin
    • Iris
    • Beego
    • Flask
    • Django

    Websites

    • Serve Static Files
    • Static HTML Website
    • Ionic PWA
    • Docusaurus
    • Jekyll
    • Angular
    • React
    • Preact PWA
    • Vue
    • NextJs
    • Gatsby

    Jobs

    • Puppeteer

    GraphQL

    • Hasura

    Full-Stack

    • Todo List

Notes & Experiments

  • Release Notes
  • Session Memory
Edit

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

Sorry, your browser doesn't support embedded videos.

Create a Website KintoBlock

  1. Navigate to the KintoHub home page.
  2. Select KintoBlocks from the sidebar.
  3. Click on the Create New KintoBlock card.
  4. Choose the Website KintoBlock type.

Once the Choose Repository page is displayed, specify the repository details as suggested below:

  1. Enter the name of the repository where the static files are in the root of the repository.
  2. Click on the Continue button.

In the Create Website page, specify the configuration details of the Website KintoBlock by following these steps:

  1. Enter a unique Name.
  2. Choose the Static Website in Choose a Type.
  3. Click on Create Website button.

View the newly created KintoBlock in the KintoBlock page and proceed as follows:

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

A build is successfully created in the KintoBlock.

Create a project with the KintoBlock

  1. Navigate to Create New Project page
  2. Enter the Project Name
  3. Add the KintoBlock in the KintoBlocks section.
  4. Click Create New Project.

The Project page is displayed, and a new deployment is shown as in-progress.

  1. Wait for the deployment to complete.
  2. Once completed, scroll down to the KintoBlocks section.
  3. 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

Sorry, your browser doesn't support embedded videos.

Create a Website KintoBlock

  1. Navigate to the KintoHub home page.
  2. Select KintoBlocks from the sidebar.
  3. Click on the Create New KintoBlock card.
  4. Choose the Website KintoBlock type.

Once the Choose Repository page is displayed, specify the repository details as suggested below:

  1. Enter the name of the repository where the static files are in the root of the repository.
  2. Click on the Continue button.

In the Create Website page, specify the configuration details of the Website KintoBlock by following these steps:

  1. Enter a unique Name.
  2. Choose the Static from Build in Choose a Type.
  3. For Language, select Node.js since Angular depends on Node.js.
  4. Select an appropriate Version of Node.js.
  5. 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.
  6. 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.
  7. Click on Create Website button.

View the newly created KintoBlock in the KintoBlock page and proceed as follows:

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

A build is successfully created in the KintoBlock.

Create a project with the KintoBlock

  1. Navigate to Create New Project page
  2. Enter the Project Name
  3. Add the KintoBlock in the KintoBlocks section.
  4. Click Create New Project.

The Project page is displayed, and a new deployment is shown as in-progress.

  1. Wait for the deployment to complete.
  2. Once completed, scroll down to the KintoBlocks section.
  3. 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.

← PreviousStatic HTML Website →
  • Quick-start tutorial
  • Static HTML website
    • Create a Website KintoBlock
    • Create a project with the KintoBlock
  • Static Angular website
    • Create a Website KintoBlock
    • Create a project with the KintoBlock
    Copyright © 2019 KintoHub. All rights reserved