A Physical Web Space, is a website which follows you around wherever you go. Literally, hence the "physical". It is hosted in a tiny server that I carry on myself, powered by... 3 AAA batteries! Users can access it through a local WiFi network generated by the server, which is open in order to tempt them to join it. It also acts as a captive portal, redirecting all (well, most) requests to the local website.

The physical web space, is something I wanted to make for at least four years but never really had the proper hardware that was fulfilling my requirements. That was until the Raspberry Pi Zero came out a week ago.

I wanted to create an ultra portable web server, that could be deployed anywhere, with a WiFi hotspot around it which would be used to instantly share information, without the need of an Internet connection.

This server would have to be small, cheap, power efficient, as well as easy to maintain and set up. The Raspberry Pi Zero's low price, small size, low consumption and high usability, due to the huge online community, made it the perfect candidate! The total system cost was around 15 euros, since everything except the RPi was bought from China and can last around 4 hours on 3, very humble, AAA batteries!

Currently, I am using the Physical Web Space, just to "market" itself and... me, however it can have numerous other applications. Imagine such servers being installed in remote sites (forests, archaeological sites, natural reserves, mountains), providing instant information to the ones near it. This, could vary from trivia clues about their surroundings (i.e. historical data, folklore stories, pictures of birds or plants) to possibly life saving resources such as maps, emergency instructions and directions to the nearest shelter. Their ability to deliver media content, which can be stored on the users' devices, makes it a particularly attractive solution in many scenarios where the user has no Internet connection and needs to acquire and save a lot of information fast, such as images, maps, directions, instructions or other kind of data.

In the future, such systems can be additionally utilized to offer a fast peer to peer form of interaction and communicate autonomously with each other, if two or more are within range. Creepy? Hmm, maybe with today's standards. :)

Step 1: Necessary Materials

Raspberry Pi Zero: Our server. A normal Raspberry Pi would also work, however it would be larger and consume more power.
RALINK RT5370 WiFi dongle: Very cheap, works out of the box and creates the WiFi hotspot.
Micro USB OTG adapter: In order to connect the RPi with the WiFi dongle. I used some tiny ones from China, that cost 0.3 euros each (including shipping).
DC converter - step up module: Will boost up the voltage of our power source, to 5V. The one I bought cost me 0.7 euros from China.
3 AAA Battery holder: I think the combination of 3 AAA batteries is one of the weakest, but probably the cheapest power source for the Raspberry Pi you can get. Still, you can power it up for around 4 hours this way, using the default RPi setup, without any optimizations.
4GB microSD card: You will use this to install the operating system running on the Raspberry Pi. Do not choose the cheapest one you can find, in order to avoid weird problems.
A box: I used a nice transparent box that came with some earphones I bought, that was just big enough for everything.
A short USB male to micro USB male cable: To connect the step up module with the RPi.
Wires and cable terminal: For soldering on the step up module and connecting it with the batteries.

Alternatively, you can skip some hassle and power the Raspberry Pi up using a USB powerbank, however that will raise the budget a bit.

Step 2: Prepare the Raspberry Pi

I ran into some problems* with my Raspberry Pi Zero, so I had to implement everything on an older Raspberry Pi Model B that I have and then just use that micro SD card in my Zero. Regardless of that, if you do not own another Raspberry to do the same, after installing up your Raspbian image, you will have to find a way to communicate with the Pi while you are setting the WiFi hotspot up. You will have to either use a USB hub and attach to it a second WiFi dongle or use a USB to RJ45 adapter. The one in the picture costs under 2 euros from China and will work out of the box.

After you install the OS, make sure that you WiFi dongle(s) are working properly, are recognized by the system and can connect to the Internet. I will not go over the instructions on how to do that, as there is already a lot of material online.

Once you do that we are ready to begin!

_{*I suspect that my RPi Zero might be defective, as it crashes whenever I try to update or install something, but other than that it works fine.}

Step 3: Install the Necessary Software

Download the latest package lists from the repository:

sudo apt-get update

Install hostapd, dnsmasq and lighttpd. hostapd will enable you to create a WiFi hotspot, dnsmasq will be utilized in order to assign IPs to the hotspot users and redirect all of their requests to our local page and the lighttpd (pronounced "lighty") will be our web server for our webpage.

sudo apt-get install hostapd dnsmasq lighttpd

The instructions that will follow were originally found in the following websites:

Step 4: Assign a Static IP to Your WiFi Dongle

First, we need to assign a static IP for the server to have in the WiFi network, which we will soon create.

Edit the /etc/network/interfaces file

sudo nano /etc/network/interfaces

Comment out, by adding "#" in the beginning, the two lines that can be found under allow-hotplug wlan0

iface wlan0 inet static

address 192.168.42.1

netmask 255.255.255.0

Eventually, it should look like in the screenshot above. Now the IP address of your WiFi (wlan0 interface) will be set to 192.168.42.1

Step 5: Configure Your WiFi Hotspot Properties

Create the /etc/hostapd/hostapd.conf file:

sudo nano /etc/hostapd/hostapd.conf

