DEV Community

Morodolu Oluwafikunayomi
Morodolu Oluwafikunayomi

Posted on

From ThemeWagon to Live Site: Hosting a Free HTML Template on Your Local Apache Server Using Vagrant + Git Bash

#webdev #tutorial #beginners #devops

Ever downloaded a beautiful free template from ThemeWagon
and thought,
“Okay... now how do I actually host this like a real website?”

That’s where this guide comes in.

In this post, I’ll walk you through hosting a free HTML template on your own local Apache server, running inside a Vagrant virtual machine — all from your Git Bash terminal.

What You’ll Need

Before we start, make sure you’ve got these installed:

  • 🧱 VirtualBox(for running the VM)
  • 📦 Vagrant
  • 💻 Git Bash(Windows users)
  • 🧾 Any HTML template (download from ThemeWagon)

No coding required

Step 1 — Create a Project Folder and Initialize Vagrant

Open Git Bash and run:

pwd(this is to know what directory you are on)
cd "directory, either downloads or documents or desktop"
mkdir ~/myserver
cd ~/myserver
Enter fullscreen mode Exit fullscreen mode

Now initialize your Ubuntu box:

vagrant init ubuntu/jammy64
Enter fullscreen mode Exit fullscreen mode

but if you wish for any other OS check out:
https://portal.cloud.hashicorp.com/vagrant/discover

This creates a Vagrantfile in your folder. It’s basically your VM’s configuration file — where you’ll define memory, CPU, and network settings.

Step 2 — Edit Your Vagrantfile Using Vim
Inside Git Bash, while you are in the same directory open the Vagrantfile:

vim Vagrantfile
Enter fullscreen mode Exit fullscreen mode

This will open the file in Vim editor.
Press i to enter insert mode now you can start typing or editing.
thereafter to Enable Private or Public Network Access, Scroll down to find these lines:

config.vm.network "private_network", ip: "192.168.33.10"

config.vm.network "public_network"

Uncomment one of them depending on what you want:
Use private network if you just want to access your site locally:

config.vm.network "private_network", ip: "192.168.33.10"
Enter fullscreen mode Exit fullscreen mode

do note kindly keep the ip address here somewhere or be written down as it is useful later on, you can also change the numbers maybe like 192.168.40.15
Or use forwarded port (recommended for beginners):

config.vm.network "forwarded_port", guest: 80, host: 8080
Enter fullscreen mode Exit fullscreen mode

This means anything on port 80 (inside the VM) will be visible on your local machine at http://localhost:8080.
lastly to Allocate More RAM and CPUs
Find and uncomment this section:

config.vm.provider "virtualbox" do |vb|

vb.memory = "1024"

end

Now edit it to give your VM more resources:

config.vm.provider "virtualbox" do |vb|
  vb.memory = "2048"     # 2GB RAM
  vb.cpus = 2            # 2 CPU cores
end
Enter fullscreen mode Exit fullscreen mode

unless you want graphical user interface i don't recommend uncomment the
GUI line of syntax, and any line with double # is an actual comment.

Once done, press:
Esc
Type

:wq
Hit Enter
That saves and exits Vim.

Step 3 — Boot Up the Virtual Machine
Now it’s time to start your virtual server:
type in

vagrant up
Enter fullscreen mode Exit fullscreen mode

Vagrant will download the Ubuntu image, set up the VM, and start it automatically.
The first run takes a few minutes — but once complete, you’ll see your box running.
Then, log in to it:

vagrant ssh
Enter fullscreen mode Exit fullscreen mode

You’re now inside your Ubuntu server as the vagrant user
to test you can type in:

whoami
Enter fullscreen mode Exit fullscreen mode

this should return vagrant
Step 4 — Install Apache Web Server
while having different types os linux OS it is important to know the name of the apache server and which ubuntu supports it


sudo apt update
Enter fullscreen mode Exit fullscreen mode

Install Apache:

sudo apt install apache2 -y
Enter fullscreen mode Exit fullscreen mode

Start and enable it:

sudo systemctl start apache2
sudo systemctl enable apache2
Enter fullscreen mode Exit fullscreen mode

Test it!
On your browser, go to the ip address you have in the private ip address in the vagrant file.
You should see “Apache2 Ubuntu Default Page”.
Congrats — your web server works

Step 5 — Upload and Unzip Your ThemeWagon Template

Inside your server, make a folder to hold your website:

mkdir ~/server
cd ~/server
Now using wget (the themewagon download link)
Enter fullscreen mode Exit fullscreen mode

_the way i usually get is by going to themewagon, inspecting the page, going to network and clicking on the template download buttonwe should see the template name, it should be :http://..... _


so by doing the same you should arrive where i am, copy the link

Then unzip it:

unzip (the foldername)
Enter fullscreen mode Exit fullscreen mode

incase you have an error code about unzip not been part of the OS package use

sudo apt install unzip -y
unzip foldername
Enter fullscreen mode Exit fullscreen mode

Step 6 — Move Files to Apache’s Web Root
Copy everything from your extracted folder into Apache’s serving directory:

sudo cp -r ~/server/neural_glass/templatemo_597_neural_glass/* /var/www/html/
Enter fullscreen mode Exit fullscreen mode

Restart Apache so changes apply:

sudo systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

Step 7 — Visit Your Website!

Now, open your browser and head to:
your private ip address
incase your forgotten your ip address:
Check your server’s IP:

If you used a private network instead of port forwarding:

ip addr show
Enter fullscreen mode Exit fullscreen mode

Look for something like:

inet 192.168.33.10/24

Reboot or Halt Your Server

To stop:

vagrant halt
Enter fullscreen mode Exit fullscreen mode

To start again:

vagrant up
Enter fullscreen mode Exit fullscreen mode

To destroy and rebuild (when experimenting):


vagrant destroy -f && vagrant up
Enter fullscreen mode Exit fullscreen mode

If this guide helped you, drop a ❤️ on DEV.to and comment how your first hosted template went or what how i can improve on deploying faster

Top comments (0)