Create a Basic Website on a Raspberry Pi

This article was revised and updated on 29th May 2017.

The Raspberry Pi is a small Linux computer designed to help children learn programming. Being a full Linux System, it can also be used as a server or as the basis for various projects. This post describes how to install Apache onto the Pi and set up a basic web site.

My Raspberry Pi was purchased from RS Components in the UK. It was installed with Raspbian “Jessie” (Debian 8) by applying the image “2017-04-10-raspbian-jessie-lite.img” downloaded from the raspberrypi.org downloads page, where it is described as “Minimal image based on Debian Jessie”. The following procedure was then performed without any further pre-work (other than enabling ssh in the basic setup).

Install Apache Web Server

Log into your Pi, either directly or through ssh from another system. I am using ssh. Install Apache as follows.

$ sudo apt-get update
$ sudo apt-get install apache2

When asked if you want to continue, type “y” for “yes”. Apache will be installed along with a number of other packages.

Your New Website

In a web browser, surf to the URL http://<ip address of your Pi>. For example, the IP address of my pi is 192.168.1.71, so I surf to “http://192.168.1.71”.

Note: The IP address of your Pi can be found with the ifconfig command:

pi@raspberrypi ~ $ ifconfig | grep inet
          inet addr:192.168.1.71  Bcast:192.168.1.255  Mask:255.255.255.0
          inet addr:127.0.0.1  Mask:255.0.0.0

You should see a web page with the title “Apache2 Debian Default Page“. You are now looking at your new web site. It is just showing the default page because nothing else has been added yet.

The web page will be visible from any computer, smartphone or tablet on your home network, even in a browser running on the Pi itself.

Edit the Website

Let’s add some content. Move the default page and create one of your own:

$ cd /var/www/html
$ sudo mv index.html index.html.org

Use an editor to create a new index.html file. I use the “vi” editor, but you could use whichever editor you are most comfortable with, eg. nano.

$ sudo vi index.html

Add these two lines to the file, then save it and quit out of the editor.

<h2>My web page</h2>
<p>John Smith's web page</p>

You might want to substitute your own name for “John Smith”. Surf to your web page again (or just refresh the page in your browser) to see the the newly edited web page. There should be a “My web page” header and below it, in smaller text, “John Smith’s web page”.

Congratulations, your web page is complete.

Expanding the Web Site

Many sites on the Internet offer instructions on basic HTML writing. One of the best is w3schools. Just by editing the index.html file, You can add text, pictures, links to other sites, and so on. Beyond that, you can create more pages, write scripts to perform functions, or install “content management” software (CMS). CMS systems enable you to create a large and complex web sites without doing much work.

Going Public

If you want to see the website from outside your own home, for example from your office or school, proceed as follows.

1. Make an adjustment on your home router to forward port 80 to the IP address of your Pi.  It is easy.  Just log into your router and follow the menu system to make the change. Port 80 is also called the “http” port. (Note: for security, do NOT forward any other ports).

2. Identify the public IP address of your home router.  You can get it from the router’s menu system, or go to a site like http://www.whatismyip.com, and it will tell you. Or just type “my ip” into Google, and your public IP address will pop up straightaway.

3. At your remote location (eg school/office), just surf to http://<your public address>.  You should see your familiar web page pop right up.  It works from a smartphone too.

Dynamic IP Addresses

From time to time your router’s public IP address will change.  It might happen every two weeks or so. To visit your website from outside your home, you will then have to get the new IP address (eg. from http://www.whatismyip.com) and start using that.

Alternatively, get your own domain name.  You can visit your site from outside by surfing to http://<your domain name>, instead of typing in the IP address. The domain name is easier to remember, and won’t be affected by IP address changes.  Many providers will give you a domain name for a small charge, and some provide them for free, eg http://www.noip.com.

This later article describes how to obtain a domain name and use it with your new web site: Using a Domain Name with a Raspberry Pi Web Server.

That’s it. Happy web authoring!

A Note on Security

If you followed the instructions above and made your Pi website visible from the internet (forwarding port 80 etc), that’s great. You now have your own Internet server. Like all “internet facing” servers, your Pi should be kept up to date with the latest security patches. Do that by running these commands every couple of weeks:

$ sudo apt-get update
$ sudo apt-get upgrade

(Note: that last command, if you have never run it before the Pi, will download many updates and 20 minutes or so to complete. Subsequent runs will be much quicker). Finally, reboot the Pi so the updates can take effect:

$ shutdown -r 0

Protecting your Web Site with TLS/HTTPS

If you wish to protect your website by converting it from HTTP to HTTPS, please see my later article: How to Convert a Website from HTTP to HTTPS.

7 thoughts on “Create a Basic Website on a Raspberry Pi

  1. Pingback: Raspberry Pi Basic Configuration | Unix etc.

  2. Pingback: Simple Picture Gallery on Raspberry Pi | Unix etc.

  3. Pingback: Using a Domain Name with a Raspberry Pi Web Server | Unix etc.

  4. Pingback: Set Up Your Own Link Shortening Service with a Raspberry Pi | Unix etc.

  5. Pingback: How to Convert a Website from HTTP to HTTPS | Unix etc.

  6. Hi, I’ve been following your brilliant tutorial on how to set up Nextcloud on my raspberry pi 3 b+. However, Im stuck on one particular part of securing my data with https. After I enter the line to create my webpage:

    $ sudo vi index.html

    and copy

    My web page
    Josh Venegas’s web page

    How do I save and quit?

    Thank you so much for putting this tutorial up, I was about to quit.

    • Hi Josh and sorry about the lateness of this reply. If you are not sure how to use the vi editor, I would recommend learning about vi (or another editor) before attempting the above procedure. Almost everything in Linux involves the editing of text files, so learning how to use a file editor is important.

      Having said that the way to save in vi is to press escape a couple of times, the press the colon key (:), then type “w” to save or “wq” to save and quit.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.