Raspberry Pi Home Server v2: Creating a Home Page

Note: This post is part of a series. Each post builds on the previous ones. If you are just trying to add one thing to an existing system that was not built following this series, then I cannot promise that these instructions will work for you, although they probably will. If you’ve started from something other than a non-NOOBS Raspbian image, then you’ll probably need to adjust for that.

Please refer to the series Introduction for a list of all the different posts in the series.

Self-Promotion: I have recorded this series as a screencast for Pluralsight:
(http://www.pluralsight.com/courses/raspberry-pi-home-server)
If you have a Pluralsight subscription, please consider watching it. Reading the instructions is one thing, but watching it done demystifies the whole process.

Thank you!


Over the course of this series, we’ve installed a number of packages that expose web interfaces on various ports, and it’s starting to get a little hard to keep track of. So far, we have

  1. Webmin: port 10000
  2. Transmission: port 9091
  3. Resilio Sync: port 8888
  4. Syncthing: port 8384

It’s getting hard to keep track of what port does what already. What we need is some kind of index with links to these various services. In this post, we’ll create a simple home page for the Raspberry Pi Home Server with links to the UIs for the various packages.

If you already have a web server running (e.g. Apache, Lighttpd, Nginx), then you can just use those. If you’re running WordPress, then you can just create a post with the links in it and make it sticky.

I’m not actually running WordPress on my Pi, so I’ll need to start from scratch. I’m going to show how to build the home page using Nginx (Engine-X). It’s significantly smaller and faster than Apache, and is very light on its resource usage, which makes it a great choice for the Raspberry Pi. Since it’s going to be serving up a very small and simple static web page, we don’t really need a full-blown Apache instance here.

As with most things, install Nginx using apt-get

sudo apt-get install nginx

That’s it. You now have a web server, and it’s already running. Open a browser, and go to the address of your raspberry pi with no port specified. You should see a “Welcome to nginx” page like this.

01-nginx

All we need to do now is customize that page to say what we want. The file we need to edit lives at /var/www/html/index.nginx-debian.html. This location has changed in the past, so the filename may not be exactly the same, but it should definitely be found in that location. Open it for editing.

sudo nano /var/www/html/index.nginx-debian.html

I’m going to make some simple changes, changing the title to match the name of the computer it lives on, and replacing the body with a simple list of available services. You can get as fancy as you want. Use jQuery and Bootstrap. Go nuts. Build the page of your dreams. For this demo, however, I will go with the simplest thing that works.

<!DOCTYPE html>
<html>
<head>
<title>RPHS</title>
<style>
  body {
    width: 35em;
    margin: 0 auto;
    font-family: Tahoma, Verdana, Arial, sans-serif;
  }
</style>
</head>
<body>
<h1>RPHS</h1>
<p>The following services are available:</p>
<ul>
  <li><a href="https://192.168.1.11:10000">Webmin</a></li>
  <li><a href="http://192.168.1.11:9091">Transmission</a></li>
  <li><a href="http://192.168.1.11:8888">Resilio Sync</a></li>
  <li><a href="http://192.168.1.11:8384">Syncthing</a></li>
</ul>
</body>
</html>

You can just copy and paste this over the existing content if you want. Rather than saving it over the original file though, lets save it as simply “Index.html”. Press Ctrl-O to save the file, and simplify the name when prompted. Nginx will use the new “Index” file instead of the old “index.nginx-debian.html” one. You can delete “index.nginx-debian.html” if you want, or keep it around.

There are a few things to note here. The links are all fully qualified from the static address down to the port. It is not possible through plain old html to create a link that goes to a different protocol (https) or port (10000) under the same root. You can do it through javascript, but since this server has a static IP address, I can safely assume that it’s not going to change on me, and this does the job for now.

I’ll leave it up to you to make your index fancier/prettier, but this accomplishes the job of keeping everything straight, even if it’s not very attractive.

Advertisement
This entry was posted in Computers and Internet, Home Server, Raspberry Pi and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s