How to Set Up a Static Web Server with Apache httpd? (Step-by-Step Guide) ๐
Prerequisites:
A basic HTML/CSS/JS web project to deploy.
A Linux machine or server.
Domain name (optional).
So, you've mastered web development and created a fantastic webpage. Now, you're eager to share it with the world. But how do you deploy it on the internet? Fear not; I'm here to guide you through the process.
To get started, you'll need a Linux machine or VM. (how to create one?)
Step 0 - Connect to your VM (if using cloud)
connect to your virtual machine using any of the following ways so we can start installing and configuring apache server on it.
A. Connect using ssh-
ssh ashutosh@192.168.1.7 โฉ๏ธ
fingerprint(yes) โฉ๏ธ
yourpassword โฉ๏ธ
this will start a shell session like-
ashutosh@yourvm:~$
B. You can use VNC / RDP, for more info google vnc with your cloud provider term.
You can skip above step if you are setting up apache on a local server.
Step 1 - Update Your Packages ๐
First things first, ensure your system is up-to-date by running this command:
sudo apt update && sudo apt upgrade
๐กPro tip: If you're feeling lazy, you can use sudo su
to avoid typing sudo
twice!
Step 2 - Install Apache httpd Server ๐
Let's get Apache httpd on board. Run this command:
sudo apt install apache2
Step 3 - Verify Your Setup โ
After Apache httpd is installed, it's time to see if everything's working. You can do this by typing your server's Public IP address in your web browser.
You can find this public IP from your cloud dashboard, or the address you used for ssh-ing into this machine.
Opening your IP in browser should show default Apache sample page. which looks something like this-
Or you can simply type-
curl localhost
Step 4 - Creating Your Website ๐
By default, Apache comes with a basic site enabled. You can customize its content, which is located at /var/www/html
.
Lets modify default page with our content.
Step 1 - Navigate to default directory
cd /var/www/html/
ls
sudo rm -r index.html index.nginx-debian.html
ls
sudo nano index.html
//if you don't have nano
vim index.html -> i
paste this sample html file-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
save and exit
nano -> ctrl+x -> y -> enter.
vim -> :wq -> enter.
Then refresh you webpage, it will look something like this-
So this is how you setup a simple static web server with apache httpdโจ
How to host your Vanillajs Projects here from Github?
say you have create a simple project on github and you want to deploy it here,
Now we will see how to do this-
1. For this to work the index.html of your project should be on the root directory,
the project structure should be like this-
.
โโโ assets
โ โโโ logo/logo.png
โ โโโ images
โ โโโ icons
โโโ index.html
โโโ style.css
โโโ index.js
โโโ README.md
Remove existing files from the
/var/www/html
folder, make sure it is empty, use rm command to delete files.sudo rm filename
Next step is to clone the github repository with a
.
path so all of its contents are directly in this /html folder.git clone yourrepourl .
for example-
git clone https://github.com/ashutosh7i/Yuvaantar_portfolio.git .
Doing this will import your project here, now refreshing the ip will show your project, in my case it looks like this-
Here are some additional tips and tricks:
๐ ๏ธ CI pipeline: Once your project is on the server, you can make changes on it locally, push to github, ssh into server and run
git pull
command to host latest files.๐ Port and Firewall Settings: If your website is not showing up ensure that your firewall allows traffic on port 80 (HTTP) and 443 (HTTPS) for your server. You might need to set up these rules using
ufw
,sudo ufw allow http
๐ Setting Up Virtual Hosts: If you plan to host multiple websites on your server, consider setting up virtual hosts. This allows you to manage multiple domains with a single server (upcoming blogs).
๐ง Essential Apache and Server Management Commands:
Restart Apache:
sudo systemctl restart apache2
Check Apache status:
sudo systemctl status apache2
Enable Apache to start on boot:
sudo systemctl enable apache2
View Apache error logs:
sudo tail -f /var/log/apache2/error.log
How to add a domain name like yourname.com
to this ip?๐ค stay tuned for this blog.
That's it! You're on your way to sharing your masterpiece with the world. Stay tuned for more web server wizardry in our upcoming blogs! ๐งโโ๏ธโจ
for any issues you can always reach me out on Linkedin
Happy Hacking! โ๏ธ๐