Installing Matrix 3.26 dependencies on Ubuntu 9.10

I know, I know, 10.04 is only days away.  But I feel bad I haven't updated the install instructions in so long.  I don't have a lot of time, but here are a few lines you can run on a clean install of Ubuntu Server 9.10 (I used F4 to install a minimal server from the bootup screen) to get all the dependencies in place.

Once the deps are in place, you can use the post-dependency instructions for the 8.10 install to get Matrix up and running.

I've tested this, it works with 3.26.3 (latest stable).  I've annotated command lines with a starting '#' so you don't get confused by word wrap on the blog.  You should be able to just copy and paste if you're logged in as root.  There's one line which starts with //, that's a comment on what to change in vi.

Here goes, enjoy ;)

# aptitude install antiword clamav curl elinks libapache2-mod-php5 memcached openssh-server php5 php5-cli php5-common php5-curl php5-dev php5-gd php5-ldap php5-memcache php-pear php5-pgsql php5-pspell php-getid3 poppler-utils postfix postgresql postgresql-server-dev-8.4 screen spidermonkey-bin tidy

# pear channel-update pear.php.net ; pear upgrade-all ; pear install --force DB MDB2 Mail Mail_Mime XML_HTMLSax XML_Parser Text_Diff Mail_Queue HTTP_Request HTTP_Client Net_URL Image_Graph Image_Color Image_Canvas Numbers_Roman Numbers_Words Services_JSON ; pear install pear/MDB2#pgsql

# vi /etc/default/memcached
// change no to yes

# service memcached start

# wget http://matrix.squiz.net/__data/assets/file/0007/58138/mysource_3-26-3.tar.gz

# cd /var/www ; tar xzf ~/mysource_3-26-3.tar.gz ; cd mysource_matrix

Let me know if you have any troubles, I check comments from time to time.

Matrixblogger

Matrix-ifying a design Pt 1 - getting your files in the right places

One of the things about using Matrix that trips some people up is "how do I get my design to work in Matrix?" I'm going to assume that you have a static html design, and you want to take that design and use it for your website.

For the purpose of this example, I'm going to use a design from www.opendesigns.org, called "Blue Freshness." (www.opendesigns.org/design/blue-freshness/ ) The design is by Blog Liber, and is licenced under the Creative Commons Licence.

Squiz provide a design manual as part of their excellent documentation, and it can be found here.

This is a great resource, and you should keep a copy on hand whenever you're doing any Matrix design work.

The first task in converting the design to work in Matrix is to modify any included file paths to javascripts, css, images, etc so that they reside in a directory below the main html (or css) file called "mysource_files".

At this point, I need to explain about when to use CSS assets, and when to simply upload CSS files as text files.

Matrix will parse a CSS asset, but it won't parse a text file asset that is being used as a CSS file (i.e., it's referenced in the design using mysource_files/cssfile.css). Why does this difference matter? There are a couple of things you should be aware of:

1. If the CSS file includes links to images etc (using mysource_files/image.jpg eg), or Matrix conditional logic, it should be a CSS asset. Otherwise, the file will simply be passed unchanged to the browser, as it will not be parsed.

2. If it doesn't, it's much more processor/memory/load friendly to use a text file asset which doesn't get parsed, as it can be served directly without processing. Imagine a css file that has to be parsed for every single page hit on the site. Reducing the load from this file can make a significant performance improvement.

There is a way to avoid much of the overhead involved in parsing the CSS asset, we'll look at that more further on in the series.

OK, back on track... To achieve what we need to do, I'm going to create two directories.

The first will be called html, and it will contain index.html and a directory called mysource_files. The mysource_files directory will hold any files referenced by index.html, except for style.css.

The second will be called css, and it will contain style.css and a directory called mysource_files. The mysource_files directory will hold any files referenced by style.css.

Then I will systematically edit all of the paths included in index.html and style.css. As I edit each path, I will move the file that is referred to into the mysource_files directory.

When I first extract the files, I end up with all files in one directory:

The reason I move files as I edit their paths is as a kind of doublecheck. I want to make sure I haven't missed any.

I create the html directory and move index.html into it, then I open it for editing. For this design, there are two changes needed in index.html. I make the changes, the lines now read:


<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />


and


<img src="mysource_files/examplephoto.jpg" alt="Example Photo" />



respectively. I move examplephoto.jpg into the html/mysource_files directory. There are still some files left, that's ok because we haven't edited style.css yet.

Note that I've changed the path to style.css to reflect the path from index.html. This will need to be changed when we get the design and css asset into matrix, but I do that so we can check that everything is in order before uploading.

I now move style.css into the css directory and open it for editing. Interestingly, the css file is expecting images to be found in an images/ directory. A quick check confirms that the design doesn't work out of the box when the design is unzipped. That's ok, we'll be fixing this anyhow.

There are four lines that need changing in style.css. The modified lines are here:

background: #efefef url(mysource_files/header.jpg) no-repeat;

background: #efefef url(mysource_files/content.jpg) repeat-y;

background: url(mysource_files/sidebar.jpg) no-repeat;

background: #efefef url(mysource_files/footer.jpg) no-repeat;

As before, as I modify each of these paths, I move the relevant file to the css/mysource_files directory. Once they're done, we have no more files left in the original directory. That's reassuring, all is well.

At this point, loading index.html in a browser shows that the design is working fine at this stage, and we now need to get the design and the css into Matrix.

Doing that is where things get interesting, and we'll talk about that in part 2.