Introduction: My Physical Web Space

Picture of My Physical Web Space

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

Picture of Necessary Materials
  1. Raspberry Pi Zero: Our server. A normal Raspberry Pi would also work, however it would be larger and consume more power.
  2. RALINK RT5370 WiFi dongle: Very cheap, works out of the box and creates the WiFi hotspot.
  3. 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).
  4. 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.
  5. 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.
  6. 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.
  7. A box: I used a nice transparent box that came with some earphones I bought, that was just big enough for everything.
  8. A short USB male to micro USB male cable: To connect the step up module with the RPi.
  9. 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of (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

Picture of 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:

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

Step 13: Put Everything Together Into a Box

Picture of 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

Comments

robdixn made it! (author)2017-06-04

Great instructable Platis, just what I've been looking for!

I used it to make a wireless NAS drive from my Raspberry Pi Zero to backup my photos and other documents in places where I have no internet connection.

I used a power bank instead the battery pack and DC converter as I always carry a fully-charged power bank around in case of emergencies.

I also used the IP 192.168.0.1 instead of 192.168.42.1 as I find it easier to remember (I'm aware that I could just use the hostname but some of my devices fail to decide between 'raspberrypi' and 'raspberrypi.local'. I think it's to do with Apple's Bonjour service, so just bear that in mind if you have iTunes installed or use any Apple product).

For the web-server part of the project, I simply set the web-server to list all the files in my NAS share folder, making it easy to download the photos and files from the NAS share folder without having to login to the NAS service itself.

PhillipeM (author)2016-09-06

Hi Dimitris, i did some close to this about a year ago. At the time i couldn't make it to work like a captive portal when connecting with iphone without internet. did you get it?

I mean, on phone you find the wireless, and when you tap the wireless a page come up with the webpage like logging on a hotel hotspot. the person don't need to open the browser, it opens automatic.

I've tried this with iPhones as well. They work just as fine. So now you know how to do this! :)

kmicb5 (author)2016-04-19

One could add a GSM modem (of their choice, not that expensive) thus providing a data connection to said awesome box. :-)

mohtaprashantrocks (author)2016-03-31

Hey , awesome project.
I would like to know whats the maximum number of simultaneous clients that this can support? As in even most laptops struggle after 5 clients .

Hmm, I have not tried to stress-test it. The most that have been tried connecting at the same time was 3 but then I ran out of... devices to use. :P

There did not seem to be a problem, but the website I had it serving, was really simple, a single page, few images and some php.

DavidH364 (author)2016-02-11

Hi Dimitris - what a wonderful project, and JUST what i was looking for! Am also based in your locale (if I figured correct) and wondered if you had a preferred site for ordering to here from China?

I'm glad you like it! I usually order from high ranked sellers in AliExpress. However as right now they have their spring festival celebrations, the orders will take longer than normal to arrive.

yes, had that issue with correspondance with various suppliers this last week, as has my colleague. thankyou for the tip though... have used AEx before and made a good picking list this evening. Look forward to seeing a lot more of your work in the future!

CannyK (author)2016-01-24

Hi, I'm actually a bit confused on how this works. Can I just walk around with it anywhere and it'll work ? And how will I toward Etc. I tried to look for explanations of how it works online but to my dismay I could not .

Dimitris Platis (author)CannyK2016-01-24

Which part do you have questions for?

CannyK (author)Dimitris Platis2016-01-24

Can I just walk around with it anywhere and it'll work ? And how will I foward someone to my website Etc

Dimitris Platis (author)CannyK2016-01-24

Well yes, if you follow the tutorial, it should do what it says it does. :)

It doesnt forward someone to your website which is on the internet, but to a local website that is stored on the local server, the RPi Zero.

CannyK (author)Dimitris Platis2016-01-24

So I can have a random blog or something on it?

Dimitris Platis (author)CannyK2016-01-24

Yes, anything you can host on a local server!

jplaiss (author)2016-01-15

Fantastic idea.
The remote location use you described is genius.

IsmaelA4 (author)2016-01-07

Hey! Nice project! I was wondering if it's possible to change this:

-DC converter

-3 AAA Battery holder

And put this:

- Powerbank

http://www.amazon.com/Fintie-GIGAPOWER-10400mAh-Al...

Dimitris Platis (author)IsmaelA42016-01-08

Yes, of course! That should give it enough juice for maybe a day or so!

Instructablepro1996 (author)2015-12-17

Cool Project! I was looking for the raspberry pi on amazon.co.uk (since I live in Europe) and it wasn't there yet, do you know when its coming out? Also could I use rechargeable batteries with higher mah for a longer duration?

Where else could I buy the Raspberry Pi Zero?

