Monday, 4 June 2012

How To Make Your Own FREE Website

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:

iWhat You Need:
  • sixserve.png
  • notepad.png
  • vs2010.png
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:

iInstalling Apache:
  • apache.png
  • cmd.png
 
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.
 

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.)"


 

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:

iFree 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:

iCreating 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:

iMAKING a Website:
  • vs2010.png
  • amaya.png
  • pb.png
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:

iBasic 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:

iPictures 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.

Step 11Putting Your Site Up!

iPutting Your Site Up!
  • public.png
  • long.png
  • up.png
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!

Step 12Conclusion:

Now you've finally made your own website! I hope you had fun doing it and it wasn't to hard. If you do make a website with these instructions, just comment on this page and I'll post a link to your site here! Meanwhile Here's mine:
Categories:

0 comments: