![Raspberry Pi 4 As A Web Server [Make Own Website]](https://prod.hackster-cdn.online/assets/transparent-a0c1e3063bcabc548a5f3fa7328f3c1c97f747e6e764da4c14439567baa79ae1.gif)
![Raspberry Pi 4 As A Web Server [Make Own Website]](https://hackster.imgix.net/uploads/attachments/1118123/_X90rLK3Egq.blob?auto=compress%2Cformat&w=900&h=675&fit=min)
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: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 updatetype this command to install apache2
sudo apt install apache2 -yPHP 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 -yWhen 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 -IIf you see this page on your browser it means apache is working.
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 -alChange ownership to your username
sudo chown pi: index.htmlNow you are able to change, edit your web page and refresh the web page to see changes.
Enable SSH:Go to Menu → Preferences → Raspberry Pi Configuration → Interfaces → enable SSH
You can edit index html file in raspberry pi itself but if you are testing a lot, I would recommend to download WinSCP. WinSCP (Windows Secure Copy) is an open source SecureFTP client for Windows. It allows secure file transfers between the client’s local computer and the remote server. You can directly edit your html file inside the WinSCP.
Select File Protocol → SFTP
Host name Raspberry pi → IP address
port number → 22
user name → pi
password → raspberry
save & Click on login.
Now you will be able to see raspberry pi files on right side and Your PC’s file on the left side.
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>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;
}Type pi IP address to any web browser, you will be able to your live website by using raspberry pi.
If you like this kind of content please subscribe to my YouTube channel for more updates. Till then Keep Learning Keep Making.
Recent Posts
- Raspberry Pi 4 As A Web Server [Make Own Website] May 11, 2020
- Arduino 12 hour Format Clock with TFT Display May 7, 2020
- Send Data From Arduino to NodeMCU and NodeMCU to Arduino Via Serial Communication May 5, 2020
- ESP8266: How To Make Wi-Fi Radio May 2, 2020
- IoT Based Digital World Clock using ESP8266 April 30, 2020
Comments