Small Technology Foundation Personal Web Prototype-01: a mobile personal web server

Imagine holding your personal web site in the palm of your hand. Imagine carrying the digital aspects of your self in your pocket instead of having them on some abstract cloud under the watchful eye of some faceless multinational corporation¹.

Personal Web Prototype-01 from Small Technology Foundation R&D achieves the former using widely available off-the-shelf parts and Site.js. Hopefully, it will also start you thinking in a similar vein about building things that enable the latter.

In this post, I will outline what Prototype-01 is and how you can build a similar personal web device yourself. The audience for this post is tinkerers and developers².

The hardware

Here are the parts I used to build Prototype-01, as labelled in the first photo, above. The main ones are in boldface.

1. USB Micro Type-B (male) to USB Type-A (female) cable
2. 14500 Lithium-ion battery (3.7v; rechargeable)
3. Piz-UpTime (the battery/UPS board)³
4. Raspberry Pi Zero W (with 32GB NOOBS SD-Card and solderless GPIO hammer header)⁴
5. Huawei E3372 LTE USB stick with mobile data SIM card⁵
6. Velcro strap (for attaching the LTE USB stick to the rest of it)⁶

In addition, you will need a domain name (I use and can recommend IWantMyName.com for mine) and you will need to know how to update your DNS settings for it.

To point your domain name to your device’s ever-changing IP address you will also need to use a service such as Ngrok (which is what I use here) or a dynamic DNS solution of some sort (which will likely need further setup)⁷.

Finally, to initially set up the Pi, you will also need a keyboard, mouse, and display to connect to it⁸.

Building it

This is the simplest step. Simply snap the Piz-UpTime with the 14500 battery to the Raspberry Pi Zero using the GPIO header³ and connect the LTE USB stick to the USB port on the Raspberry Pi⁴. Ensure that you use the power port on the PiZ-UpTime and not the one on the Pi itself to charge the battery and power the unit when connected.

Preparing the Pi Zero

To prepare your Pi to use as a headless web server, connect a keyboard, mouse, and screen to it. With the NOOBS SD-Card inserted, turn on your Pi. Once it boots, open up a terminal window and carry out the following steps.

Set up SSH access with public-key authentication

1. On the Raspberry Pi, select Preferences → Raspberry Pi Configuration from the Raspberry menu.

2. In the settings box that appears, set the subdomain.your.domain name you will serve your site from in the Hostname field.

3. In the Interfaces tab, select the Enable radio button next for the SSH field.

4. Click OK to save your settings and exit settings.

5. ssh into your Pi using the IP address of the Pi (which you can find by running ifconfig) and your Pi account name and password.

6. Add your SSH public key from your main computer (e.g., from ~/.ssh/id_ed25519.pub) to your Pi (e.g., into the ~/.ssh/authorized_keys file).

   If you do not have SSH keys generated on your main computer yet, follow the instructions here to create a pair.

7. Log out of your ssh session and reconnect without using your password to test that the public-key authentication you just set up works.

Set up ngrok

You need to configure ngrok to create three secure tunnels to the Raspberry Pi:

• HTTP tunnel for port 80 so Site.js can handle Let’s Encrypt challenges using the HTTP-01 challenge method.

• TLS tunnel for port 443 that Site.js will use to serve your web site on.

• TCP tunnel for port 22 so you can access your Pi at your domain name over SSH.

To do this, create a file called ngrok.yml in the ~/.ngrok2 directory (create the directory if it doesn’t already exist):

mkdir -p ~/.ngrok2
touch ~/.ngrok2/ngrok.yml

Then add the following configuration, customising it for your needs:

authtoken: <your-auth-token>
region: eu
tunnels:
  insecure-web:
    addr: 80
    proto: http
    hostname: <your-reserved-subdomain.your.domain>
    bind-tls: false
  secure-web:
    addr: 443
    proto: tls
    hostname: <your-reserved-subdomain.your.domain>
  ssh:
    addr: 22
    proto: tcp
    remote_addr: <your-reserved-tcp-address>

You can find your authtoken on your ngrok Auth page.

To learn how to reserve a custom domain, see the ngrok documentation for tunnels on custom domains and TCP Tunnels: listening on a reserved remote address. Also, alter the region to match the one you reserved your ngrok domains on.

Once you’ve customised and saved your ngrok configuration file, you can create your tunnels at any time using:

ngrok start --all

However, while that’s good for testing, what we want is for ngrok to start automatically when the Raspberry Pi does. This will allow us to SSH into the Pi so we can use it headlessly from now on and it will mean that once it has power, our web site will be reachable from anywhere in the world.

To do this, edit the /etc/xdg/lxsession/LXDE-pi/autostart file, add the following line to it, and save it:

@ngrok start --all

This will automatically run your ngrok tunnels in the background whenever the Pi boots up.

Install Site.js and run it as a startup daemon

1. Install Site.js

wget -qO- https://sitejs.org/install | bash

2. Create a basic web site:

# Create a folder to hold the web site.
mkdir -p ~/public

# Switch to that folder.
cd public

# Create a simple “Hello, world!” page.
echo 'Hello, world!' > index.html

3. Create a startup daemon using Site.js to serve your site (this will survive restarts and crashes, etc.):

site enable

Testing it

You should now be able to hit https://subdomain.your.domain and see your “Hello, world!” page.

Updating your site

Now that your site is live, how do you make it a bit more exciting?

1. On your main computer, create a more interesting web site than “Hello, world”.

   If you want to get an idea for the types of things you can build with Site.js, see the tutorial I wrote recently on how to build a simple chat app with Site.js.

2. Make sure Site.js is also installed on your main computer and then issue the following command:

   site --sync-to=subdomain.your.domain --exit-on-sync
   

3. Hit https://subdomain.your.domain again and you should see your new site.

To learn more about Site.js, read the Site.js documentation.

What next?

This is just the first prototype to come out of our work on Site.js as part of our research and development work at Small Technology Foundation. It doesn’t represent a specific product we are thinking of building but rather more the direction in which we’re thinking in general (which might result in products later on).

I hope, though, that it does help demonstrate two important points:

1. We all already carry much more powerful and refined versions of this prototype in our pockets (it’s your smart phone) and yet we cannot run our own web sites on them.

   Why not?

   Because the Big Tech corporations that make these devices don’t want us to.

   I hope this gives folks like Purism and e.foundation some ideas about what they could do in this area to differentiate themselves from the likes of Apple, etc.

2. If we want the sort of freedom devices like this can offer people, we must ensure that they just work out of the box.

   While I hope that you have found this post interesting if you’re a tinkerer or developer, I also hope that it highlights the mountain of work that must be done if we want all the various aspects outlined here to work seamlessly when our audience is everyday people who use technology as everyday things.

   I hope this post has inspired to you think about what you can make that everyday people can use to take ownership and control of the digital and connected aspects of their lives.

As always, please feel free to let me know your thoughts.