You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getting-started/deploying-a-static-site.md
+252-3Lines changed: 252 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,257 @@ sidebar_position: 3
4
4
5
5
# Deploying a static site
6
6
7
-
:::note Work in Progress
7
+
This guide walks you through deploying a simple static website on lttle.cloud, from basic setup to adding flash mode for cost-efficient serverless hosting.
8
8
9
-
This section is a work in progress.
9
+
## Prerequisites
10
10
11
-
:::
11
+
- lttle CLI installed and configured ([Installation guide](./installing-the-cli.md))
12
+
- Basic familiarity with YAML configuration
13
+
14
+
## Getting Started
15
+
16
+
Let's start by creating a simple static site using a pre-built nginx image, then enhance it with lttle.cloud's features.
17
+
18
+
### Create your project
19
+
20
+
First, create a new directory for your project:
21
+
22
+
```bash
23
+
mkdir my-static-site
24
+
cd my-static-site
25
+
```
26
+
27
+
### Create the deployment configuration
28
+
29
+
Create a `lttle.yaml` file with a basic app configuration:
30
+
31
+
```yaml title="lttle.yaml"
32
+
app:
33
+
name: hello-lttle
34
+
image: nginx:latest
35
+
resources:
36
+
cpu: 1
37
+
memory: 128
38
+
expose:
39
+
public:
40
+
port: 80
41
+
external:
42
+
protocol: https
43
+
```
44
+
45
+
This creates an app that:
46
+
- Uses the official nginx image from Docker Hub
47
+
- Allocates 1 CPU core and 128MB of memory
48
+
- Runs nginx with its default configuration (serves nginx welcome page)
49
+
- Exposes port 80 externally via HTTPS with an auto-generated domain
50
+
51
+
The `expose` configuration:
52
+
- **public** - Names this service endpoint (you can have multiple endpoints)
53
+
- **port: 80** - The port nginx listens on inside the container
54
+
- **external** - Makes the service accessible from the internet
lttle.cloud will automatically generate a domain like `hello-lttle--public--yourtenantname.eu.lttle.host` for your app.
58
+
59
+
### Deploy your site
60
+
61
+
Deploy the app to lttle.cloud:
62
+
63
+
```bash
64
+
lttle deploy
65
+
```
66
+
67
+
You should see output similar to:
68
+
```
69
+
→ Successfully deployed app: default/hello-lttle
70
+
```
71
+
72
+
### Check deployment status
73
+
74
+
Monitor your machine's status with:
75
+
76
+
```bash
77
+
lttle machine ls
78
+
```
79
+
80
+
Wait for the machine to reach the `ready` state:
81
+
```
82
+
NAME NAMESPACE IMAGE STATUS CPU MEMORY
83
+
hello-lttle default nginx:latest ready 1 128
84
+
```
85
+
86
+
### Access your site
87
+
88
+
Get the URL for your deployed app:
89
+
90
+
```bash
91
+
lttle app get hello-lttle
92
+
```
93
+
94
+
This will show your app details including any exposed services. Open the provided URL in your browser to see the nginx welcome page.
95
+
96
+
## Adding Flash Mode
97
+
98
+
Now let's enhance your site with flash mode, which automatically suspends the machine when not in use, saving costs while providing instant wake-up on incoming requests.
99
+
100
+
### Update your configuration
101
+
102
+
Modify your `lttle.yaml` to include flash mode:
103
+
104
+
```yaml title="lttle.yaml"
105
+
app:
106
+
name: hello-lttle
107
+
image: nginx:latest
108
+
resources:
109
+
cpu: 1
110
+
memory: 128
111
+
expose:
112
+
public:
113
+
port: 80
114
+
external:
115
+
protocol: https
116
+
mode:
117
+
flash:
118
+
strategy:
119
+
listen-on-port: 80
120
+
timeout: 2
121
+
```
122
+
123
+
The configuration now includes:
124
+
125
+
**Flash mode settings:**
126
+
- **strategy: listen-on-port: 80** - Suspends the machine after nginx starts listening on port 80
127
+
- **timeout: 2** - Suspends the machine 2 seconds after the last connection ends
128
+
129
+
**Service exposure:**
130
+
- **public** service endpoint exposes port 80 via HTTPS
131
+
- Automatically provides SSL/TLS encryption and domain generation
132
+
133
+
For more details about flash mode, see [Machines > Mode](../resources/machines.mdx#mode).
134
+
135
+
### Redeploy with flash mode
136
+
137
+
Deploy the updated configuration:
138
+
139
+
```bash
140
+
lttle deploy
141
+
```
142
+
143
+
### Observe flash mode behavior
144
+
145
+
Check the machine status:
146
+
147
+
```bash
148
+
lttle machine ls
149
+
```
150
+
151
+
You'll see the machine go through these states:
152
+
1. `ready` - Machine is running
153
+
2. `suspending` - Creating a snapshot
154
+
3. `suspended` - Machine is suspended
155
+
156
+
Now open your site URL in the browser. The machine will automatically wake up from suspended state to serve your request!
157
+
158
+
## Adding Custom Content
159
+
160
+
Let's replace the default nginx page with custom content and use lttle.cloud's automatic building.
161
+
162
+
### Create your content
163
+
164
+
Create an `index.html` file in your project directory:
165
+
166
+
```html title="index.html"
167
+
<!DOCTYPE html>
168
+
<html>
169
+
<head>
170
+
<title>Hello lttle.cloud</title>
171
+
</head>
172
+
<body>
173
+
<h1>Hello, lttle.cloud!</h1>
174
+
<p>This is my static site running on lttle.cloud</p>
175
+
</body>
176
+
</html>
177
+
```
178
+
179
+
### Switch to automatic building
180
+
181
+
Update your `lttle.yaml` to use automatic building instead of the pre-built nginx image:
182
+
183
+
```yaml title="lttle.yaml"
184
+
app:
185
+
name: hello-lttle
186
+
build: auto
187
+
resources:
188
+
cpu: 1
189
+
memory: 128
190
+
expose:
191
+
public:
192
+
port: 80
193
+
external:
194
+
protocol: https
195
+
mode:
196
+
flash:
197
+
strategy:
198
+
listen-on-port: 80
199
+
timeout: 2
200
+
```
201
+
202
+
The `build: auto` configuration tells lttle.cloud to:
203
+
1. Automatically detect your project type (static files)
204
+
2. Build an appropriate container image automatically
205
+
3. Push the image to lttle.cloud's registry
206
+
4. Deploy using the built image
207
+
208
+
For more information about building, see [Building & Deploying > Building](../building-and-deploying/building.md).
209
+
210
+
### Deploy your custom site
211
+
212
+
Deploy with automatic building:
213
+
214
+
```bash
215
+
lttle deploy
216
+
```
217
+
218
+
You'll see build output:
219
+
```
220
+
→ Building image for default/hello-lttle
221
+
→ Auto-build using providers: staticfile
222
+
→ Pushing image for default/hello-lttle → registry.lttle.cloud/tenant/hello-lttle:abc123
223
+
→ Successfully built and pushed image for default/hello-lttle
224
+
→ Successfully deployed app: default/hello-lttle
225
+
```
226
+
227
+
### Test your custom site
228
+
229
+
Check the machine status:
230
+
231
+
```bash
232
+
lttle machine ls
233
+
```
234
+
235
+
Once the machine reaches `suspended` state, open your site URL in the browser. You should now see your custom "Hello, lttle.cloud!" page instead of the nginx welcome page.
236
+
237
+
## What's Next?
238
+
239
+
You've successfully deployed a static site with:
240
+
- ✅ Automatic image building from static files
241
+
- ✅ Flash mode for cost-efficient serverless hosting
242
+
- ✅ Custom content served by nginx
243
+
244
+
### Explore More Features
245
+
246
+
- **Add a custom domain**: Set a custom `host` in your app's [expose external](../resources/apps.mdx#expose-external) configuration
247
+
- **Add HTTPS**: Set up [certificates](../resources/certificates.mdx) for secure connections
248
+
- **Build from source**: Learn about [advanced building options](../building-and-deploying/building.md)
249
+
250
+
### Project Structure
251
+
252
+
Your final project structure should look like:
253
+
254
+
```
255
+
my-static-site/
256
+
├── lttle.yaml
257
+
└── index.html
258
+
```
259
+
260
+
The `lttle.yaml` file defines your infrastructure, while `index.html` contains your site content. lttle.cloud automatically builds everything into a deployable container image.
0 commit comments