Introduction: Build a Website for As Little As $20 a Year!

Picture of Build a Website for As Little As $20 a Year!

In this instructable, I will be covering everything you need to know to create a great website for a very low cost! If you'd like to check out some of my work, head on over to: Webshawty.com

A couple things you will want:
-Internet Access
-A Newer Computer

Other Helpful Materials
-Adobe Photoshop
-iWeb 2.0.3

Step 1: Finding a Website Name (Domain Name)

Picture of Finding a Website Name (Domain Name)

Before you start your website, you are going to want to purchase a domain name. A domain name, is just another way of covering up a URL (Uniform Resource Locator). So for example, my website "webshawty.com" would be the domain name. If I was using the Apple application, iWeb, my original URL would be "http://web.mac.com/YOURNAME/Home.html". With your domain, you can have "Http://YOURNAME.com". Once you've thought of a creative name, you will want to go to "Name.com" and register your Domain. Once you've done that we can move on to the next step.

Step 2: Working With a Developer Application (Preferrably IWeb)

Picture of Working With a Developer Application (Preferrably IWeb)

Your domain has been purchased, and you are now ready to begin all the dirty work and configuration in this process. If you are looking for a FREE website host, I would suggest FreeWebs or WordPress. If you feel more advanced, I would suggest either iWeb or HomeStead SiteBuilder. If you are using FreeWebs or WordPress, read the section, "FreeSite Tutorial". If you will be using an advanced app. then read, "Advanced".

FreeSite Tutorial

Once you have set up an account on either FreeWebs or WordPress, you will have a bunch of options (Or so it seems). First off, you will want to go to the part of your account where it says "Pages" or "Edit". When you're there, you will want to look for something like "New Page" or "Add Page". When it takes you to your new page, you will want to start editing paragraphs and titles. In FreeWebs, you can also change the "Footer" (Bottom of page message) by going to "Edit Site", "Edit Titles & Footers", then edit your footer, title, and catch phrase. It should be something like that for WordPress. You can also change your template in FreeWebs by going to; "Edit my site", "Change Template". WordPress I believe, is a little bit easier. As for everything else, you will pretty much get used to it.

Advanced

Although these apps. will cost you about $100 a year, that are much better, and much more capable. Anyway, my preferred app. is called iWeb from Apple. If you're using HomeStead, you should have a PayPal, Web Requirements, and lots of Web knowledge. Anyway, If you're using iWeb, I will start teaching you how to use it in the next step.

Step 3: IWeb: Everything You Need to Know

Picture of IWeb: Everything You Need to Know

In this step, you will learn how to work with Apple's iWeb. I will also begin to teach you about blogs and RSS.

Beginning
Once you open iWeb you will notice a simple layout that requires you to choose a page layout. You can choose from many already created templates, or create your own. Once you have a page, you will need to get used to all of your tools. If you're using version 2.0.3 (Newest Version) the following will work. Let's start by looking at the bottom left of the App. you will notice a +, a Publish button, and a Visit button. Once you're ready to make your changed public, you will click on Publish. Once you've published, you can view a specific page by holding "Apple" and clicking Visit. Next, you will notice what I like to call the "Toolbar". These are on the bottom of the window. On the far left of the toolbar, you will see "Theme". This tool allows you to change the look of a page that you've already created. The next button to the left, is the "Text" tool. This will create a box, in which you can type your own text. Next, is the "Shape" tool. This allows you to create loads of shapes. If you double click, you can type text in it. Next, is the "Web Widget" button. This is probably your most powerful button. It allows you to take a few lines of HTML code, and create a widget with it. For example, you could put a YouTube video on your site if you found the HTML code which is located on the Video page. Next, we have the "Media" button. I know that I've skipped over a couple buttons, but don't worry, those are only important if you don't have a 2 key mouse. The media button allows you to quickly add movies, music, or photos. When adding any content that you haven't created, you must be careful, because if you steal a picture, or play music without paying the artist, you would be violating copyrights, in other words, stealing property, which could result in a large fine or even jail time. Anyway.... The next button you'll see is the "Adjust" button. This allows you to edit pictures and how they appear. Then we have a button that will give you even MORE options, this is the "Inspector" button. Once you are in it, you can create links, add a password, and access other stuff not available with the other tools. After that, we have the "Colors" and "Fonts" buttons. The colors, will not only teach you color numbers but also allow you to quickly color buttons, or shapes. You can also drag a color over text to change it's color (Not if it's a Link. Change link color in Inspector). Then we have Fonts. I personally don't usually change the font, but the font button helps if you like very fancy fonts.

Pages
As you've probably noticed, you have a bunch of options for pages; Welcome, About, Photos, Etc. The one kind of page I'd like to point out right now is the Blog page. This page will let you post paragraphs, and update your RSS feeds instantly. You're probably wondering what an RSS feed is. Well, to put it simply, an RSS feed is another version of your blog. The RSS feed of a blog usually ends in "rss.xml". So once you've copied the blog rss url, go to Widgetbox.com and create a "RSS Feed" widget. Use the URL which you copied here. Once you've put the information in, it will automatically create the "Blidget" (Blog-Widget) for you. You will be able to customize how it looks and also the "Tags" (How it can be classified) and title. Then, if your blog is interesting enough, you could reach MILLIONS! Especially with the help of Widgetbox.

Step 4: Blogging, RSS, and Blidgets

Picture of Blogging, RSS, and Blidgets

In this step, I will continue teaching you about Blogging and I will also teach you about RSS (Really Simple Syndication) and how to use a "Blidget".

