- Joined
- Feb 4, 2010
- Messages
- 27,880
- Solutions
- 4
- Reaction score
- 8,281
- Trophies
- 0
- Age
- 38
- Website
- rydian.net
- XP
- 9,186
- Country
How To Make Your Own Website
Whether you're a homebrew coder looking for a place to hold your creations, a ROM hacker needing some space to post his updates and info, or a hardware hacker looking for somewhere to showcase his projects, there's many people who could use their own personal site. This tutorial will walk you through the basics.
Signing up for free hosting.
Setting up an FTP client.
Using FTP to manage your site.
Making Pages (CMS)
Making Pages (Custom)
Server-side include example.
F.A.Q.
Free host list.
Whether you're a homebrew coder looking for a place to hold your creations, a ROM hacker needing some space to post his updates and info, or a hardware hacker looking for somewhere to showcase his projects, there's many people who could use their own personal site. This tutorial will walk you through the basics.
Signing up for free hosting.
For this we will be using Zymic. There's other free hosts such as Byethost, but they're not always taking signups.
- Visit their site.
http://www.zymic.com/free-web-hosting/
- Click the signup button.
- Register with proper info.
- Check your e-mail and click the confirmation link they sent you.
- Log in on the left-hand side.
- Click "create a new web host account".
- You get a choice of main domain, choose one and type up the subdomain you want (as long as it's not already taken by another member).
- It'll ask you for a password for that site you just chose, pick a new pass.
- You will get a huge warning that they do not allow hacking, scamming, phishing, piracy, or other illegal activities. You will need to check the boxes near the bottom to let them know you agree, and you will need to complete a captcha to let them know you're a human (as usual).
- After you finish that, you get a confirmation image showing you your site's address and some info.
Setting up an FTP client.
- Go back to the main site, log in if needed, and you should see an option to log into the site you made.
- Enter that second password you made.
- In the management page you should see your FTP info to the left, this is important, you might want to save it somewhere.
- Go to http://winscp.net/eng/download.php and download the installer, then install and run it.
- Click the "new" button in the upper-right.
- Enter in the FTP information from the site. Be sure to set the file protocol to FTP (this will automatically change the port to 21).
- Click the "save" button, and choose a name for this FTP info/session.
- From now on when you start WinSCP, you can double-click the saved name you chose to log in without having to enter the FTP info (just your password if you didn't choose to save it).
Using FTP to manage your site.
- Open WinSCP and double-click the saved FTP/session to log in, you'll get a little status window and then the main FTP interface.
- The green (left) side represents your computer, and the blue (right) side represents your website.
- The dropdown box at the top of each section can be used to browse around your computer and the FTP site.
- You transfer files to and from your website by dragging them from one side to another. If I were to drag cat.jpg from my desktop folder (on my computer's side) to the website side, it would ask me if I wanted to copy it over. I could just click "copy" to tell it yes.
- The image (or whatever) will transfer over to the website.
- When it's done you'll see a copy of the file on the site's side of the FTP program.
- Once you have a file on your site, anybody can view it by going to it's address. If it's something that will display in a browser (like text, a webpage, or an image) it will display. If it's something that won't (like a a zip file, or some data files) they can download it instead.
Please note that some hosts do not allow you to add certain file types (like .exe files) directly for security reasons. Simply make a .zip file containing what you want people to download and you can upload that instead. Zipping a program or some files almost always makes the download smaller, so it's commonly-assumed that downloads will be in a zip, rar, or some other sort of compressed format.
- If you want to make a directory/folder on your site, simply right-click in the area and choose to make a new directory.
- Give the folder a name and click "ok".
- Double-click the folder in the site area of the FTP program to go into it, then you can drag files into it. If you want to go back, you double-click the folder name with two periods (..), this means "up a directory".
- Folders are navigated on websites the same sort of way they are on a computer. If you have an image named corn.jpg in the "corn" folder on your site, then it'll show up like this.
Making Pages (CMS)
A CMS is a Content-Management System. This is a premade set of scripts/pages for your site that lets you manage it in some way, and there's many various styles. There's blogs, shops, forums, and many multiple-in-one CMS setups. Wordpress, Drupal, and Joomla are examples. Take note that you will need databases in order to use pretty much any CMS, so if your web host doesn't offer them you'll have to make due with something else.
- Pick a CMS that you think is right for you. Don't worry too much about the default look as they can all be skinned, just focus on what it can do and how easy it is to use.
- Your web host might offer some option in your site's control panel (outside of FTP) that will automatically install a CMS (or "site software") for you.
If not, you'll have to install it yourself, this is how it's generally done.- Download the CMS and read the install instructions.
- Log into the database management section of your web hosting control panel and make a database for the CMS, and make a user for the database.
- Use FTP to transfer all the CMS files to your site.
- Visit the install page for the CMS and give it the database info and choose your options.
- After the install script finishes, the CMS will tell you to delete the install files for security.
- Log into the CMS's control panel and start customizing your site and publishing/posting your content.
Making Pages (Custom)
- In a website, a page is a text file (renamed to .html or .php) that contains HTML and text. The problem is that Windows, by default, does not let you see the true extensions of files, so we will have to change a setting.
- Open My Computer or Computer from the start menu.
- Go to Tools - Options.
- Go to the "view" tab.
- Uncheck "hide extensions for known types".
- Save the changes.
- When a person views a .html file on your website, the HTML coding in it is transformed into the web page that they see. This page is often a mix of various things.
- Text
- HTML
- CSS
- Javascript
- PHP/JSP/ASP/Ruby
- Various HTML and CSS tutorials can be found here.
http://www.yourhtmlsource.com/myfirstsite/
http://www.tizag.com/htmlT/
http://www.tizag.com/cssT/
http://www.barelyfitz.com/screencast/html-...ss/positioning/
- While you can use normal Notepad to code, it's highly recommended that you use an alternative such as Notepad++, which includes syntax highlighting to make your job a lot easier.
Server-side include example.
This will introduce the concept of an "include", which makes managing your site a lot easier. For many people, when they're making new pages they copy-paste the layout/coding of the current page and make a new page out of it. This works well enough, except that when it comes time to change the layout, they have to go back and change every single file...
With server-side includes, you don't need to do that to make changes to the layout. The idea is to keep the "common" parts of your site (such as the layout, menu, and footer) in separate files from the content of each page. When a user visits your site, the server will automatically piece the files together. In the example layouts here for you, there's top.txt, bottom.txt, and an example page (index.php). You'll notice that top.txt contains the information that goes before a page's content (such as the layout/CSS info, and the menus and such), and bottom.txt contains info that goes after a page's content (such as the footer and closing the final tags). What an include() does is pull the content from these text files into a page when it's viewed.
This means that any time you want to edit the layout/menu/whatever, all you need to modify is top.txt and bottom.txt, and the layout for your entire site will change at once.
Here's two visual examples of what can be easily done with includes. If you want to use includes yourself, check out some tutorials in including and requiring files in whatever server-side language (like PHP) you'll use.
Top menu.
Side menu.
With server-side includes, you don't need to do that to make changes to the layout. The idea is to keep the "common" parts of your site (such as the layout, menu, and footer) in separate files from the content of each page. When a user visits your site, the server will automatically piece the files together. In the example layouts here for you, there's top.txt, bottom.txt, and an example page (index.php). You'll notice that top.txt contains the information that goes before a page's content (such as the layout/CSS info, and the menus and such), and bottom.txt contains info that goes after a page's content (such as the footer and closing the final tags). What an include() does is pull the content from these text files into a page when it's viewed.
This means that any time you want to edit the layout/menu/whatever, all you need to modify is top.txt and bottom.txt, and the layout for your entire site will change at once.
Here's two visual examples of what can be easily done with includes. If you want to use includes yourself, check out some tutorials in including and requiring files in whatever server-side language (like PHP) you'll use.
Top menu.
Side menu.
F.A.Q.
- Q - I'm using a different host and people can go to a folder of my site to view all the files in it, how do I stop that?
A - If you make an index.html or index.php file in that folder, than the viewers will see that file instead of a list of all the files.
- Q - I'm using another host and files I add don't seem to be visible, and what's this public_html or WWW folder for?
A - On many hosts you will need to place your files with the public_html or WWW folder for them to be visible to the public. That folder is considered the "base" of your website.
- Q - How do I get my own www.whatever.com address?
A - You buy it. An address like that is known as a TLD, "Top-Level Domain". It is a worldwide registration and it costs money, you can usually find a domain name for about $15 or less a year (they're leased out on yearly cycles). While there are some ways to get a free TLD suhk as a .tk, they generally suck for more reasons than I care to list, and they WILL often pull the domain name from your control and re-sell it as soon as it gets popular so they can make money off of you, if you read the fine print.
- Q - Is there any other way to make the URL not so stupid-looking?
A - While you can't get a free domain, you can get a free redirect that almost looks like one. Co.cc is one such service.
- Q - In the example layouts why is the title info not in top.txt?
A - So each page can have it's own title. If you don't need that, feel free to stick it in top.txt.
- Q - Hey some code or include isn't working...
A - Any file with an include/code in it should be .php, not .html (by default). It's still a text file you open with a text editor.
- Q - How do I change the colors in the example layouts?
A - The colors are in the CSS located in top.txt.
- Q - Why are you talking about just PHP when there's more?
PHP is free and available on damn near every server you'll ever touch. If it offers server-side scripting, PHP is an option. In contrast JSP/Ruby aren't as common, and ASP is not free. PH{ is easier for newbies to get their feet wet with, to get introduced to the concept of server-side code (though actually programming anything is way out of the scope of this tutorial).
- Q - Why don't you suggest dreamweaver?
It's not very good at teaching people how to code, they use it as a crutch more often than a development tool. In addition it's useless when you have server-side coding involved. While it does offer autocomplete, Notepad++ and many other free editors do as well. Live preview is available in pretty much any IDE, and as said before doesn't work well when you're using server-side coding. I'm attempting to encourage development and learning here, if this guide was just how to get a page to say "hello world" I'd tell people to sign up for freewebs and click the prettiest template, you know?
Free host list.
http://www.zymic.com/free-web-hosting/
http://www.freehostia.com/
http://www.heliohost.org/home/ (Limited number of signups per day.)
I'm going to ask that before somebody suggest a host, they upload and view this script.
http://www.mediafire.com/?kpiktqwjlylwhe5
http://www.freehostia.com/
http://www.heliohost.org/home/ (Limited number of signups per day.)
I'm going to ask that before somebody suggest a host, they upload and view this script.
http://www.mediafire.com/?kpiktqwjlylwhe5
- If it gives you a confirmation message in green text, then it's clean.
- If you get some undefined function error, then the host has a lot of stuff locked down and might not be very useful.
- If you get some header output already started error, then the host is injecting ads/tracking.
