Raspberry Pi 4 As A Web Server [Make Own Website] (2024)

In this tutorial we will learn how to use Raspberry Pi 4 as a web server. In addition to that we will also see how to make web pages in HTML & style with CSS. So let’s get started.

Components Required:

Raspberry pi 4,
Dual Fan Heat Sink aluminium Armor Case. (Optional)

Installing Apache:

Apache is web server application, it serve HTML files over HTTP.

First, update the available packages. Open terminal and type command

sudo apt update

type this command to install apache2

sudo apt install apache2 -y

Installing PHP:

PHP is used for server-side programming which will interact with databases to retrieve information, storing, email sending, runs the logic and provides content to HTML pages to display on the screen.

Install PHP and the PHP module for Apache.

sudo apt install php libapache2-mod-php -y

Testing The Web Server:

When you install apache by default it will put web page on web folder. You can access that web page within pi itself by opening your browser and typing http://localhost/ or raspberrypi.local (if your pi host name is raspberrypi). If you want to access that web page on another PC or computer, you can type http://192.168.1.102 (you have to type your pi IP address here). For finding pi IP address you can open terminal and type

hostname -I

If you see this page on your browser it means apache is working.

How to change default web page:

After installing apache and testing web page. You are thinking to change web page to your web page. But you can’t edit it right now. You need to change its ownership to your own username (by default it is pi, if you haven’t changed).

Navigate to this directory

cd /var/www/html
ls -al

Change ownership to your username

sudo chown pi: index.html

Now you will be able to see raspberry pi files on right side and Your PC’s file on the left side.

Make you own Website:

You can add HTML & CSS page to make your own website with raspberry pi.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Robotica DIY</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<main>
<h1>Robotica DIY</h1>
<h2>About Me</h2>
<p>Howdy, I'm an author of Robotica DIY. I enjoy making DIY projects on Ardudino, Raspberry Pi & ESP8266 NodeMCU.</p>
<p>You can see my work at <a href="https://roboticadiy.com/">Robotica DIY</a>.</p>
<p><img src="RoboticaDIY.png" Height="200"></p>
<a href="https://www.youtube.com/channel/UC8xzAO7kN6CFh4l7gAZANeA"><button> Click Here To Subscribe</button></a>
</main>
</body>
</html>

Title Tags:

The title goes between <title> and </title> tags. Title tag should go within <head> and </head> tags. This title will not be visible on webpage, it will be visible on web browser tab.

<title>Robotica DIY</title>

Heading Tags:

Heading tags start with h followed by a number that indicates the heading level.

h1 → Highest level

h6 → Least level

Heading tag should go between the <body> and </body> tags.

<h1>Robotica DIY</h1>
<h2>About Me</h2>

Paragraph Tags:

You have to write content of your website in between <p> and </p> tag. You can add many paragraphs as well as headings.

<p>Howdy, I'm an author of Robotica DIY. I enjoy making DIY projects on Ardudino, Raspberry Pi & ESP8266 NodeMCU.</p>

Adding Hyperlinks:

Add link by <a> tag. This should be in between <body> and </body> tags.

<a href="https://roboticadiy.com/">Robotica DIY</a>

Adding Image:

for inserting image we use <img> tag. It doesn’t have closing brackets <>. File image you want to include must be in same folder where your index file is.

<img src="RoboticaDIY.png" Height="200">

Adding Buttons:

We want to make button clickable so, inserting button tags between the <a> hyperlink tag.

<a href="https://www.youtube.com/channel/UC8xzAO7kN6CFh4l7gAZANeA"><button> Click Here To Subscribe</button></a>

CSS:

h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
p {
font-size: 1.3rem;
}
main {
max-width: 500px;
margin:0 auto;
}
a {
text-decoration: none;
}
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 1.7rem;
border-radius: 4px;
color: #fff;
background-color: #009933;
border: none;
}

Embedding a Style Sheet:

Before going to CSS file, you need to embed the style sheet in the index.html file so that the HTML knows to reference an external CSS file. To do this add following lines between the <head> and </head> tags

<link rel="stylesheet" type="text/css" href="./style.css" />

Styling Headings, Paragraph and Links:

Define text size here. We are using rem unit. Rem is the computed value of font-size on the root element, we use one font size as a reference across the page. This means all font size are relative to each other.

h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
p {
font-size: 1.3rem;
}

Main section formats the main content of your page. We are setting maximum width of the content to 500px.

main {
max-width: 500px;
margin:0 auto;
}

Hyperlinks are underlined by default. Set text-decoration to none to remove the underline.

a {
text-decoration: none;
}

Styling Button:

Set display to block ensures the button is displayed as a block element. We are also using padding property to add space around the content. For text color and background color we are using hexadecimal color code. Feel free to change that.

button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 1.7rem;
border-radius: 4px;
color: #fff;
background-color: #009933;
border: none;
}

Start Testing Our Own Web Page:

Type pi IP address to any web browser, you will be able to your live website by using raspberry pi.

Video:

If you like this kind of content please subscribe to my YouTube channel for more updates. Till then Keep Learning Keep Making.