Skip to content

Commit 9295b9f

Browse files
ZaouiAmineZaouiAmine
committed
Hosting Websites on Taubyte
1 parent fde2610 commit 9295b9f

File tree

1 file changed

+237
-0
lines changed

1 file changed

+237
-0
lines changed

‎content/posts/hosting-websites-taubyte.md‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
---
2+
title: "Hosting Websites on Taubyte"
3+
author: Zaoui Amine
4+
featured: true
5+
draft: false
6+
tags:
7+
- tutorials
8+
- websites
9+
- static-sites
10+
- hosting
11+
- cloud
12+
image:
13+
src: /blog/images/hosting-websites.png
14+
alt: Hosting Websites on Taubyte
15+
summary: Taubyte makes hosting static websites simple. Learn how to create, configure, and deploy a website on your Taubyte cloud with automatic builds and instant previews.
16+
date: 2026-01-14T12:50:00Z
17+
categories: [Hand-on Learning]
18+
---
19+
20+
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.
21+
22+
## Creating a Website
23+
24+
From the sidebar, navigate to **Websites** and click the **+** button.
25+
26+
Configure your website:
27+
28+
| Field | Description | Example |
29+
|-------|-------------|---------|
30+
| Name | Unique identifier | `my-website` |
31+
| Repository | Generate new or import existing | `Generate` |
32+
| Private | Repository visibility | Toggle on for private |
33+
| Domain | Which domain to serve on | `GeneratedDomain` |
34+
| Path | URL path | `/` |
35+
36+
### Choosing a Template
37+
38+
Taubyte offers several templates to get you started:
39+
40+
- **HTML**: Basic HTML/CSS/JS starter
41+
- **React**: React application boilerplate
42+
- **Vue**: Vue.js starter template
43+
- **Static**: Empty static site
44+
45+
Select your preferred template and click **Generate**.
46+
47+
This instantly creates a fresh GitHub repository with starter code ready for customization.
48+
49+
## Pushing Configuration
50+
51+
Click the **push button** in the bottom right to save your configuration.
52+
53+
Before finalizing:
54+
55+
1. Open the **websites** folder
56+
2. Find the YAML file for your website
57+
3. Copy the **ID** and **GitHub repo name**—you'll need these for builds
58+
59+
Type a commit message and push.
60+
61+
## Editing Your Website
62+
63+
Click the **open in browser icon** next to your website in the list. This takes you directly to the GitHub repository.
64+
65+
### Making Changes
66+
67+
1. Open `index.html` (or your main file)
68+
2. Click **Edit**
69+
3. Make your changes:
70+
71+
```html
72+
<!DOCTYPE html>
73+
<html lang="en">
74+
<head>
75+
<meta charset="UTF-8">
76+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77+
<title>My Taubyte Site</title>
78+
<style>
79+
body {
80+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
81+
max-width: 800px;
82+
margin: 50px auto;
83+
padding: 20px;
84+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
85+
min-height: 100vh;
86+
color: white;
87+
}
88+
h1 {
89+
font-size: 3rem;
90+
}
91+
</style>
92+
</head>
93+
<body>
94+
<h1>Welcome to My Taubyte Site!</h1>
95+
<p>This site is hosted on my own cloud infrastructure.</p>
96+
</body>
97+
</html>
98+
```
99+
100+
4. Commit the changes
101+
102+
## Triggering a Build
103+
104+
Since Dream doesn't automatically trigger builds from GitHub, do it manually:
105+
106+
```bash
107+
# Use the ID and full repo name you copied earlier
108+
dream inject push-specific --rid <github-id> --fn <repo-name>
109+
```
110+
111+
Navigate to the **Builds** page in the console and wait for completion.
112+
113+
## Viewing Your Website
114+
115+
### Local Setup Required
116+
117+
Before previewing, add your generated domain to `/etc/hosts`:
118+
119+
```bash
120+
sudo nano /etc/hosts
121+
```
122+
123+
Add:
124+
```bash
125+
127.0.0.1 your-domain.blackhole.localtau
126+
```
127+
128+
### Open the Website
129+
130+
Back in the console:
131+
1. Navigate to **Websites**
132+
2. Click the **lightning icon** next to your website
133+
3. A new tab opens with your live site!
134+
135+
## Website Structure
136+
137+
Generated websites follow this structure:
138+
139+
```bash
140+
my-website/
141+
├── index.html # Main entry point
142+
├── css/
143+
│ └── style.css # Stylesheets
144+
├── js/
145+
│ └── app.js # JavaScript
146+
├── assets/
147+
│ └── images/ # Static assets
148+
└── .taubyte/
149+
├── config.yaml # Build configuration
150+
└── build.sh # Build script
151+
```
152+
153+
### The `.taubyte` Folder
154+
155+
This folder is essential for proper deployment:
156+
157+
**config.yaml** - Defines the build environment:
158+
```yaml
159+
version: "1.0"
160+
environment:
161+
image: node:alpine
162+
variables:
163+
NODE_ENV: production
164+
workflow:
165+
- build.sh
166+
```
167+
168+
**build.sh** - The build script:
169+
```bash
170+
#!/bin/bash
171+
mkdir -p /out
172+
cp -r * /out/
173+
rm -rf /out/.taubyte
174+
```
175+
176+
> **Important**: All output must go to the `/out` folder.
177+
178+
## Advanced: Building with Frameworks
179+
180+
For frameworks like React or Vue, the build process is more involved:
181+
182+
### React Example
183+
184+
**config.yaml**:
185+
```yaml
186+
version: "1.0"
187+
environment:
188+
image: node:18-alpine
189+
variables:
190+
NODE_ENV: production
191+
workflow:
192+
- build.sh
193+
```
194+
195+
**build.sh**:
196+
```bash
197+
#!/bin/bash
198+
npm install
199+
npm run build
200+
mkdir -p /out
201+
cp -r build/* /out/
202+
```
203+
204+
### Vue Example
205+
206+
**build.sh**:
207+
```bash
208+
#!/bin/bash
209+
npm install
210+
npm run build
211+
mkdir -p /out
212+
cp -r dist/* /out/
213+
```
214+
215+
216+
## Troubleshooting
217+
218+
| Issue | Solution |
219+
|-------|----------|
220+
| Website not loading | Check `/etc/hosts` includes your domain |
221+
| Build failed | Review build logs in the Builds tab |
222+
| 404 errors | Ensure `index.html` exists at root |
223+
| Assets not loading | Verify paths are relative, not absolute |
224+
225+
## Conclusion
226+
227+
You've just created and deployed your first website on Taubyte:
228+
229+
1. **Created** a website with a template
230+
2. **Edited** the HTML in GitHub
231+
3. **Triggered** a build
232+
4. **Previewed** your live site
233+
234+
With websites and functions sharing the same domain, you can build complete web applications with seamless frontend-backend integration.
235+
236+
Next, learn about [Object Storage](/blog/posts/object-storage-taubyte) for storing and serving files.
237+

0 commit comments

Comments
 (0)