How I Made This Website

 

I get a lot of people asking me how I made this site, so here’s how I did it step by step.

1)

2)

3)

Now that you’ve got the basics,

here are some extra tips

I registered for web hosting with Yahoo Small Business (formerly Geocities).  It was Geocities when I started this, so I’m not sure what’s changed.. but from looking at their current website it looks like it costs $7.46 a month (though I just checked my account and my monthly bill is $12, maybe because I signed up a while ago and the package I signed up for no longer exists).  


According to the ‘What’s Included’ page, for $7.46 a month you get:

-A domain name (like www.NickLaRiviere.com)

-Unlimited disk space (that means you can store as much data as you need to on their server)

-Unlimited data transfer (that means no matter how many people use your website in a month they won’t cut you off

-1000 Email addresses (I’ve got mine set up to only use Nick@NickLaRiviere.com, but I could use more if I wanted)

-Submit your site to various search engines


Anyway, long story short... It’s easy and affordable. 


Click here to see their list of features and sign up for your website.


VERY IMPORTANT WARNING:

About a year after you’ve signed up for your website if you’re in Canada you’ll receive a letter from the ‘Domain Registry of Canada’.  It looks like an official notice and it’s asking you to pay them to keep your .com domain name because your website is about to expire.  DO NOT, I repeat DO NOT sign up with this company. 


The ‘Domain Registry of Canada’ is NOT a government organization despite it’s official looking letter.  It is a private company that searches for websites who’s domain registry is about to expire and sends the owner of the website junk mail.  If you make the mistake of signing up with this company then you’ll be paying whatever large amount of money they’re asking for ONLY for the domain name, and none of the disk space, email addresses, or other great features of Yahoo.  


So to sum it up, the letter from the Domain Registry of Canada is a trick! Don’t let them trick you! Remember this a year or so from now when the letter comes and throw it away!


Also, your Domain name will not expire, as their letter says.  It only needs to be renewed, and Yahoo will do that for you automatically - you don’t need to do anything just as long as you’re still paying your monthly fee to Yahoo.

I use a mac computer to design my website.  There’s a great and easy program that comes with every mac called iWeb.   iWeb comes with it’s own tutorials, so I won’t get in to the details of how to do the actual designing of you website... but I will give you the basics of how to get started.


The first time you run iWeb it might ask you something about MobileMe, which is Apple’s web and other documents hosting.   I’m not sure if you can get a .com domain name with it, so that’s why I’m suggesting to use Yahoo Small Business... so if you want to do this the way I did, then don’t use MobileMe, just skip those steps and get to the part where you actually design your website. 


When you start a new page on iWeb it always comes up with templates, but I always start with the blank black template.   You can use whatever you want, but I’d suggest to start with a blank one if you want your page to look more unique.. though there are some things that will look the same on every website that’s been designed with iWeb.. Such as the menu at the top of the page.. iWeb puts that in automatically.


A few iWeb tips:

To the left of the iWeb screen is a list of the pages on your website.  The TOP one is the page that people will see when they go to your website by typing your domain name in to a web browser.  A cool tip is that if you need to have an intro page to temporarily advertise something, you can just make a new page (by clicking the plus sign at the bottom of the page list) and then drag it to the top of the list.  I’ve used this to advertise some big shows such as CD releases and Trombone Mayhem performances, as well as to get people to vote for me when I was nominated for Favorite Jazz Artist in Victoria’s M Awards.   Make sure you include a big link on that intro page to continue on to your main website so people don’t think that the intro page is all you have. When the event you’re advertising for is over, you can just drag the intro page lower on the list, and your home page will be the first thing people see again. 


The ‘Inspector’ is the thing in iWeb you use to do a lot of important stuff, like make links and change colors.   To get to it you need to click ‘Window’ and ‘Show Inspector’.   If you’re using a temporary intro page there are two important things you should do in the inspector.  While on your intro page, click the page tab (2nd from the left) and de-select ‘Include Page in Navigation Menu’ and ‘Display navigation menu’.  


If you want to include links to large downloadable files such as mp3s or videos, don’t make the link in inspector.  You could do it this way, but every time you update your website to the server (which we’ll get to later), it will need to upload all those files which will take a while.  It’s better only to include pictures and text in iWeb.  I’ll show you how to make links to big files quickly in a later step.


One more note: When making pages in iWeb make sure there are no spaces... So basically all your page titles need to be one word (like Home, Album, Gigs, GigCam, Students... etc).  iWeb will allow you to have a space but it will get screwed up in a later step if you do.

Get your website from iWeb to Yahoo


This is the step that will put whatever you made in iWeb online for people to see. 


The first thing you’ll need to do is buy a program called ‘Web Echo’... Actually it might be free now.. I think I had to pay for it when I got it, but the websites I’ve found it on just now in a search say ‘free download’... however it might be free to download and then you have to pay to register it.  In any case it’s either free or cheap and you need it.  Here’s a link to the file, but if this link stops working then just google it. 


Once you’ve installed Web Echo (don’t set it up yet), go back to iWeb and click ‘File’ and ‘Publish to a Folder’.  Make a new folder on your computer to store the data.  iWeb will make a copy of your website in this folder, and Web Echo will copy the contents of this folder to your Yahoo Server. 


Once iWeb has finished ‘publishing to a folder’, you can open up Web Echo.   I think the first time you use it, it will automatically ask you for some settings.  I’m not sure exactly what that will look like because I set this up on my computer so long ago, but I’ll give you the settings you need to make it work. 


If I click ‘Settings’ on my Web Echo program that’s already set up I get this:

The Local Folder is the folder you made in iWeb when you said ‘Publish to a folder’.  


If you registered with Yahoo Small Business, your ftp server is:

ftp.whateveryoucalledyourwebsite.com


Your username is the user you created with Yahoo Small Business when you went through the steps to set up your website.   It’s been a while so I can’t remember exactly how that went.  If this step is confusing try entering the first part of your yahoo id that you made when you signed up (like joesmith@yahoo.com) with @whateveryoucalledyourwebsite.com at the end.  


Your password is the password you made up when you signed up with yahoo.  Don’t bother with remote folder.


After you’ve got these settings figured out, you should be able to update your website every time with two easy steps.


  1. 1)Open iWeb and click File-Publish to a Folder

  2. 2)Open Web Echo and click  Mirror Site

