How to host a website from your own computer! (no hosting services)
so in this video i'll be showing you how
to host a website from your own computer
that's right no paid hosting services
required no complex setup process
involved you can actually make your
website go live from your home computer
for free of cost and obviously since
this website is hosted by your local
computer your computer must be turned on
and connected to the internet all day if
you want to make your website be live
all day now you might think that you
would need a static ip address in order
to make this work but
let me assure you that you do not need a
static ip address it works even if you
are behind an ad i know that most of the
isps at least here in india they disable
or they do not allow their customers to
host web servers from their internet
connection most isps do this
unless you subscribe to a business plan
but what i'm going to show you in this
video is going to work for any internet
connection even with a mobile data you
don't need to have a static ip address
in order to make this work so without
further ado let me show you a
step-by-step tutorial on how to host a
website from your computer at absolutely
free of cost before getting started let
me take a moment to thank the sponsors
of this video this video is sponsored by
skillshare skillshare is an online
learning community with thousands of
inspiring classes for creative and
curious people explore new skills
develop existing interests and get lost
in creativity i've been using skillshare
for a while now and i must say that it
is one of the best platforms available
out there to learn new things and follow
your passion for example i've been
taking this class called productivity
for creatives by thomas frank and i must
say i really found it very informative
and useful and it really helped me to
better organize my workflow and to be
more productive the thing i like about
skillshare the most is that you can
watch unlimited classes for just 10
dollars a month and that too without any
ads you can also join skillshare live
classes to experience real-time
inspiration as you connect with popular
teachers around the world skillshare is
always launching new classes so if
you're interested in something but you
don't know where to learn it from then
make sure you check out skillshare and
you will most probably find the skill
that you're looking for on skillshare
and here's the good news the first
thousand of my subscribers to use the
link in the description below will get
to use skillshare premium for free for
one whole month so what are you waiting
for hurry up and use the link in the
description below to sign up for
skillshare and get one month off
skillshare premium for absolutely free
of cost so go ahead start exploring your
creativity today
so the first thing you need is a web
server which is basically a software you
have to install on your computer so that
it can
host or in other words it can serve
the website that you want to host
whenever someone sends it a request so
there aren't many web servers available
and one of the most popular ones is
apache and we are going to use apache in
this video we also need a database
management system because we are going
to use wordpress to actually create a
website and host it so we'll be using
mysql as the database management system
and in order to install these two the
web server and the database management
system you could just install xampp zap
is basically a php development
environment which means it basically
comes bundled with all the required
tools in order to you know um develop
and publish a website basically so you
can go to apachefriends.org and you can
download xampp it is available for
windows linux and os x and in case if
you did not notice yet i am going to do
this in windows so i'm going to download
xampp for windows
so um before doing that i would just
like to create a new folder and i'm
gonna name this as
my
awesome
website
that's a lame name but
it works for just the demonstration so
i'm just gonna save all the files inside
this folder just to keep it organized so
i have downloaded xampp once it's
downloaded i'll just open it and that
should bring up the installation wizard
for sam there you go that's the
installation visit click on next and you
don't have to change
anything in the screen just click on
next so in this screen you choose the
installation directory of xampp by
default it's going to install in your c
drive now you can change this if you
wish but it is actually essential that
you remember the directory where zamp is
installed because we will be needing it
for other steps in this tutorial so i am
going to change my installation
directory to my d drive you don't have
to do this but it's just the person's
choice i would like to keep my
xampp in my d drive in a folder called
xampp so i'm gonna set the directory as
d colon slash zam click on next again
next again next and that is going to
install xampp on our computer now it's
going to take a while for zam to be
installed and meanwhile what you can do
is you can go to wordpress.org download
and you can download wordpress source
code now as i already said we are going
to use wordpress to create a website if
you don't know what wordpress is it is
basically a content management system
using which you can build a website or a
blog you don't have to write code in
order to build a website using wordpress
of course you can write code if you want
to customize it um and you can do
whatever you like once you install
wordpress you can go to your admin
dashboard and customize your site as you
want you don't have to write any code so
i'm gonna click on download wordpress
make sure you download the latest
version of wordpress which in my case as
of making this video is 5.8.1 so if i
click download it's going to download
and i'm going to download it to my to
the same my awesome website folder
and i will just go to the
downloads
and there you go you can see that this
is a zip archive so you will have to
unzip it you can make use of any
unzipping utility like winzip or 7zip
i'm going to extract it with 7zip there
you go the extraction is done and you
can see these are all the source code
files of wordpress now we need these
files in order to install wordpress on
our apache server so meanwhile let's
look at how xampp is doing in the
background so it is almost done halfway
done actually so
yep
just be patient and wait for zam to
install so there you go it seems like
xampp has finished installing if you
click on finish that should
automatically bring up the xampp control
panel which looks like this now you can
see there are different services
available we'll need the first two
services which are apache and mysql
apache as i said is a web server mysql
is a dbms so you can just start these
two services by clicking on the start
button beside them and you can see once
they're started they appear
green and also one thing you need to
keep a note of is the ports on which
these services are running for example
apache is running on port 80 and 443
port 80 is actually the default port of
http and in the same way mysql is
running on the port 3306 which is also
the default port for mysql so
you can actually change these ports to
whatever you like but i do not recommend
changing them because it might bring
some complications
in other steps that we're going to
follow in this tutorial but if you know
what you're doing then go ahead and
change the ports and you can put
whatever the port you want great so in
order to check if apache is actually
running or not you can just open your
browser and open a new tab and go to
localhost
and
that should bring you a zam default page
like this so this if you see this page
it means that your xampp
is successfully up and also your apache
is running um as expected on port 80.
the next step you need to do is you need
to set up
the database uh so that wordpress can
use it in order to do that just click on
phpmyadmin over here
and you will be taken to a web page like
this this is basically
an admin console
to manage the dbms the mysql dbms you
can create databases create tables
create user accounts etc
using phpmyadmin it's basically like a
web admin console right so the first
thing you need to do is you need to
create a database for wordpress so that
wordpress can use it in order to do that
just click on new here
and give the database a name in my case
i'm just going to give it a name
wordpressdb
uh db stands for database so
click on create and there you go the
database has been created now we also
need to create user accounts so that
wordpress can use these user account to
authenticate with the mysql backend
database so in order to do that just
click on privileges here
and
click on add user account and you can
give the username and password so i'm
going to choose the username as
wordpress underscore user and i'm going
to choose the password as
test password now you have to choose a
strong password in order to stay safe
because if you choose a weak password
like i did here
it is going to be very easy for hackers
to crack your password so make sure you
choose a strong password there
and that's it you just make sure that
grant all privileges on database
wordpress db is checked here and finally
just click on go and there you go it
says you have added a new user now we
are done setting up the database now is
the time to install wordpress on our
apache server in order to do that um go
back to the wordpress source code files
which you have extracted earlier just
select all these files copy ctrl c to
copy and now come to the directory where
xampp is installed so in my case it's
installed in my d drive in the folder
xampp so this is my xampp installation
directory and inside this directory you
will find a folder called hd docs so
just go to that folder and over here
just create a new folder right click
select new and go to folder and name
this folder as wordpress
because we are going to install
wordpress in this folder so go to this
folder and paste all the wordpress
source code files that you have copied
so what we are basically doing is we are
installing wordpress in inside this
wordpress directory perfect all the
files are copied now so now just open
your browser go to a new tab and type in
localhost
slash wordpress
and that
should bring up
the
installation page for wordpress so there
you go um just select your language here
i'm just going to select english click
on continue and let's go now you have to
configure the database so that wordpress
can use this database so we have just
created a database for wordpress to use
so i'm just gonna name the database as
wordpress db because that's the name of
the database that i've created
and the username is going to be
wordpress underscore user and the
password that i've given is just test
password and just leave the database
host to localhost and table prefix to wp
underscore click on submit click on run
the installation and this should install
wordpress and before doing that it's
going to ask you some details about your
site like the site title for example so
i'm just going to give this high title
as my awesome website i know it's lame
but
it works as i said and you actually get
to choose the username and password that
you will
use to log into your wordpress dashboard
here so i'm just gonna set the username
to teja and i'm gonna
choose a password by default it's going
to generate a strong password i
recommend you use the generated password
because it is strong and very hard to
crack but i'm just going to use a simple
password like text password since this
is just a demonstration so put in your
email there
and click on install wordpress
and that should take around five to
seven seconds to install wordpress there
you go it says success wordpress has
been installed so it shows you a login
button if you click on the login button
you should be taken to this login page
so this means that you have successfully
installed wordpress so if you open a new
tab and go to localhost
slash wordpress again
this time you should see your default
wordpress website there you go this is
the default
wordpress website obviously you can
customize it anywhere you want by
logging into your admin console your
wordpress admin dashboard which i'm
going to show so go back to your login
form and log in with your
admin credentials
click login
and
there you go this is how the dashboard
will look like so you can do anything
you can customize the site anywhere you
want using this wordpress dashboard for
example you can install new plugins you
can add new pages like about page
contact page whatever it is you can post
new blog posts you can moderate the
comments you can change the theme
basically you can do anything just gonna
quickly click on customize your site and
this is going to bring up
an editor like this so over here i can
change the theme and i can choose
whatever theme i like i can search for
themes whatever but i'm just gonna go to
site identity and here i can change my
site title and i can also change the um
tagline so i'm just gonna
put the tagline as created by teja
something like that because you can also
choose the site icon and everything so
once you're done making these changes
just click on publish
and the changes are going to be
published to the live site so you get
the idea you can customize the site the
way you want but that is out of scope
for this video so if i just go to
localhost wordpress again
there you go this is my simple website
that i created with wordpress perfect
now you can see that this is actually
hosted on my localhost which means it's
only accessible within my network within
my network it can't be accessed from
outside
my network or in other words it cannot
be accessed from the internet now what
we're going to do is we're going to make
this wordpress website that we just
created accessible from the internet so
the first thing you need to do is come
back to your wordpress dashboard and you
have to install a plugin
so just go to plugins click on add new
and search for a plugin called remove
http so this is the plugin that you have
to install it goes like remove http fix
mixed content warning now it's essential
that you install this plugin because if
you don't install it you're going to
face some issues later so just click on
install now
and click on activate which is going to
activate
this plugin on your wordpress site the
next thing you have to do is you have to
download a tool called as packet riot um
so what it basically does is it creates
a secure tunnel from your local host to
the internet so what we are doing right
now is we are hosting our wordpress
website on our localhost so by using
packet triot what we can do is we can
create a proxy or in other words a
secure tunnel from our local host to the
servers of packet triad so when someone
tries to access our website packet triot
takes care of proxying all that traffic
through the secure tunnel to our local
host in this way anyone on the internet
will be able to access and interact with
the website that we are hosting on our
local host on our local computer so
let's do that so you can go to
packetdryout.com and sign up for free
it's absolutely free to use so you can
create a new account and i've actually
already have an account so i'm going to
log into my packet tryout account right
now
and this is how the dashboard will look
like once you're logged in so just click
on downloads and it's available for
different operating systems so just
scroll down and i'm going to download
the packet tryout for windows 64-bit so
just click on it and that should begin
the download awesome now i'm just going
to extract this downloaded zip file
using 7-zip
and if i go inside this directory this
is the packetriot.exe file which is the
actual tool that we'll be using now i
recommend you to add this to your path
variable so that you can access this
tool from any directory so in order to
do that just um select this path right
click copy go to your start menu and
search for
um environment
variables and you will see an option
that says edit the system environment
variables so we click on that
a pop-up like this comes up and then
click on environment variables under
user variable select path double click
on it and here click on new and paste
the path to the packetryout.exe file
here click ok ok and ok again so now if
you open your windows terminal or
um the command prompt and if you type in
packet riot dot exe
you should see usage instructions like
this so the first thing you need to do
is you need to configure packet triad in
order to do that just type in packet
riot.exe space configure
and select the path to the configuration
file
and then you need to authenticate with
your login credentials so i'll just log
in with my credentials here
so there you go it says authenticated
and now is the time for you to choose a
region
which is geographically closer to you so
i'm going to choose asia southeast here
and
that's it great so the configuration is
done it will also show you the host name
which is going to be
um
unique for you so
this is not going to change this is
basically assigned to you it's a unique
host name assigned to you and we'll
actually need this
hostname to do stuff so next thing you
can do is you can change the name of
your tunnel in order to do that type in
packet triode.exe
space edit space dash dash name
and then followed by the name you want
to give to your tunnel so i'm just going
to say
the name as wordpress underscore tunnel
and if i hit enter there you go it says
tunnel name updated in order to
cross-check this if you go to your
packet triot dashboard
go to packet driver dashboard go to
tunnels you can see there is a tunnel
named wordpress underscore tunnel and
you'll also be able to see the host name
so now comes the moment of truth we need
to now um expose our localhost to the
internet so that anyone can access our
wordpress website so in order to do that
you just have to add a http service to
the packet tryout tunnel that we have
just created so just type in the command
packet
riot
dot exe space
tunnel http add
domain and then mention the hostname
that is assigned to you which in my case
is this so i'll just copy this i'll
paste it here space dash destination
localhost because that's where our
wordpress site is running space dash
http and then port 80 because port 80 is
where our apache server is running
and followed by dash dash let's encrypt
so we are using let's encrypt to enable
ssl so that our url will be
https or not just http so it will be
more secure so if i hit enter
um it seems like we have missed
something oh it's actually going to be
dash dash http if i hit enter now there
you go it says http traffic rule added
perfect so if i say packettryout.exe
space info you can see that the http
service is added with the domain which
is basically just the unique name that
is assigned to you by packet tryout and
you can see the destination is localhost
the port is 80. so now in order to start
packet dryer just type in packet
dryer.exe space start and that should
take a little bit of time to start the
packet tryout tunnel so now i'll just
copy this domain name and i will go to
this to my name in my browser
and that should bring me up my xampp
default page so this means that my local
host is successfully exposed to the
internet now i can access my localhost
from anywhere on the internet perfect
but what about our wordpress site so in
order to access the wordpress site you
have to go to slash wordpress because we
installed it in a sub directory called
wordpress so just go to your domain name
followed by slash wordpress and
that should bring you your wordpress
website but something is wrong here if
you could notice you can see that the
url is just localhost slash wordpress
well this means that we are not actually
accessing our wordpress website from the
internet we are just accessing on our
localhost which is not exactly what we
want right because we want to access our
website from the internet not on the
localhost in order to fix this you need
to make some changes with the wp
config.php file so just open your xampp
directory and come to history docs go to
wordpress and you will find a file named
wp-config.php
so just open it with any text editor you
like i'm opening it with brackets and
over here you will find
a comment that says add any custom
values between this line and the stop
editing line so in between these two
comments we need to um
actually declare two defined statements
the first define statement is going to
be define
wp underscore home and we are going to
define it um
with our host name which is i see
glitter something so just copy your host
name here and just say http colon slash
slash followed by your host name
followed by a slash wordpress so
basically what we are doing is we are
assigning the wordpress home to this url
so that the wordpress knows that its url
is this and the same way we are going to
do another defined statement this time
we are going to say wp underscore site
site url and we are going to give this
same
url for this as well
and that's it and that's it once you're
done just save it ctrl s to save and now
if you go back
and go back to your
to your host name to your domain i'll
just copy this
and paste it in my browser and i'll say
slash wordpress at the end and this time
as you could see
we are able to access our wordpress
website and you can have a look at the
url as well we are actually accessing it
from the internet um from the domain
name uh that is given to us by packet
tryout how cool is that we are not
hosting our website on any hosting
provider we are hosting it literally
right from our computer and people are
able to access our website um from the
internet
that's cool right now
you might ask what if you want to um
change this domain name what if you want
to use your own custom domain name here
well that's absolutely possible but
before doing that you obviously need to
have your own domain name so i went
ahead and i purchased a domain for
myself the domain is my local site dot
online i purchased it from hostinger and
it costed me like 75 rupees for one
whole year which is very cheap it's like
one dollar for one whole year which is
awesome but you can also get a free
domain at freenom or any other services
you would be aware of so you need to
change the dns settings of your domain
um in order to link it with packet
triode in order to do that just go to
your um packet try our dashboard and
click on custom and over here click on
verify domain
and just enter the domain which you on
which in my case is my local site dot
online and click submit
and now it will show you the next steps
that you need to follow and basically
what you have to do is you have to copy
this text right here and go back to your
dns settings on your domain provider
domain name provider in this case in my
case it's hosting come to your dns
settings and here you have to create a
new dns record with the type txt and for
the name just let it be as at the rate
and for the txt value just paste the
string that you copied from the packet
driver dashboard and for the ttl put it
as 60
and click on add record so what this is
going to do is it's basically going to
link your custom domain with packet
triode so that you can use it with your
wordpress website or whatever the site
you are trying to host from your local
host or your local computer in other
words so um you have to wait for some
time until these dns changes propagate
and there you go it shows a green tick
symbol which means the domain is
successfully linked with packet tryout
now we can use it um for our website so
before doing that i'm going to first
create a subdomain for my domain so i'm
going to go back to my dns settings and
this time i'm going to add a cname
record and in the name i'm going to put
it as wordpress because i want my
subdomain to be
wordpress.mylocalsite.online
so i'll put wordpress here you could put
whatever you want there and for the
target you need to
insert your host name the host name that
is given to you by packet triad in my
case it is going to be this one so i'm
going to copy this hostname i'm going to
put it in target and i'm going to put
this as 1800 the ttl and click on add
record
um that's it so now we can assign this
subdomain wordpress.mylocalsite.online
to my wordpress website and in order to
do that i'll go back to my windows
terminal i'll stop my packet tryout
and i'm going to add another packet
triod http service so i'm gonna say
packet riot
dot exe space um
tunnel
http add dash dash domain and in this
case my domain is going to be wordpress
dot my local
site dot online
followed by
destination which is localhost
and then dash dash http and the port 80
which is where apache is running on and
then dash dash let's encrypt so that we
get a https so if i hit enter
um
okay it seems like i misspelled packet
right there i'm gonna fix that
error
there you go it says http traffic rule
added so if i say packet riot.exe info
you can see that we have successfully
added a new http service with the domain
wordpress.mylocalsite.online so this is
the custom domain that we are using
this is the domain that we own and we
are using for our
wordpress website so in order to start
packet triad you already know how to
start it just say packet riot.exe space
start
and that's going to start back at tryout
so packet driver has started i'm going
to go ahead and check if this is
actually working or not so i'll just go
to wordpress.mylocalsite.online
and i'm going to hit enter
there you go um it shows you the zam
default page but we know what this means
right this means that our local host is
exposed and we are able to access it
from our own custom domain right here so
if i just go to slash wordpress
here
that is going to show me my wordpress
site that i just created um but wait um
there's actually one more thing you need
to do if you look at the url it's still
pointing to our unique hostname which is
not really our custom domain which we
want to use this is because
we have to change in the wp.config file
we have to change this to our custom
domain so just come back to your wp
config file and change these to define
statements to your new subdomain which
is going to be wordpress
dot my local site dot online
slash wordpress and i'm gonna
copy the same thing
for wp underscore site url as well
um that's it i'm just gonna save that
and now if i go to
wordpress.mylocalsite.online
wordpress
there you go now you can see that we are
able to access our website and you can
also look at the url it is actually
pointing to
wordpress.mylocalsite.online which is
the custom domain that we are using and
you can also see
that the connection is secure which
means we are using https and the
certificate is encrypted i mean the
certificate is provided by let's encrypt
which is great so we achieved it we are
now able to host a website from our own
computer without having to rely upon any
hosting provider and we're also doing
that with a custom domain name this can
be any domain name that you own so you
can use any other content management
system or any other framework you don't
have to necessarily use
wordpress you can use drupal or you can
use any in any web development framework
and you will still be able to expose
your website or your web app
um to the whole internet without having
to use any hosting provider and we were
able to do this all with the help of
packet riot so thanks for watching i
hope you really enjoyed this video if
you did like this video please don't
forget to leave a thumbs up below and
also if you have any doubts regarding
this video make sure you leave those
comments those doubts those feedback in
the comment section below
i will try to go through all of your
comments and i'll try my best to clear
your doubts so thanks for watching once
again i'll see you in the next video
until then cheers
Comments
Post a Comment