Taubyte makes hosting static websites straightforward. Whether you’re building a simple landing page, a single-page application, or a full-featured web app, you can deploy and serve your website directly on your Taubyte cloud with automatic builds and instant previews.

Creating a Website

From the sidebar, navigate to Websites and click the + button.

Creating a new website

Configure your website:

FieldDescriptionExample
NameUnique identifiermy-website
RepositoryGenerate new or import existingGenerate
PrivateRepository visibilityToggle on for private
DomainWhich domain to serve onGeneratedDomain
PathURL path/

Choosing a Template

Taubyte offers several templates to get you started:

  • HTML: Basic HTML/CSS/JS starter
  • React: React application boilerplate
  • Vue: Vue.js starter template
  • Static: Empty static site

Selecting a website template

Select your preferred template and click Generate.

This instantly creates a fresh GitHub repository with starter code ready for customization.

Pushing Configuration

Click the push button in the bottom right to save your configuration.

Commit and push interface

Before finalizing:

  1. Open the websites folder
  2. Find the YAML file for your website
  3. Copy the ID and GitHub repo name—you’ll need these for builds

Type a commit message and push.

Editing Your Website

Click the open in browser icon next to your website in the list. This takes you directly to the GitHub repository.

Making Changes

  1. Open index.html (or your main file)
  2. Click Edit
  3. Make your changes:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Taubyte Site</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        color: white;
      }
      h1 {
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Taubyte Site!</h1>
    <p>This site is hosted on my own cloud infrastructure.</p>
  </body>
</html>
  1. Commit the changes

Triggering a Build

Since Dream doesn’t automatically trigger builds from GitHub, do it manually:

# Use the ID and full repo name you copied earlier
dream inject push-specific --rid <github-id> --fn <repo-name>

Navigate to the Builds page in the console and wait for completion.

Website build status

Viewing Your Website

Local Setup Required

Before previewing, add your generated domain to /etc/hosts:

sudo nano /etc/hosts

Add:

127.0.0.1 your-domain.blackhole.localtau

Editing /etc/hosts file

Open the Website

Back in the console:

  1. Navigate to Websites
  2. Click the lightning icon next to your website

Lightning button to run website

  1. A new tab opens with your live site!

Running website

Website Structure

Generated websites follow this structure:

my-website/
├── index.html        # Main entry point
├── css/
│   └── style.css     # Stylesheets
├── js/
│   └── app.js        # JavaScript
├── assets/
│   └── images/       # Static assets
└── .taubyte/
    ├── config.yaml   # Build configuration
    └── build.sh      # Build script

The .taubyte Folder

This folder is essential for proper deployment:

config.yaml - Defines the build environment:

version: "1.0"
environment:
  image: node:alpine
  variables:
    NODE_ENV: production
workflow:
  - build.sh

build.sh - The build script:

#!/bin/bash
mkdir -p /out
cp -r * /out/
rm -rf /out/.taubyte

Important: All output must go to the /out folder.

Advanced: Building with Frameworks

For frameworks like React or Vue, the build process is more involved:

React Example

config.yaml:

version: "1.0"
environment:
  image: node:18-alpine
  variables:
    NODE_ENV: production
workflow:
  - build.sh

build.sh:

#!/bin/bash
npm install
npm run build
mkdir -p /out
cp -r build/* /out/

Vue Example

build.sh:

#!/bin/bash
npm install
npm run build
mkdir -p /out
cp -r dist/* /out/

Troubleshooting

IssueSolution
Website not loadingCheck /etc/hosts includes your domain
Build failedReview build logs in the Builds tab
404 errorsEnsure index.html exists at root
Assets not loadingVerify paths are relative, not absolute

Conclusion

You’ve just created and deployed your first website on Taubyte:

  1. Created a website with a template
  2. Edited the HTML in GitHub
  3. Triggered a build
  4. Previewed your live site

With websites and functions sharing the same domain, you can build complete web applications with seamless frontend-backend integration.

Next, learn about Object Storage for storing and serving files.