If you live in Europe, then The Pi Hut (http://thepihut.com/) and Pimoroni (https://shop.pimoroni.com/) are the ones that officially get the Zero's. It is currently out of stock in both, however you can choose to be notified when there is stock again, so you will have a couple of hours to buy one, until they are gone again.

shiroininja (author)2015-12-16

to avoid the issue, you can set the wifi up without having the dongle connected.

Which issue are you referring to?

gulliverrr (author)2015-12-14

Γεια Δημήτρη,

well done! Do you have an idea of how long it is running (with the WiFi and all) off the 3 batteries?

Max 3 hours. I'd say 2 to be safe. :)

Some optimizations could possibly be made in software in order to reduce consumption.

ganastor (author)2015-12-13

This is awesome... reminds me of piratebox/librarybox which I use on my mr3040 with openwrt, but this is a great alternative, nice job!

Dimitris Platis (author)ganastor2015-12-13

Yes, piratebox was my inspiration as well when the idea got first stuck in my head some years ago!!! :D

Dimitris Platis (author)2015-12-10

Yeap! The kind you can put in your pocket and power it with 3 AAA batteries. Plus the WiFi hotspot and the captive portal. :)

Thanks,been needing this.just need a file share app.

Sandbird (author)2015-12-13

Interesting. I bet i can hook up a portable usb adapter with an external 20db antenna and extend the range of it.

(Πολύ καλό :P)

McJono (author)2015-12-12

Wouldn't it be more power efficient to use something like NodeMCU on a esp8266 with external sd card controller?
I mean you can set it up by writing to the serial of the esp8266 and then making it serve up web pages from the sd card?

Dimitris Platis (author)McJono2015-12-12

Hi, good point!
Actually that was my first approach. It would have definitely a lower power consumption. However I gave up on that, due to the fact that my ESP8266 was awfully slow in AP mode (actually it kept crashing when more than one request was made at a time, not sure why).
The RPi solution is much easier to deploy (no code involved) and is extendable, as the RPi is a computer, not just a microcontroller. Also not sure how possible it is to create a captive portal using an ESP8266. Never made it to this part, as I stopped trying long before that. :P

My reasoning is the following: This is not a "product" that has a specific use and therefore could be improved by lowering its power consumption. It is a proof of concept on the idea of a cheap, small, portable server that could be used in various scenarios (some of which, I have mentioned in "Step 1") to create "products". Having this in mind, the RPi offers a more options and potential than a microcontroller. :)

McJono (author)Dimitris Platis2015-12-12

Ah ok that does make sense. I'm waiting for the esp32, that might be able to run it better.
Yeah I was just thinking on the behalf of the least power consumption but the wifi capabilities of the esp8266 is rather slow as a AP server.
Ah ok, that makes sense :)

No worries. I think I'll try to make one out the the nodemcu + esp8266 just as a test anyway as if you strip the firmware down to bare minimums wifi AP isn't too bad. Will link it when it's done for you :)

Dimitris Platis (author)McJono2015-12-13

Cool, i am looking forward to see it! Good luck! :)

ybaggi (author)2015-12-12

This is an interesting technical project. I'm curious to see the actual applications people come up with.

I'm dubious about the remote information access applications, since when you can't access the web form a location, you're also out of luck updating your website remotely.

So on a stationary basis I see only limited use. But on mobile project, it could update itself (if necessary) when around an open wi-fi connection and work as you intendent when not.

I'm definitely going to be following this project's development.

Thank you.

Dimitris Platis (author)ybaggi2015-12-12

Hi, thanks for your input!
About updating it remotely, I have given it some thought and concluded that in the use cases I have thought of, you probably will not need to update it that often. If you must do that, someone will have to physically approach the server and have a script that connects to it and updates the website.

nateO (author)2015-12-11

Neat.

rafununu (author)2015-12-11

More than interesting. Imagine what's possible with a RFID.

Samuel_Alexander (author)2015-12-11

Really neat project and step by step. I think I will make one as soon as I get my hands on my raspberry pi zero ;)

ETERNUR (author)2015-12-10

Great project Dimitris. I'm curious the range of the Wifi this creates?

Dimitris Platis (author)ETERNUR2015-12-11

That depends on the wifi adapter and the surroundings, but based on previous experience with such super cheap widi dongles, i would say that it will easily cover the average size of a room. So around 30 meters i suppose.

Bwata (author)2015-12-10

is there a way for that to attached to an existing wifi network and have that as a local server that I can access from my computer? I was thinking I would want access to this server and the outside internet at the same time.

Dimitris Platis (author)Bwata2015-12-11

If I understood you correctly, that is an easy scenario. You will have to skip everything mentioned here about creating a hotspot and a captive portal and just.... connect it to your local wifi. Once you do that you can install a server (lighttpd or otherwise) and then by visiting the Pi's IP address in your browser, you will be accessing the server. For convenience you might also want to make the IP it gets when connecting to your network always the same (static) so you make its access easier.

If you want to access it from the outside world, you will either have to do some settings on your router (particularly it's usually referred to as port forwarding) or use a service such as no-ip to give it a standard URL address (e.g. http://myPi.no-ip.org).

AaronA31 (author)2015-12-10

A very inspiring little project, great job!

arkhipenko (author)2015-12-10

This is a very interesting idea, and excellent execution.

Thanks! :)

DIY Hacks and How Tos (author)2015-12-10

Awesome micro server!

"Micro server", I like that name! Thanks! :)

About This Instructable

25,341views

506favorites

License:

More by Dimitris Platis:Nevma: Gesture Control for the MassesA Christmas-tree PCB OrnamentMy Physical Web Space
Add instructable to: