Introduction
Would you like to host a web server using your Raspberry Pi at your home? In the following tutorial, you will accompany us in the setup of running a web server on your Raspberry Pi in mere minutes. Furthermore, we will also guide basic HTML coding to help you begin creating your website. At the conclusion, you will have a website running on your Raspberry Pi, which can be accessed online. We will discuss installing the required software, adjusting the web server settings, and making a few example HTML pages. If you are interested in acquiring web development skills or trying out hosting your site, this tutorial is a simple and enjoyable way to begin with a Raspberry Pi web server.
What is a web server?
In simple terms, a web server is a computer that has the required software and files to operate a website. Key activities involve running web server software to handle requests and saving the website’s components like HTML pages, pictures, videos, and other multimedia. For a website to be reachable, the web server must have a consistent link to the internet. Should the connection be lost, users will be unable to access the website. In the case that the web server is shut down or loses internet connection then the website hosted by that server will simply be unreachable until the server regains its connection. In its most basic sense, a web server can be best described as the hub or backbone of the web on which all aspects of a particular site rest and which itself remains ever available to the public with some sites running 24/7 to ensure that the site is live most of the time.
How are you able to visit websites through the browser?
When a user inputs a website’s URL into their browser, various processes occur in the background to show the page. Initially, the browser processes the URL and changes it into the relevant IP address. Next, it transmits an HTTP request via the internet to the web server using that IP address. When the server’s software receives the HTTP request, it becomes operational. It receives the browser’s request and finds the particular file or page linked to the URL. After locating it, the server compiles the desired webpage and returns it to the original browser via a different HTTP response. This reply involves sending the entire page via the internet and displaying it in the user’s web browser. This method enables individuals using a web browser to request content from a remote server and see it instantly by converting the URL to an IP address and communicating via HTTP.
Advantages of building a web server on a Raspberry Pi
Using a Raspberry Pi as a DIY web server comes with numerous advantages. Firstly, it offers a highly affordable option in contrast to pricey commercial hosting packages. Establishing a personal Raspberry Pi web server helps conserve electricity due to the minimal power consumption of these small computers. Moreover, as everything is powered by a compact single-board computer, it enables genuine portability, enabling you to effortlessly move your complete server configuration to a different place if necessary. You have the freedom to choose any Raspberry Pi model, from modern high-performance ones to the small yet capable Raspberry Pi Zero, to host your website. In general, a Raspberry Pi offers a very cost-effective and eco-friendly way to host your website from anywhere with minimal hardware requirements.
Building an Apache Web Server on a Raspberry Pi
However there are myriads of web servers available to use within your raspberry pi, this tutorial will center its discussion on the Apache server. Apache is one of the most widely used web servers that is also open-source and has a large following and plenty of documentation making it ideal for newcomers. It can serve HTML files to clients using both HTTP and secure HTTPS protocols. Moreover, Apache has the capability to be enhanced with modules to provide dynamic content using technologies such as PHP. Yet, in this beginner’s guide, we will set up Apache in its simplest form to solely serve static HTML pages for ease. This simplified method enables us to efficiently launch a working website on the Raspberry Pi without making the initial setup process too complex. Further down the line, further Apache functionalities can be investigated once the basics are established.
Material required
Setting up an Apache web server on the Raspberry Pi is quite straightforward. Here are the basic items you’ll need:
Raspberry Pi computer
USB Type-C cable and power adapter for connecting and providing power.
A MicroSD card containing a Raspberry Pi OS image, accompanied by an SD card reader.
Argon ONE Raspberry Pi 4 aluminum case, if desired
Once the Apache server is up and running, we suggest using the Argon ONE case for your Raspberry Pi as it will be operating non-stop. Adequate cooling is crucial for prolonged use, and this case offers both efficient heat dispersion and a sleek aluminum casing.
The minimum necessities include the Raspberry Pi, a power source, and an SD card with the operating system. However, the optional case is essential for optimal long-term performance of your new home web server, ensuring smooth operation and preventing overheating problems. Now you have the tools to effortlessly develop your own budget-friendly, energy-efficient Apache hosting option.
Configuring the Raspberry Pi for initial boot
Unlike some other single-board computers the Raspberry Pi does not come with a preloaded operating system. The first action requires configuring of a micro-SD card with the help of a Linux distribution suitable for Raspberry Pi. This involves having the Raspberry Pi OS image downloaded from the internet, using disk imaging software that is on your computer to put the image onto the SD card after which the micro-SD card is placed into the Pi. Following the power on, Raspberry Pi shall boot from this card since it is unable to function if it does not have an operating system installed on the micro-SD card. Therefore, it is crucial to set up the SD card with a Raspberry Pi OS before turning on the small computer for initial use.
Step 1
To begin, we need to acquire a Linux operating system that is compatible with the Raspberry Pi hardware. While other distributions like Ubuntu can be used, this guide will stick with the official Raspberry Pi OS from the Raspberry Pi Foundation. It offers a lightweight desktop-oriented OS tailored specifically for Raspberry Pis. Head to the Raspberry Pi download page and obtain the ‘with desktop and recommended software’ version of Raspberry Pi OS. This fuller image contains desktop tools that make setup and usage more user-friendly compared to the minimal installation. Downloading the full Raspberry Pi OS from the supplier ensures we have an OS built for our needs as we prepare the SD card and start our web server setup process.
Step 2
Next, we’ll need a disk imaging tool to write the operating system image to the microSD card in a format the Raspberry Pi can boot from. A popular cross-platform application for this task is called balenaEtcher. It provides an easy graphical interface for imaging files onto SD cards. Head to the balenaEtcher download page and obtain the latest version for your system. This software will allow us to take the Raspberry Pi OS file we downloaded earlier and burn it directly onto the microSD, preparing it to function as the boot device for our Raspberry Pi. With balenaEtcher in hand, we’re ready to head into the setup process for authorizing our microSD with a working OS.
Step 3
Once balenaEtcher is installed, take the microSD card you want to use for the Raspberry Pi and insert it into your regular computer’s SD card reader. If your computer lacks a built-in microSD slot, no problem – simply use a microSD to standard SD card adapter first before connecting the memory card. Alternatively, you can opt for a USB microSD card reader to interface with the tiny storage card. The important thing is getting the microSD connected to your computer somehow so you can prepare it for use in the Raspberry Pi. Whether via built-in reader, adapter or separate USB device, connect up the microSD now so we’re ready for the next step of writing the operating system image.
Step 4
With the microSD card now connected to your computer, launch the balenaEtcher application. Use the file selection dialog to navigate to and choose the Raspberry Pi OS image file you downloaded earlier. Then, select the microSD drive from the dropdown menu. This identifies the target for writing the OS image. Finally, click the “Flash!” button to initiate the burn process. BalenaEtcher will now copy the installation files over to the microSD, formatting it accordingly. Please be patient as this can take several minutes to fully write the image. Sit back and let balenaEtcher do its work – when complete, you’ll have a bootable microSD ready to use in your Raspberry Pi for installing and running your web server OS!
Step 5
Next, we’ll configure the WiFi connection so the Raspberry Pi can join our network automatically. This step allows remote access for administration and management. However in case you have a monitor, keyboard, and mouse for directly connecting to the Raspberry Pi, you may skip wireless configuration for now and instead proceed to download the Apache server software.
Additionally, if you have a Seeeduino XIAO microcontroller board, you can use it with the Raspberry Pi to establish serial communication between the two devices as described in this guide. Once that connection is in place, you can forego WiFi setup as well and move directly to installing Apache.
The goal of this step is to establish a link for remote access. If you can hook up locally with peripherals instead, feel free to skip wireless configuration for now. Let’s get the network or serial link prepared to continue our Raspberry Pi web server installation.
Step 6
To set up the wireless connection, we first need to create a network configuration file on the Raspberry Pi. Connect to the Pi via SSH or mount its filesystem on your local computer. Then navigate to the root directory and use a text editor to create a new file called “wpa_supplicant.conf”.
country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
ssid=”WiFi-name”
psk=”WiFi-password”
key_mgmt=WPA-PSK
priority=1
}
Step 7
Create a blank file called “ssh” in this directory
Step 8
Then eject the micro-SD card from PC and insert it into the Raspberry Pi.
Step 9
Power up the Raspberry Pi through a Type-C USB cable and a power adapter
Step 10
For the next steps, we will need an SSH client program to establish a remote command line connection to the Raspberry Pi. A cross-platform tool widely used for this purpose is called PuTTY.
Head to the PuTTY download page to obtain the latest version compatible with your system. PuTTY provides a simple terminal interface over SSH, allowing us to log into the Raspberry Pi and administer it from a connected PC or laptop.
By downloading PuTTY now, we’ll have the remote access client ready for when we power on the Pi for the first time. Its SSH daemon will be running, awaiting our connection. So go ahead and acquire PuTTY so we can communicate with the Raspberry Pi as we complete the Apache setup process remotely.
Step 11
Open Putty and set hostname as “raspberrypi.local” and port as “22”. Then press “Open”.
Installing Apache Web Server
Step 1
Starting the Apache installation process entails making sure the Raspberry Pi has the most up-to-date package information. This enables the software management tools to be aware of any new or updated packages that are accessible.
Update using sudo apt-get.
Update the system with the command sudo apt-get upgrade.
Step 2
Then install the Apache2 package by entering the following command
sudo apt install apache2 -y
That’s it! Just two steps and you have an Apache Web Server up and running on your Raspberry Pi!
To confirm whether this web server is running or not, enter the following command.
sudo service apache2 statusNow, in order to confirm that the Apache is running, enter the IP address of your Raspberry Pi on the web browser and you will receive the below mentioned simple web page.
To access the Apache server remotely, you’ll need the actual IP address of the Raspberry Pi device. If unknown, enter this command on the Pi itself to find it:
hostname -I
This server you have just configured can only be accessed within your home and not through an Internet address. For this, you have to follow the settings on the router to enable port forwarding for this server. But for that, we do not intend to talk about it in this blog.
Setting up an HTML page for editing
The test page seen initially is a basic HTML file included in the Apache installation for testing purposes. However, creating our web content is easy for us.
We should begin the process of creating a unique webpage by generating a new HTML file on the storage of Raspberry Pi. We are going to create our HTML code, add CSS style, and input content or coding examples that meet our needs.
Creating a personalized website is a great way to acquire hands-on experience in web design. After setting up port forwarding, we can improve and make public a webpage hosted on the Pi’s Apache server.
Now, let’s shift our attention to developing our website. Our first step will be to generate a custom HTML file containing our content, as opposed to utilizing Apache’s standard test file.
Step 1
First, let’s find the location of this HTML file on the Raspberry Pi. Enter the following command in the terminal
cd /var/www/html Step 2
Then type the following command to list all the files in this directory
ls -al You will be presented with all the files available in this directory with index.html file being owned by the root user.
Therefore to edit this file, you need to change its ownership to your own username. Here we will choose the default username of the Raspberry Pi which is “pi”.
sudo chown pi: index.htmlNow you are able to edit this file and once you save the file after editing, you just need to refresh your browser to see the changes.
Building your first HTML page
At this point, we’ll shift gears to covering some fundamentals of HTML so you can build out customized web content.
To get started, let’s open the main index.html file that will serve as our homepage. Enter this command:
sudo nano index.html
HTML Tags
Tags are the basic elements of HTML. Tags enable us to organize various elements on a webpage systematically and implement precise formatting for content.
Essentially, tags are markers surrounded by angle brackets that define parts of an HTML document. The majority of tags come in pairs – one to open and one to close, surrounding the content.
For example, the <b> tag is used to bold text when it’s opening and closing tags surround content, like this:
<b>This text will appear bold</b>
The opening <b> tag flags the start of bold text, while </b> closes the formatting when placed at the end.
In a broader sense, tags help us identify different components like paragraphs, headings, lists, and links. They also manage things such as text formatting, images, videos, and more.
Understanding fundamental tags and the opening/closing structure is the cornerstone for creating complete HTML files and designing web pages. Tags are the main foundation that we will be using to work with.
This is my new website
The word “new” will be bolded. Note that opening tag has <> and closing tag has </>