Put the following text in it:

interface=wlan0

ssid=MyPhysicalWebSpace

hw_mode=g

channel=6

auth_algs=1

wmm_enabled=0

This will create an open WiFi hotspot, called MyPhysicalWebSpace, using channel 6. Edit these attributes accordingly if you wish. Save the file pressing Ctrl + o and then exit by pressing Ctrl + x .

Your hostapd.conf file should look like the one in the screenshot above.

Step 6: Set Hostapd to Use Your Configuration File

hostapd will not use the configuration file you just made automatically. You have to define its path in the /etc/default/hostapd file.

sudo nano /etc/default/hostapd

Add the following line to it:

DAEMON_CONF="/etc/hostapd/hostapd.conf"

Which is the path to the configuration file we previously created. Your file should now look like the one in the screenshot. Press Ctrl + o to save and Ctrl + x to exit.

Step 7: Configure the Dnsmasq Properties

Edit the dnsmasq configuration file, in order to define the network interface that will be used (wlan0) and set the range of the IPs that can be given the the hotspot users. Also you will add the address where all their requests will be redirected to. Since your webserver will not have an Internet connection, it does not make sense to let them get error pages while trying to browser the Internet. Also, this will allow your hotspot to be considered a captive portal by the various mobile devices and display a notification for the user to sign in, prompting them to visit your web page.

First, let's edit the /etc/dnsmasq.conf file:

sudo nano /etc/dnsmasq.conf

Add the following lines in the end:

interface=wlan0 # Get dnsmasq to listen only on wlan0

dhcp-range=192.168.42.2,192.168.42.25,255.255.255.0,12h # Range, subnet mask, lease time

address=/#/192.168.42.1

Now, your file should look like the one in the screenshot. The above configuration, will allow up to 24 users to be served (by getting IP addresses) from your hotspot. If you need more, then change the 25 in 192.168.42.25 accordingly. Ctrl + o to save and Ctrl + x to exit.

Step 8: Make Dnsmasq and Hostapd to Start on Boot

Next, we need the dnsmasq and hostapd to start every time our RPi is booted up.

Run the following two commands:

sudo update-rc.d hostapd enable

sudo update-rc.d dnsmasq enable

Step 9: Create a Sample Webpage

Now that we have the WiFi hotspot and the captive portal set up, we need to create a webpage where our WiFi users will be redirected to when they are prompted to sign in our network or when they try to visit another website through their browsers.

First, rename the default index, created by the lighttpd server which can be found in /var/www/html/ which is the default root of your website:

sudo mv /var/www/html/index.lighttpd.html  /var/www/html/old_index.html

You can also completely remove it by replacing mv with rm in the above command.

Next, create a new index.html file:

sudo nano /var/www/html/index.html

Add the following html to it, to create a simple welcome page:

<html><body><h1>Welcome to my physical web space!</h1></body></html>

Ctrl + o to save and Ctrl + x to exit. If you don't adapt accordingly, it should look like the one in my screenshot.

Step 10: Make Our Server Redirect All Faulty Requests Back to Our Webpage

Right now, the users will be redirected back to our web page if they try to visit a website. So typing http://example.com will redirect them to the webpage we just created. However, if they try to visit http://example.com/something they will reach an error page. This will happen because they will try to reach the /something folder of our web site which obviously does not exist.

In order to avoid this, we will be redirect all of the 404 errors (for not found pages) back to our main index page. We do this by editing the lighttpd configuration file, found in /etc/lighttpd/lighttpd.conf:

sudo nano /etc/lighttpd/lighttpd.conf

Add the following text before index-file.names:

server.error-handler-404 = "/index.html"

After you have made sure your file looks like the one in the screenshot, Ctrl + o to save and Ctrl + x to exit.

Note: You will not be able to redirect URLs that contain https addresses, due to how the secure connections work. The users will get errors if they try to visit https://platis.solutions for example. If you find a nice way to redirect those, please let me know! :)

Step 11: (Optional But Crucial) Change Your Default Password

Last but not least, if you are taking the server outside, you do not want anyone to be able to connect to it, using the very well known default username and password. Use raspi-config in order to change your password:

sudo raspi-config

Then reboot your RPi:

sudo reboot

Step 12: Verify It Works

That was it! If you have followed the instructions correctly, upon rebooting the Raspberry Pi, you will see the new network and will be able to connect to it.

After doing so, you should be also receive a notification to sign in from your mobile device.

Check a typical usage scenario also illustrated on the screenshots above:

The user gets notified there is a open WiFi network available, tempting him to join.
The user gets connected to the network and gets prompted to sign in.
The user visits our web page.
When attempting to visit another URL from their browser, gets redirected back to our web page. (works also with subfolders)
The user will only get an error when trying to visit an https website.

Step 13: Put Everything Together Into a Box

Find a nice box to place everything in securely. As you can see, mine is smaller in length than a credit card. If you use a LiPo battery (be careful with it!), you will need even less space.

Let me know how you plan to use your personal web space in the comments below! :D

Introduction: My Physical Web Space