Blogging
Blogging, is one of the best ways to attract visitors to your website. By posting on a regular basis, and by having interesting content, you can attract just about infinite visitors. With iWeb, blogging is extremely easy. The only other great blogging place is probably WordPress.

Blidgets
A blidget, or Blog widget, is a feed oriented widget that instantly takes a RSS feed (Blog URL) and puts it into a customizable widget. If you want to make a Blidget, I'd suggest Widgetbox.

RSS
RSS, or Really Simple Syndication, is another way of saying a blogs URL that can be used for a Blidget or a RSS Reader.

Step 5: Exploring Widgets and Other Helpful Services

Picture of Exploring Widgets and Other Helpful Services

Widgets, probably the easiest way to express yourself and show-off other cool stuff. Although it isn't easy to create a widget, it sure is a lot easier to find widgets now-a-days. After experimenting with widgets for a while, you may want to look into this really cool web-based application called "Sprout". This app. allows you to create your own widgets. You can add polls, feeds, and a bunch more.

Forms
Forms are a great way to let visitors express their feelings, or allow people to sign-up for various things. Forms have never been easier to create with FormLogix. You can create your own forms with many choices of things to add-on.

Polls
The best way to get visitor's insight. Do you want great polls? Want to put them on your site? Now you can! Introducing, PollDaddy. PollDaddy allows you to customize your polls and post them almost anywhere! You can also use PollDaddy polls in "Sprout".

Step 6: Tracking Site Traffic

Picture of Tracking Site Traffic

Now that your site has really grown, you need a way to check out who's looking at your site. You may want both a live view and a overall view.

If you'd like a live view, I'd suggest "Whos.amung.us". Just go to the homepage and copy the code and put it on your site. It will start tracking immediately. It will also give you a map of where people are coming from.

When you want an overall view, you will definitely want either Google Analytics or W3 Counter.

Step 7: How It All Fits In...

Now that your site is looking good, let's discuss how everything "laces" together. First off, you should know that a blog is a way for you to instantly publish a story about any topic. Hopefully you also know that the blog's "feed" is instantly updated once you publish. This means that any RSS Feeds will be updated automatically.

Also, your widgets, or blog widgets, also can either be updated by you, or updated by someone else. These too are automatically updated if they are a blidget, or if you're using Sprout.

Your domain, or cover-up for a URL, is making it so that no one will be able to see your old address, unless you told them that one..... Also, with Name.com, you can get emails such as: "Bob@yoursite.com".

Hopefully that clarified what you've learned. If not, you may want to check out my instructable about website terms. (I don't have good pics. for that yet..) Click HereClick Here.

Step 8: Finish

Picture of Finish

Congratulations! You're on your way to fame! Hopefully, my instructions were helpful. If you'd like to thank me, just tell your buddies about Webshawty.com. Your friend, The Website Master. Also, if you want, leave your link and I'll check it out and give you my "Insite".

Comments

sj321936 (author)2011-02-28

Can u use co.cc or cz.cc and it will work?

fernandblaze (author)2009-11-25

A domain cost around $8 to $10, but I don't know where you can find a good webhost for just under $20, unless it's free.

Also, I agree that it needs some more guides(managing domains, installing wordpress to your host, etc,)

Izokay (author)2008-09-12

I am in HTML mode on Freewebs. How do I set it up with RSS?

spiffytessa (author)Izokay2009-01-26

Personally, I would ditch Freewebs. Freewebs is like the crappiest web host ever invented. Personal experience. ;)

crestind (author)2008-08-16

Preferablye iWeb? iWeb is one of the worst web design applications out there. The quality of code produced is terrible.

Yes, although iWeb's coding is very bad, it is an extremely simple way for developers to get used to creating a website. Their new version, 2.0.3 has many more features than the last versions. I personally think that iWeb isn't the worst app. but it could definitely be better.

PKM (author)2008-08-15

Your block of text in step 3 could do with breaking up a little, it's half the size of my monitor! Other than that, your instructions are reasonably clear (and don't seem to be too heavily plugging any one product, which is nice to see). Something I would like to see more of in simple website building tutorials is a bit about how websites actually fit together (ie the essential elements: hosting, domain name and HTML). You might not need to know it all but it is something you should know if you are making a website, rather than just following instructions like a recipe. But that's just my personal hangup.

The Website Master (author)PKM2008-08-15

Hello, I'm glad you enjoyed my first instructable. I'll break up that text and get you some more information about essential elements. If you could, please tell me what developer app. your using so that I can find some more helpful stuff for it. Thanks again, Webshawty

PKM (author)The Website Master2008-08-16

Sorry, I think you misunderstand me- I know about the elements that make up a website, but as a "How to make your first website" Instructable this isn't aimed at me. I was just saying I would like to see beginners' guides pay more attention to what is actually happening behind the scenes and how the hosting, domain name and code you write fit together, rather than just the steps you have to perform to make a website pop out at the other end. It's the same sort of mentality that wants people driving cars to know what the pedals are actually doing to the engine, not just what they make the car do. For the record, I still hand-code the majority of any HTML I write because I'm a wooden-ships-and-iron-men kind of guy :)

The Website Master (author)PKM2008-08-16

Oh, now I get your point. I'll try and "lace" the topics a little bit better. Also, I'm working on another instructable about website terms that might help people who need to learn about that kind of stuff. Anyway, thanks for your "insite". Webshawty

About This Instructable

2,641views

22favorites

License:

More by The Website Master:Build A Website For As Little As $20 A Year!
Add instructable to: