There
are many reasons why you might want to make your own website. You might
have a small (or big) business, and you want to make it known. Maybe
you want to start a image sharing site, a blog, or a personal site.
Whatever the reason, making a website is a fun thing to do. But Most Web
Sites cost money, and not all of us have much of it, so I'll show you
how to do it for free. In this Instructable, I will show you how to make your own website from start to finish in two different ways.
Step 1What You Need:
There are a few things you
need to start a website, depending on how you're doing it. If you're
going to have your own server, and host it yourself, you will need:
Computer to use as server
Apache HTTP server program
Ability to configure routers
text editing program
knowledge
free domain name service (co.cc, co.nr, .tk, etc.)
computer with internet access
I don't recommend you do
it this way unless you are good with computers. It will also cost you
money unless you happen to have an old PC around or use a VM. On the
other hand, doing it this way will give you complete control over your
server. If you are using a free hosting service, you will need:
Free hosting service of your choice (I recommend SixServe)
Text editing Program
email address
free domain name service (co.cc, co.nr, .tk, etc)
computer with internet access
knowledge
As you can see, doing it
the latter way is definitely easier for the beginner. If you're brave,
and want to set up your own server, read on. If not, skip to step 5.
Step 2Installing Apache:
If you have decided to do it with your own server, you need to do some
setup first. Either get a spare PC you have lying around or make a VM
using Vmware or Virtualbox. It really doesn't matter if you use Windows
or Linux, they both work just fine. I'd use Linux because it's free and
Windows isn't. After you install your OS (I'll leave the figuring out of
that to you), it's time to install Apache. Go to the Apache website and
download the latest stable release for your OS (2.2 at the time of this
writing). Go through the wizard to install Apache on your computer.
Once it has finished installing, you should see something like this:
If you do,Congrats! You've now set up your own web server!
If you go into your favorite browser and type in this “localhost”, you should see a message saying “It Works!”. If not, go back and reinstall Apache. Now go into the command line and type in “ipconfig” without the quotes. Look through the results for a number like 192.168.x.x. Write this number down, because it will be important later. Now is the time when you put your actual website up. I will explain how to design the website later on. If you're itching to know how, just skip ahead. If not, just hang tight.
If you go into your favorite browser and type in this “localhost”, you should see a message saying “It Works!”. If not, go back and reinstall Apache. Now go into the command line and type in “ipconfig” without the quotes. Look through the results for a number like 192.168.x.x. Write this number down, because it will be important later. Now is the time when you put your actual website up. I will explain how to design the website later on. If you're itching to know how, just skip ahead. If not, just hang tight.
Step 3Configuring Your Router:
Now you get to use the
number you found earlier. Go to your browser and type in “192.168.1.1”.
This should be the address for your router. If a window come up asking
for a password, Google “default password for brand model router”,
replacing brand and model with your router's brand and model. Type in
what you find and now you should be inside. Go to the tab labeled port
forwarding or something similar and click “add new”, for port number,
type in 80, and for IP address type in your number starting with
192.168.... Close that and Google “whats my ip” The first entry should
show a number with some dots in it. Copy and paste that into the address
bar of your browser, you should see “It Works!” unless you skipped
ahead and made something much cooler. Congrats! You have now unleashed
your website on the world!
theGeeke pointed out that this method can be unsecure, and here's what he says:
"To use a public IP, go into your router, go to DHCP (Some routers will call it address assignment, or something like that), find your computer that you are using as a server, and assign a public IP. After that, I recommend changing your server to a static IP use the same IP that you assigned in your router. (Go to network configuration on your computer, change your adapter settings, find your NIC, go to properties, find Internet Protocol or Internet Protocol version 4, and use the following address.) You should always use a static IP on your server, even if you are using port forwarding.
That should do it. Please note that not all consumer routers will allow this, however, most routers I work with do allow it. If you are using a professional router, then you should either know how to do this, or have a network administrator that can do it for you. (By professional, I mean one that uses a command line... such as Cisco IOS routers.)"
theGeeke pointed out that this method can be unsecure, and here's what he says:
"To use a public IP, go into your router, go to DHCP (Some routers will call it address assignment, or something like that), find your computer that you are using as a server, and assign a public IP. After that, I recommend changing your server to a static IP use the same IP that you assigned in your router. (Go to network configuration on your computer, change your adapter settings, find your NIC, go to properties, find Internet Protocol or Internet Protocol version 4, and use the following address.) You should always use a static IP on your server, even if you are using port forwarding.
That should do it. Please note that not all consumer routers will allow this, however, most routers I work with do allow it. If you are using a professional router, then you should either know how to do this, or have a network administrator that can do it for you. (By professional, I mean one that uses a command line... such as Cisco IOS routers.)"
Step 4Getting a Domain Name:
But who wants to remember
“236.990.123.091” or whatever your IP is! Don't give up, there is a way!
You can't get a .com, .net. .org, etc domain for free, but you can get a
.co.cc, .tk, and .co.nr for free! I recommend using .tk. In your
browser, type in “dot.tk”. Once you get there, type in the free domain
box whatever you want, like “examplewebsite.tk” Once you've come up with
a name and made sure it's not taken, you can go on. Click on “use
dot.tk free DNS service” in the address boxes it should have your new
domain name. In the IP address boxes, type in whatever your Google
searched IP was, NOT your 192 IP. After you've confirmed that, it will
probably ask you how you want to login. You can choose whatever you
want, I chose to use gmail. After that, wait an hour or two and then
type your new domain in the browser. If you're lucky, your website will
come up. If it doesn't, just be patient, these things take time. After a
while, your IP might change if you're using a home internet connection.
Don't worry, just log in to dot.tk and change the IP boxes to your new
one. In the next chapter, I will show you how to do it a different way.
Step 5Free Web Hosting:
If that seemed a little (or a lot) confusing then
you probably want to do it another way. This way is also free, in terms
of money, but it mat take time. The first thing you want to do is decide
on a web host. If you have the money you can use 1&1 Hosting, but
I'd rather stick with free hosts. In my searching, I found that there
are LOTS of free hosts out there but you have to be careful who you
choose. Some hosts force ads on your site so they can stay in business. I
hate ads, so I'd stay away from those. Some give you less than 1GB of
space! You can use these if you have a very small website, but any
larger website with pictures will need more space. Some claim to have
unlimited space and bandwidth, like X10Hosting and SixServe. With those,
the deciding factor is customer service. If you look around you can see
that people are generally more happy with SixServe than X10, so I went
with SixServe. They have unlimited space and bandwidth, Cpanel, free
sub-domains, Softaculous, PHP, and MySQL. You have to remember, though,
no free web host will allow file hosting, but you can link to downloads
on other sites.
Step 6Creating an Account:
So, go to sixserve.com and click on free hosting.
Click order now and an option for domains will come up. If you have
money to burn, you can buy a top-level domain. Otherwise, click on “use
free sub-domain”. You can choose either YOU.sixserve.net, or YOU.si6.us.
The name will be relatively long, but we'll fix this later. Don't check
any add-ons, just click add to cart, then click check out. Fill out the
information forms and click complete order, you know how, you've filled
out these kind of things before. It will ask you for payment method,
just click None. Once it is accepted, you can log in using your email
address and the password you created during registration. After that, go
to “Services, and then My Services”. Your new site should be there, and
it will probably say “pending”. Just wait, after awhile it will change
to “active”. When it does, go to the blue button labeled "view details".
Then click on “Login to Cpanel”. Your browser will most likely give you
a security warning, just click “add exception” or “continue to site”.
You should now see a panel with many buttons on it. This is where you
will upload your site later.
Step 7Getting a Shorter Domain Name:
Right now, go to dot.tk. Go to URL Redirection and type in your site's
name like “example.sixserve.net” If it's a valid address, it should
accept it. Now type in the
address you would like, such as “example.tk”. If it's taken, just try a
different one. When you have one you like, submit it. Now you should
have a much shorter name. Both names still work, just one is shorter.
Step 8MAKING a Website:
You've got a place to put a website, but you still
need a website. There are 2 ways to do this, too. You can be hard-core
and program all the HTML, or you can use a WYSIWYG (what you see is what
you get) editor to make it visually. I used a combination of the two. First,
you need to get an editor. OpenOffice.org and LibreOffice both have a
built-in editor, but they are not the best. It is better to get a
dedicated editor. If you're going for plain HTML coding, use either
Komodo Edit or Programmer's Notepad. If you want visual, get PageBreeze
or Amaya. If you want to spend money you could get Adobe Dreamweaver or
Microsoft Visual Studio. There is also a free version of Visual Studio
called Visual Web Developer Express, which is what I use.
Step 9Basic HTML:
First, the hard part, plain HTML. Here's a sample HTML document.
<html>
<head>
<title>Example HTML</title>
</head>
<body>
<h1>BIG HEADING</h1>
<p>Body text paragraph</p>
<p>another paragraph</p>
</body>
</html>
To make this file, go into notepad or any editor you choose and copy
and paste this code. then click save as. In the file type box, click
"all files", then save it as whateveryouwant.html.Now, explanation. HTML
is made up of tags. Each element of the page uses tags. The
<html> tag tells the browser that it is an HTML page. <html>
tags enclose the whole page. You'll notice that the last <html>
tag has a slash. That tells the browser that the tag is finished. Almost
all tags must close like that, although a few self close, like this
"/>". The body is just what it sounds like, the main part of the
page. The <P> tag makes new paragraphs on the page.The head is the
top and information of a page, It holds the title of the Page and info
about the page. This is the output of that page:
Pretty cool, huh?
Now, to some more advanced stuff, like embedding pictures and links.
Step 10Pictures and Links:
It would be pretty boring if all the web
pages on the internet were just text, wouldn't it! Thankfully, there is a
way to put pictures in sites or how would you be viewing this today?
Embedding pictures requires the use of another tag, the img tag. Here's
an example.
<img src="http://quantumtech.sixserve.net/homelogo.png" height="150" width="400" alt="logo"/>
This code will bring up a logo from my website. The src element tells your browser where to find the pic. The height and width values tell how much space the image takes up on the page. "alt" is what shows up if for some reason the image doesn't load. the img tag self-closes, which means it only has one tag and ends with "/>".
Now, for how to use links. Here's an example link:
<a href="http://google.com">Google.com</a>
This makes a text link name "Google.com" to the URL "http://gogle.com". like src, href tells the browser where to find the page you're linking to. Then you close the starting tag and type in what you want to say. Then you close the tag with "</a>". There, now you are armed with the knowledge to make a real live website!
EXTRA:
You can use images as links, too! That's what most website do to make it look a lot cooler. Here's how you do it.
<a href="google.com"><img src="google.png" height="400" width="1000" alt="google"/></a>
Unless you have a giant google logo named google.png, this will not work. What you do is just put a normal image embedding line where you would normally put the text for the link. It really is that easy. If you think this isn't enough info on the actual programming of HTML, just look elsewhere on instructables (or your local library) for some more information. This really is a huge subject, not really fit for presenting in one instructable. They make 300+ page books on this subject. Later, I will make an ible going more in depth into HTML. But for now, you can go here.
<img src="http://quantumtech.sixserve.net/homelogo.png" height="150" width="400" alt="logo"/>
This code will bring up a logo from my website. The src element tells your browser where to find the pic. The height and width values tell how much space the image takes up on the page. "alt" is what shows up if for some reason the image doesn't load. the img tag self-closes, which means it only has one tag and ends with "/>".
Now, for how to use links. Here's an example link:
<a href="http://google.com">Google.com</a>
This makes a text link name "Google.com" to the URL "http://gogle.com". like src, href tells the browser where to find the page you're linking to. Then you close the starting tag and type in what you want to say. Then you close the tag with "</a>". There, now you are armed with the knowledge to make a real live website!
EXTRA:
You can use images as links, too! That's what most website do to make it look a lot cooler. Here's how you do it.
<a href="google.com"><img src="google.png" height="400" width="1000" alt="google"/></a>
Unless you have a giant google logo named google.png, this will not work. What you do is just put a normal image embedding line where you would normally put the text for the link. It really is that easy. If you think this isn't enough info on the actual programming of HTML, just look elsewhere on instructables (or your local library) for some more information. This really is a huge subject, not really fit for presenting in one instructable. They make 300+ page books on this subject. Later, I will make an ible going more in depth into HTML. But for now, you can go here.
Step 11Putting Your Site Up!
Now
that you've made a really cool site, it's time to put it up for all the
world to see! I'll start by telling you how to do it if you set up your
own server. First, find out where the document root of your server is
(where all the pages go). On Windows this is usually (C:/Program
Files/Apache Software Foundation/Apache2.2/htdocs/). On linux or mac
just google it. Remember, Google is your friend. go there (the document
root). Find wherever you saved your web pages. Just copy and paste the
pages in. On Windows, it might give you a administrator permissions
error. Get admin permissions and try again. It should be up now! Yay!
If you used Sixserve, which is what I did, go to that cpanel place again.If you forget how, just go back to step 6. First, find the homepage of your website, and rename it to index.html. When you're there, click on file manager. Then go to web root. Then click upload. find your web page files, and upload them one by one. When you finish, it might take a minute or two to update, but then it should be up! Congrats! You're done!
If you used Sixserve, which is what I did, go to that cpanel place again.If you forget how, just go back to step 6. First, find the homepage of your website, and rename it to index.html. When you're there, click on file manager. Then go to web root. Then click upload. find your web page files, and upload them one by one. When you finish, it might take a minute or two to update, but then it should be up! Congrats! You're done!
0 comments:
Post a Comment