Rackspace Cloud servers are ultra-reliable and robust cloud based servers that can be configured with a variety base OS images. This walkthrough will take you step by step through creating and setting a base install of the popular Ubuntu 10.04 LTS (Lucid Lynx). Later walkthroughs will pick up where this walkthrough leaves off with setting up common webserver platforms and frameworks.

We begin by logging into our Rackspace Cloud Server control panel.

1. Add new server instance.
2. Select Linux tab, then Ubuntu 10.04 LTS (Lucid).
3. Type a unique name to identify the new server.
4. Select the desired hardware. I started with the least expensive; it is easy to scale up later if needed.
5. The Rackspace panel will give you a pre-generated password. Save this for later reference.
6. While the server is building you will want to install an SSH Client. If you are on Windows we recommend Bitvise Tunnelier (free for individual use).
7. Once the server build is complete, you will get an email with the public IP address and the root/admin password for your new Linux server.
8. Open your SSH Client and connect to the new server with the public IP address as the Host, Default Port 22, root for the username, and the auto-generated password from earlier for the password.  On successful connection you should get a console command window.
9. The first thing we should do is changed the root password. Since the auto-generated one was sent unencrypted via email it can no longer be considered safe. At the console prompt, type the command: passwd and hit enter. You will be prompted for the new password twice. Be sure to use an unique password that is fairly long, contains a mix of letters, numbers and at least one punctuation character. Save the new password in a secure location.

At this point you will have a working base install of Ubuntu 10.04 LTS (Lucid) running on a Rackspace Cloud Server. The next walk through will help take you step by step for Installing the LAMP Frawework stack.

LAMP is an acronym for the Linux Apache MySQL PHP stack, which is a very popular web development framework. This walkthrough will guide you step by step the process of installing a base LAMP stack on a clean Ubuntu 10.04 (Lucid Lynx) server. If you do not already have an Ubuntu server, our previous walkthrough Creating a Rackspace Ubuntu Cloud Server will take you up to the point that this walkthrough picks up.

SSH into your Ubuntu server (see our Ubuntu setup walkthrough if you need help with this step)

1. Update the installer source repositories by typing the following command:
   sudo apt-get update (hit enter)
2. Install Apache:
   sudo apt-get install apache2 (hit enter)
   Type Y to confirm.
3. Once the Apache install is finished, you can confirm it works by opening a new browser window and browsing to either the local or public IP (http://ip-address) of your Ubuntu server. You should see a page that says "It Works!" if all went well.
4. Install MySQL Server:
   sudo apt-get install mysql-server-5.1 (hit enter)
   Type Y to confirm.
   Enter a new password for the root MySQL user. Be sure to use a unique password that is fairly long, contains a mix of letters, numbers and at least one punctuation character. Save the password in a secure location.
5. Install PHP 5:
   sudo apt-get install php5 (hit enter)
   Type Y to confirm.

6. Install the GD library for PHP:
   sudo apt-get install php5-gd (hit enter)
   Restart Apache:
   /etc/init.d/apache2 restart (hit enter)

7. Finally we now install the MySQL module for PHP:
   sudo apt-get install php5-mysql (hit enter)

Now we have a clean base install of a LAMP server running on Ubuntu 10.04 (Lucid Lynx). If you are using a Hyper V server or the Rackspace Cloud, now would be a great time to make a snapshot backup of your server. We will pick up from here on the next walkthrough with installing and configuring Drupal.

I have long subscribed to the argument that the design (CSS) should be separate from the content (HTML). The theory makes a lot of sense. It allows for the design of the site to be changed and tweaked without needing to go into every single page and adjust the code like was common years ago. Websites like csszengarden.com illustrate this theory very well.

The one nagging problem however, is that most sites invariably end up needing some customized CSS styles applied to just one specific piece of content in order to meet the requirements of the client. You know, the pesky splash text that only appears on the home page for example. Or perhaps it is just one customer testimonial that was just a bit too long so you apply a tiny bit of negative letter spacing to make it fit. You end up with CSS style definitions like: #homepageBannerText or #smith.customer Testimonial. Are we really still separating content from style at this point? I would say no.

It gets really bad when you start creating sections for each page within the main stylesheet. I have seen sites that have ended up with over 20,000 lines in the main style.css as a result of this. I know everyone has different opinions on how to organize, but personally, a 20,000 line css file drives me nuts!

One of my recent projects entailed a website where the design was already done and we were responsible for taking the Photoshop comps and producing a website to match. The website featured a scrap-booking theme. This also meant lots of variation from one page to the next. It would require lots of z-index layering and special positioning of transparent images to get the desired overlaps and effects. What it boiled down to was nearly every page would need per-page CSS definitions, and lots of them.

I decided I would look for a new approach. Many would suggest a main style.css for all the site-wide css attributes and then one additional css file for each page that needed custom style definitions. While the organization of this appeals to me, I wasn't happy about the fact that this would also require another http connection increasing the load-time for each page. Especially on this particular site which was already very graphics intensive with lots of big images on each page.

I finally settled on the approach of a very similar method. Except that instead of putting the page specific css in a separate file, I just defined it in a style block at the top of that page. Much of the advice online says that this should be avoided, citing the separation of the content and style as the reason. My experience with this site showed that this technique actually worked out very well. Any style that applied to the entire website or at least to multiple pages was still placed in the main style.css as usual. It was neat, organized, fairly trim, and it was then cached by the browser for each consecutive page load. I still can alter any of the site-wide styles with ease if I ever need to. Every single page is no longer forced to download the CSS styles for every other page on the website, something that has always bugged me about the single CSS file method. After all, we don't have the browser download the content and images for every other page do we?

But because the per-page definitions were embedded at the top of the HTML, I also have not created an additional HTTP request. What I was surprised to learn was that this technique also made the CSS and HTML both much cleaner. I no longer needed to have site-unique ID's on everything that needed custom styling. I could simply override the global values on a specific element, say .stickyNote at the top of my page in my per-page css block. My custom values would apply to only that page just like I needed, without affecting any of the other global rules for other pages.

As far as separation of content and style goes, I feel I have not lost anything. The only rules that are in the HTML page are inherently tied to the content anyway. Even if they had been defined in the main style.css, they would need tweaking anytime the content changes. By putting them in the top of the page it actually makes this easier, while keeping my main stylesheet clean from all this clutter.

I just ran into this with a new site we are launching. We were using a webkit font that was generated by fontsquirrel.com (great resource by the way) and I noticed the font was displaying great in pretty much everything except IE9. After a bit of searching it turns out that for some web kit fonts you will need to add a new mime-type to the site in IIS.

Here are the steps:

1. Open the site in IIS.
2. In the Features View, with the site node selected, click MIME Types.
3. Click Add from the Actions area.
4. Add ".woff" for the Extension and "application/x-font-woff
   " for the mimeType and click ok.

These steps cleared the issue up for us. : )

