Hosting static websites with versioning for free

Pebl is a cloud computer.

It is the first cloud platform that meets developers where they are the most comfortable — code. No more configs. Just embed the cloud right into your application with pebl's cloud SDK.

We just released pebl v0.1.2 which includes support for versioned folders. This makes it super easy to host static websites with versioning, meaning that you can quickly rollback to previous versions of your website!

This should only take you about five minutes. If you run into any issues, hop on our discord to ask for help.

Setup

We will be continuing from our first guide where we configured static web hosting with pebl. Follow the tutorial before continuing.

Versioning

The new release of pebl will automatically version your folders.

$ pebl folder upload build static
 :: uploading folder as name static
 :: success! the new uploaded version is: coawer
$

And we can reference these versions directly in mount:

await pebl.mount("static:coawer", "/static");

Note that you can leave the version out of the name like we had done previously. In this case the latest version of the folder will be chosen.

Making a Change

Go ahead and make a modification to your website. In our example, we are using the react starter. The react start page displays the react logo that rotates clockwise. We'll make a small change so that it goes the other way.

$ cd project-folder/my-app
$ cat src/App.css
...
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg); // <-- this line has changed
  }
}
$

Now let's build and upload, just like before.

$ cd project-folder/my-app
$ npm run build
$ pebl folder upload build static

Then re-deploy our existing node server:

$ cd project-folder/server
$ pebl deploy

Now when you visit your website, you should see the change reflected.

Rolling Back

But sometimes we need to rollback our changes! Maybe it turns out the react logo was meant to turn clockwise after all.

Here we can use the pebl cli to list the available versions:

$ pebl folder list static
NAME
static:coawer
static:dtzmoj

These are sorted by time, which means we can reference static:dtzmoj in order to rollback our website.

Update your index.js like so:

import express from "express";
import * as pebl from "pebl";

// reference static:dtzmoj to rollback!
await pebl.mount("static:dtzmoj", "/static");

const app = express();

app.use(express.static("/static"));
app.get('/*', function (req, res) {
  res.sendFile("/static/index.html");
});

pebl.service(app, "your-subdomain.pebl.rocks");

And once you deploy this with pebl deploy, you will see the old version!

Next

We have a ton of guides for how to use pebl. And make sure to join our discord!