To put links to large files on your website without having to sync when with Web Echo every time you update, which is time consuming:


-Open Web Echo


-Click Browse FTP, which is next to Mirror Site

You’ll see two columns come up.  The left is your computer’s hard drive, and the right is the space you have on your website. 


-Use the left column to find the file you want to have a link to on your computer.  In the right column, making sure that it’s showing you the root directory of your website (you can tell because next to the little image of the earth above the column there’s a /  - if it has anything after it, click the Up button), make a new folder (by clicking New) for your large files. You could call it ‘Downloads’ or ‘Audio’ or ‘Video’... whatever you want.. The user will never see it anyway except at the bottom of their web browser window when the mouse is above your link.


NOTE: Your file can’t have any spaces, so if there are spaces in your file name, rename it (example: change Nick’s Trombone Solo.mp3 to nickstrombonesolo.mp3)


-Open the folder you just made in the right column, and select the file you want to upload in the left colum, then click the upload button in the middle.


-Remember the file name.  Now go to iWeb and type some text, select it, then in Inspector click the Link tab (it looks like a blue circle with an arrow).  Click ‘Enable as a hyperlink’.  The Link To type should be ‘An External Page’.   In the URL type:  http://www.whateveryoucalledyourwebsite.com/thefolderyoumadeforyourfiles/yourfile.mp3


So to use a real example from my website, the link to my (rather cheesy and old) basic improvisation video is:

http://www.nicklariviere.com/Videos/Basic-Improvisation.rm


Capitalization of the folder name and file name is important. 

To embed a youtube video on your website:


-Go to youtube and search for the video you want

-To the right of the comments below the video in the description box, you see ‘embed’ and in that box is a bunch of computer talk gibberish.   Click in that box and it will give you a bunch of options. 

-Select the video size, player color, and any other options you want and then copy the computer code from the embed box. 

-Open iWeb and click ‘Web Widgets’ at the bottom of the screen.  Select ‘html snippet’ and paste the code from youtube in to the box that comes up.   You can move that box to wherever you want on the page, but if you want to resize it you’ll have to get new code from youtube and paste it in again.


Here’s an example - my album promo video:


















Don’t worry if you can’t click the play button in iWeb.. it will work when you publish your website to the server and you view it in a browser.

To make a page on your website play mp3s:


  1. 1)Upload the mp3 files you want to play back to your website’s server using the same steps as you used on my first tip to save large files to your website.  Remember the file name, you’ll be using the same link to play these files here as you would have to make a download link in that step.

  2. 2)Go to this website and design an mp3 player.  Give it the links to the mp3s you uploaded to your server.   Remember your username and password for this site, you might want to change your playlist later.   When you’re finished making your playlist, it will give you some computer code - copy that.  

  3. 3)Open iWeb and click ‘Web Widgets’ and ‘Html Snippet’ just like you did to embed a youtube video in your site.  Paste the code in.. and there you have it! 


One annoyance is that making an mp3 player for your website with this is that it will have a little thing that says ‘myflashfetish.com’ under it... but there’s a solution to that.  After you’ve finished the other steps, click the Shapes button on the bottom of the screen next to Web Widgets and select the square.  Position the shape over the ‘myflashfetish.com’ text, and then in the Inspector click the tab to the right of the T.  Then change the fill color to the same color as the background of your page so the square blends in.  Then no one will be able to see the link.

To make a live video camera for your site (like my Gig Cam):


I did this by jailbreaking my iphone and using Qik.  Qik is now available for non-jailbroken iPhones as well as other phone types.   Go to their website and follow the directions to get things set up.  Once you’ve got it figured out and you can see the video you’re shooting live on the Qik website:

-Make sure you’re signed in to Qik

-Click ‘My Live Channel’ and it will show you some computer code, copy that, make a new web widget in iWeb, and use that code (like we did for mp3s and youtube videos).  


An alternative way to do this is to use usteam.  It’s also available for iPhone, but it’s advantage seems to be that you can use it on your computer as well.  Victoria singer Randy Tucker used ustream on a macbook pro connected to an HD camera to broadcast a show live in good quality, which is a lot better than Qik can do.   For now I’m just sticking with Qik because it’s easy and it was available before ustream for iPhone. 

If you found this information useful, please consider checking out my album.  I worked very hard on it, and I think it sounds great.  It’s also had some great reviews. 


You can find it on CDBaby here, or download it from the iTunes store by typing Nick La Riviere in the search box.  It’s also available in Victoria at Long & McQuade, Larsen Music, The Brass and Woodwind Shop, and Hermann’s Jazz Club. 

If you’d like to see more info about my album, check out my album page here.


Thanks very much!