ASP.NET has a built in website template system called Master Pages. The system offers a very flexible and easy to use solution for managing the portion of a website that will be re-used on more than one page of the site.

Most websites will use the same header, navigation and footer on almost every page of the site. Master Pages provide a simple to use, and simple to manage answer for this common problem. Master pages are not the only option for this problem. Some developers have taken the time to build their own templating system (usually when using another development language that does not already have one built-in like ASP.NET), and some web design software suites include a template system. For example, Dreamweaver includes a system called "Dreamweaver templates". ASP.NET Master pages work similar to the Editable Regions in Dreamweaver templates, but they offer a number of advantages.

1. The master pages are integrated into the content pages at the time of the user request. This means that unlike client side based templates, you do not need to re-apply it to every content page each time you change the master page.
2. The ASP.NET Master Pages are much more flexible than most other template systems. Among many other features, they allow for an unlimited number of nested template levels and allow for default content at each content region. While nesting is beyond the scope of this article, it is actually quite simple to implement. I will discuss how to specify default content below.

The template files in ASP.NET end with .master and are very similar to a standard .aspx page in that they can contain the same kind of page markup. The .master file will contain the code that you want to reuse on multiple pages.

In the example below you will see the Site.master default markup for a new Visual Studio Web Site. By default there are two Content Place Holders defined with the <asp:ContentPlaceHolder /> tags. The first one is titled HeadContent and contains a single line of default content. The second Content Place Holder is titled MainContent and uses the shorter close tag notation since we did not specify any default content for this region. Because the templates are actually merged by the web server at the time of the request, we need to include the runat="server" parameter as well.

In the sample Content Page below we tell the server that we want to use our Master Page by adding the MasterPageFile="~/Site.Master" parameter in the Page tag at the top. The Master Pages content will now automatically be used on this page of the website and all we need to do is optionally provide some custom content for our Content Place Holders. We do this by using a <asp:Content /> tag. The page below has supplied content for both of our Content Place Holders. Notice how the tags are matched to their proper corresponding Master Page tag by the ContenPlaceHolderId parameter.

If we request the page from the web server, below is the resulting HTML that is sent to the browser. The custom content was automatically merged with the template content contained in the Master Page, and then the ASP.Net Placeholder tags were stripped out and finally the server would process any other server side elements before sending the results to the client. Notice also that setting the Title parameter in our content page was still applied even though the title tag is actually outside of any of our Content Place Holders. Any code behind files (.cs or .vb) that are associated with the pages will get processed just fine. Another nice feature is that you can even specify a code behind file for your mast page that so that it can be used to insert server code that you want to get processed on every page.

Now if we decided we did not need to change the default content that we have for the header in our HeadContent Place holder, we would just omit specifying a corresponding asp:Content tag in our content page. If you omit a placeholder region in your page the server will then just use the default content from the master page instead, like below.

This is especially nice if you decide to adfd a new Content Region to a template after the site has already been published. You do not have to go back and add that region to every page the uses your template. Instead you would only need to update the pages where you want to specify custom content in your new content placeholder.

This article really just scratches the surface with what can be done with master pages. However many sites do not need any more complexity then this. Nested master page will come in handy when you want to build a section of subpages, say recipes for example, that will all have a very similar look, but still inherit from the Main Master Page to inherit the site's header, footer, etc.