Build Your First Raspberry Pi Server
You see so many websites and sometimes you ask yourself how are those pages made? Where are those websites located? It would be cool to have one as well.
Hopeful you’ll have some basic familiarity with HTML and you’ll know that a website is just an aggregate of elements like paragraphs titles, links, images, and other elements. This HTML content is located on a simple plain computer like the one you are reading this article from. Even if you’re reading it from a smartphone. But for simplicity let’s just focus on computers.
How can you make a computer into a server that can hold your website?
To start we’ll need:
- A Raspberry Pi
- 8gb sd card
- Power Supply
- Home Router
- Monitor with HDMI connection
- Keyboard
For this tutorial, I’m going to use a Raspberry Pi 3 B+ but you can use any.
Installing the OS on the SD card
Download and install the Raspberry Pi imager, you can find it on https://www.raspberrypi.org/downloads/
and install it. It’s available for all the major Operative Systems. I’ll be installing it on Ubuntu.
Let’s open the imager, we are going to see this window:
We’ll choose Ubuntu Server 64-bits which works on pi 3 / 4, select the SD where you want the OS on and start writing it on your SD.
Before you eject the SD card, go on the System Boot folder and open the file network-config, you want to add your wifi so later you can connect to the wifi (if y with an ethernet cable you can skip this step).
We will need to comment in the home wifis section, you can delete the rest.
Add the name of the router at the place of “myhomewifi” and the password in double-quotes instead of “S3kr1t”.
The network-config file should look like this:
version: 2
ethernets:
eth0:
dhcp4: true
optional: true
wifis:
wlan0:
dhcp4: true
optional: true
access-points:
TALKTALKnameOfTheRouter:
password: “SecretPassword”You can now eject the SD card and insert it inside of the Raspberry Pi.
Connect the Raspberry Pi to your monitor and keyboard and power it with the power supply.
Give the device some time to load everything.
I found the login to the Ubuntu server a bit buggy. After you see the login page, insert the login and password, “ubuntu” as username and password. Be careful, sometimes it gives the message “incorrect credentials” even if your credentials are correct. Just wait 5 min until it loads completely and try again.
Set your new password and you are in.
Connecting to your WiFi
Now that you are on the server, you need to connect to the WiFi ( if you are connecting yourself through ethernet you just need to connect the cable and you’re set so you can skip this step).
To apply the changes we applied editing the network-config file run this command:
sudo netplan applyNow you should be connected to the internet. Test the connection with:
ping google.comif it doesn’t work because you inserted incorrect WiFi credentials, go check on the network config file and change it. You can access again the config file with:
sudo nano etc/netplan/50-cloud-init.yamlreapply the changes every time you edit the file with:
sudo netplan applyBy now you should be connected to the internet. on the terminal type:
asudo apt-get install apache2 ufwufw add http
ufw add ssh
With those commands, we are allowing communication on the HTTP port and SSH port. The first one is to share our website the second one is for us to connect to the raspberry pi from another computer
Apache is now installed so you should be able to view the default test page.
To access it we need the local IP address.
sudo apt-get install net-tools
ifconfigYou can find your local IP under wlan0 -> inet.
visit your IP from the browser. It should look like this.
Everything works, so let’s add our content
cd /var/www
sudo mkdir website
cd website
sudo nano index.htmlThis is gonna be our website, take the content below and paste it in the index.html file
<!DOCTYPE html>
<html lang=”en”><head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial- scale=1.0">
<title>This page works</title>
</head><body>
<h1>HEEEEY IT’S WORKING</h1>
<img src=”https://i.ytimg.com/vi/5CBW9AG8YKA/maxresdefault.jpg" alt=”kid” width=”750" height=”450">
</body></html>
ctrl+s to save and ctrl+x to exit the editor.
Now we need to add the config so Apache knows what page we want to show when a request is made by an external user.
cd /etc/apache2/sites-avilable
nano 000-default.confCopy the content of this file. We are going to use it in our config without big changes.
sudo nano website.confCopy the content and Change it adding our public IP to ServerName ( to get it run curl ifconfig.me) and DocumentRoot which is the path to our index.html file’s folder. That’s how it should look like
<VirtualHost *:80>
ServerName enterHereYourPublicIP
ServerAdmin webmaster@localhost
DocumentRoot /var/www/website
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>To tell Apache to consider our conf file and ignore the Apache test page run:
sudo a2ensite website.conf
sudo a2dissite 000-default.confreload Apache with
systemctl reload apache2You can now test your website visiting your local IP.
To be able to show your website to any user coming from the web, forward your public IP to your local IP. Go on the router and set up a forwarding rule.
Every router brand may have different IPs. If you have TalkTalk is this one http://192.168.1.1/
Log in with the credentials from the back of the router.
Click on:
See internet settings -> Manage advanced settings -> Access controlHere we need to add a rule manually.
Set Service to HTTP and on Internal Host add your local IP and click Add rule.
You’re done. Congratulations you created your first website!!!
To view your website as a normal user access it using the public IP, sending a request from outside your local network. Just visit your website through your smartphone using the public IP and accessing it with mobile data turned on.
You’re a web developer now. Go celebrate!!!
