May 2009 Archives

Install Movable Type on a Mac

By Beau Smith on May 20, 2009 6:46 PM | 14 Comments

This guide will take you through the steps to install the necessary software to turn your Mac into a server with the required software to run Movable Type and then walk you though installing Movable Type.

You will need the following:

  • A Mac! - this installation was tested on a Mac Mini, an iMac, and a MacBook Pro both running Mac OS 10.5.5
  • Administrator user account on the Mac
  • Xcode Tools instaler on the Mac OS X Install DVD or available as a download from Apple.com
  • internet connection …well I guess you have one if you’re reading this!
  • Terminal.app - find this in your Utilities folder (from the Finder: Go > Utilities). You should be comfortable using the command line when proceeding with the following steps.

We’ll first install the following server software:

  • Xcode Tools
  • MySQL
  • PHP5
  • Perl modules:
    • DBD::mysql
    • Crypt::DSA
    • IPC::Run
    • Crypt::SSLeay
    • IO::Uncompress::Gunzip
    • IO::Compress::Gzip
    • Mail::Sendmail
  • Image Magick and required image libraries:
    • LibJPEG
    • Libpng
    • Libiff

Then we’ll perform the steps specific to setting up a site and installing Movable Type:

  • create a file structure for a site
  • create a default apache config
  • download Movable Type
  • create a MySQL database
  • configure Movable Type

Install Server Software

Installing these 8 software libraries takes about 45 minutes. As I completed the step, I noted the running time.

  1. Install Xcode Tools

    Double-click “XcodeTools” from the DVD that came with your mac.

    Find it on the DVD in the following folder chain: Mac OS X Install DVD/ Optional Installs/ Xcode Tools/ XcodeTools

    (running time: 8 min)

  2. Install MySQL

    1. Go here: http://dev.mysql.com/downloads/mysql/5.1.html#macosx-dmg

    2. Download Mac OS X 10.5 (x86)

      Note: After choosing a mirror, you are prompted to register. No need, click the link under the registration and sign in boxes: “No thanks, just take me to the downloads!”

    3. Install (double-click) all the following items in the bundle:

      • mysql-5.1.34-osx10.5-x86.pkg (or newer version)
      • MySQLStartupItem.pkg
      • MySQL.prefPane

    4. After installing MySQL.prefPane, the preference pane will be displayed. Click the Start MySQL Server button and be sure the checkbox for Automatically Start MySQL Server on Startup is checked.

    (running time: 12 min)

  3. Install PHP

    PHP 5.x is pre-installed in Mac OS 10.5.x. Edit the apache config:

    $ sudo vi /private/etc/apache2/httpd.conf

    Remove the “#” from the beginning of this line to enable PHP:

    #LoadModule php5_module        libexec/apache2/libphp5.so

    (running time: 14 min)

  4. Install Perl modules

    Install the below modules via Terminal app. Each may take a few minutes to install. If installation seems to stall but you get no errors, then assume all is going well. If necessary, go make a sandwich and come back a little while later.

    While installing, if prompted:

    • enter the admin user password when prompted: type the password and hit “return”.
    • manual configuration: type “n” and hit “return” to use default configuration.
    • optional modules: type “n” and hit “return” to not install these.
    • mandatory modules: type “y” and hit “return” to install these.
    • select the default option when otherwise prompted: hit “return”.

    Install be below Perl modules one-by-one (running time listed below):

    $ sudo cpan DBD::mysql
$ sudo cpan IPC::Run
$ sudo cpan Crypt::SSLeay
$ sudo cpan IO::Uncompress::Gunzip
$ sudo cpan IO::Compress::Gzip
$ sudo cpan Mail::Sendmail
$ sudo cpan Crypt::DSA

    sudo cpan DBD::mysql (running time: 15 min)
    sudo cpan IPC::Run (running time: 16 min)
    sudo cpan Crypt::SSLeay (running time: 17 min)
    sudo cpan IO::Uncompress::Gunzip (running time: 18 min)
    sudo cpan IO::Compress::Gzip (running time: 19 min)
    sudo cpan Mail::Sendmail (running time: 20 min)
    sudo cpan Crypt::DSA (running time: 22 min)

    We’ll check to ensure all these modules are installed correctly using the mt-check.cgi script after installing Movable Type.

  5. Install ImageMagick

    We’ll install three image libraries and then ImageMagic itself.

    1. Create a temp directory

      This directory will be used for the downloaded software used in the following steps. Create it then change to that directory:

      $ mkdir ~/Desktop/mt_install;
$ cd ~/Desktop/mt_install;

    2. Install image libraries

      There are three prerequisite libraries for the version of ImageMagick we’ll be installing.

      The below steps assume that you’re downloading files to the “Downloads” in the user’s home directory; modify the installation commands as necessary if your browser downloads the files to other locations.

      • Install LibJPEG

        1. Download LibJPEG. Grab the most recent tar.gz file from www.ijg.org

        2. Issue the following commands (replacing the name of the tar.gz below with file name below “jpegsrc.v6b.tar.gz”):

          $ cd ~/Desktop/mt_install;
$ mv ~/Downloads/jpegsrc.v6b.tar.gz .;
$ tar xfv jpegsrc.v6b.tar.gz;
$ cd jpeg-6b;
$ ln -s `which glibtool` ./libtool
$ MACOSX_DEPLOYMENT_TARGET=10.5;
$ export MACOSX_DEPLOYMENT_TARGET;
$ ./configure --enable-shared;
$ make;
$ sudo mkdir /usr/local/include /usr/local/lib /usr/local/bin /usr/local/man /usr/local/man/man1;
$ sudo make install;

          (running time: 25 min)

      • Install libpng

        1. Go the the libpng site: http://www.libpng.org/pub/png/libpng.html.
        2. Scroll to the “Source code” section and click the “.tar.gz” link under “with config script” heading.

        3. Issue the following commands:

          $ cd ~/Desktop/mt_install;
$ mv ~/Downloads/libpng-1.2.35.tar.gz .;
$ tar xfv libpng-1.2.35.tar.gz
$ cd libpng-1.2.35;
$ ./configure --enable-shared;
$ make;
$ sudo make install;

        (running time: 29 min)

      • Install libtiff

        1. Download tiff-3.8.2.tar.gz from http://dl.maptools.org/dl/libtiff/ (which is the download mirror site of http://www.libtiff.org/)

        2. Issue the following commands:

          $ cd ~/Desktop/mt_install;
$ mv ~/Downloads/tiff-3.8.2.tar.gz .;
$ tar xfv tiff-3.8.2.tar.gz;
$ cd tiff-3.8.2;
$ ./configure --enable-shared;
$ make;
$ sudo make install;

          (running time: 32 min)

    3. install ImageMagick

      1. Download ImageMagic via FTP

        $ cd ~/Desktop/mt_install;
$ ftp ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick.tar.gz
$ tar xfvz ImageMagick.tar.gz;

      2. List the contents of the current directory to find the version of ImageMagick which was downloaded:

        $ ls

      3. Change to the ImageMagick directory. If you downloaded ImageMagick-6.5.2-2, then continue with the steps below, otherwise the next line to contain the correct version number. (Note: the “make” command takes about 5-8 min to complete)

        $ cd ImageMagick-6.5.2-2;
$ LDFLAGS="-L/usr/local/lib" ./configure --with-jpeg=/usr/local/ --with-tiff=/usr/local --with-png=/usr/local;
$ make;
$ sudo make install;

      (running time: 43 min)

Movable Type Specific Install

  1. Create the file structure for local website

    This command will set up the basic structure of the _live directory in the ~/Sites directory as described below:

    $ mkdir ~/Sites/_live ~/Sites/_live/cgi ~/Sites/_live/docs ~/Sites/_live/html;

    The below file structure is how I setup the sites I develop locally on my Mac. I’m never actively developing one site at a time so I have a single webroot which I move the active site into; site1.com is the currently active site. (I have a script that I use to switch sites in and out of the web root which I may post about at a later date.)

    ~/Sites/
    _live/
        cgi/
            mt              <-- symlink to current MT directory (created in a later step)
            MT-4.25-en/     <-- MT app directory, aka $MT_HOME (created in a later step)
        docs/
            httpd.conf      <-- custom apache config (created in a later step)
        html/               <-- this will be the web-root
            mt-static/      <-- symlink to dir in $MT_HOME (created in a later step)
            index.html       
    site1.com/              <-- random site (currently disabled)
        docs/
            httpd.conf
        html/
            index.html
    site1.com/              <-- site currently active in the _live directory
    site2.com/              <-- random site (currently disabled)
        docs/
            httpd.conf
        html/
            index.html

  2. Configure the Apache web server

    1. Create the user apache configuration file (~/etc/httpd/httpd.conf) and directories:

      $ mkdir ~/etc/ ~/etc/httpd/;
$ vi ~/etc/httpd/httpd.conf;

    2. Use the following code as the contents of the file, replacing “beau” and “sweetness” (name of my computer) with your own variables. (Set your computer’s name on the System Preferences -> Sharing Pane)

      <VirtualHost *:80>
    ServerName sweetness.local
    ServerAlias *.sweetness.local
    ServerAlias localhost
    DocumentRoot /Users/beau/Sites/_live/html
    DirectoryIndex index.php index.html
    # Include custom apache configuration from live site directory.
    include /Users/beau/Sites/_live/docs/*httpd.conf
    <Directory /Users/beau/Sites/_live>
        Order allow,deny
        Allow from all
        AllowOverride All
        Options Indexes FollowSymLinks MultiViews
        AddHandler application/x-httpd-php .php .html
    </Directory>
</VirtualHost>

      Not all of this config file is crucial, but it’s all useful!

    3. Alias the user apache config file into the directory which the main apache config includes other config files.

      In the Terminal app create a symlink using the following command (replace “beau” with your username)

      $ sudo ln -s ~/etc/httpd/httpd.conf /private/etc/apache2/other/beau.conf

      The main apache config file (located here: /private/etc/apache2/httpd.conf) contains the line Include /private/etc/apache2/other/*.conf which will include all file ending in “.conf” which are placed in the /private/etc/apache2/other/ directory.

    4. Create site apache config file

      Create the file:

      $ vi ~/Sites/_live/docs/httpd.conf

      Add the following content:

      ScriptAlias /cgi/ /Users/beau/Sites/_live/cgi/
Alias /mt-static/ /Users/beau/Sites/_live/cgi/mt/mt-static/
AllowEncodedSlashes On  # required for MTConnect plugin
<Directory "/Users/beau/Sites/_live/cgi">
    AllowOverride All
    Options None
    Order allow,deny
    Allow from all
    Options FollowSymLinks
</Directory>
<Directory "/Users/beau/Sites/_live/html">
    AllowOverride All
    Options +Indexes
    Order allow,deny
    Allow from all
    Options FollowSymLinks
</Directory>
SetEnv MAGICK_HOME /usr/local/ImageMagick-6.4.0
SetEnv DYLD_LIBRARY_PATH /usr/local/ImageMagick-6.4.0/lib

    5. Restart Apache

      $ sudo apachectl graceful

      This is the same as unchecking and then checking the “Web Sharing” checkbox in the System Preferences -> Sharing preference pane

  3. Download Movable Type

    Filenames may be different if using different version of Movable Type.

    1. Download

      http://www.movabletype.com/downloads/download.php

    2. Uncompress the downloaded file

      $ unzip ~/Downloads/MT-4.25-en.zip

    3. Move MT to the live directory’s cgi folder

      $ mv ~/Downloads/MT-4.25-en ~/Sites/_live/cgi/

    4. Create symlink aliasing mt to the current version of MT.

      $ ln -s ~/Sites/_live/cgi/MT-4.25-en ~/Sites/_live/cgi/mt

      Note: This step will ease future upgrades. When upgrading in the future, use a modified version of this code to remove the symlink then replace it with a symlink to the new version:

      $ rm ~/Sites/_live/cgi/mt; ln -s ~/Sites/_live/cgi/NEW_MT_VERSION ~/Sites/_live/cgi/mt

  4. Create MySQL database

    1. Login to MySQL via the Terminal.app

      $ sudo /usr/local/mysql/bin/mysql

      Optional: Instead of entering the full path to MySQL /usr/local/mysql/bin/mysql, you can add the mysql location to your PATH. After doing the following you can simply enter sudo mysql. After updating .bash_profile you will need to open a new terminal window to reload bash profile settings. Minimally, .bash_profile should contain the following:

      PATH=$PATH:/usr/local/mysql/bin/
export PATH

    2. Create database for Movable Type

      mysql> create database movabletype;

      Note: Instead of using movabletype you may want to create one database per version of Movable Type or per project/site.

    3. Set permissions on the database.

      mysql> grant all on movabletype.* to ''@'localhost' identified by '';

      Note: this command uses no username or password. This can make installation simper on a local machine, however it is recommended that a password be used on any shared machine.

  5. Configure Movable Type

    Create MT config file ~/Sites/_live/cgi/mt/mt-config.cgi and include the necessary variables. At a minimum this file should include:

    CGIPath /cgi/mt/
StaticWebPath /mt-static


##### MYSQL #####
ObjectDriver DBI::mysql
Database movabletype
# DBUser DATABASE_USERNAME     # unnecessary unless a username was set in the previous step
# DBPassword DATABASE_PASSWORD # unnecessary unless a password was set in the previous step
DBHost localhost

  6. Access Movable Type “MT Check” script

    http://localhost/cgi/mt/mt-check.cgi (or http://sweetness.local/cgi/mt/mt-check.cgi)

    Note: Everything on this check list should be green except for the non-MySQL database drivers and GD (Image Magic is better integrated with Movable Type than GD is.)

    If mt-check.cgi shows that various modules are not installed, attempt to re-install using the steps above.

  7. Install Movable Type

    Access this URL and follow the steps to create your first blog.

    http://localhost/cgi/mt/mt.cgi (or http://sweetness.local/cgi/mt/mt.cgi)

  8. Blog!

Done!

Publish only entries with dates the future or past

By Beau Smith on May 19, 2009 6:41 PM | No Comments

This code should display entries with publish date of today or in the future… didn’t test it though, just posting it here for future reference.

<$mt:Date format="%Y%m%d" setvar="today"$>
<mt:Entries>
   <$mt:EntryDate format="%Y%m%d" setvar="entry_date"$>
   <mt:If name="today" lte="$entry_date" >
       <p><a href="<$mt:EntryLink$>"><$mt:EntryTitle$></a><br/><$mt:EntryDate$></p>
   </mt:If>
</mt:Entries>

Note: because MT publishes static files, “today” is the date that the template is published. Bob the Rebuilder or other similar plugins can trigger rebuilds to ensure this content is fresh daily. Otherwise it may be wise to use a scripting language (php, js, etc) to hide non-desired content.

Change “lte” to “gte” and then the script will display entries with dates before today.

Styling HTML with CSS when JavaScript is not available

By Beau Smith on May 11, 2009 12:21 PM | No Comments

It’s a pretty good chance that most browsers today have JavaScript enabled. However in the odd case that someone views a site that relies heavily on JavaScript it’s good to at least provide a page that doesn’t look broken.

Using jQuery for a lot of projects I’ve been using a very simple solution. Pages are published with the class no-js on the <body> tag. Then when the jQuery loads, the first function removes this class.

To style for situations when jQuery is not available, add no-js as the first selector.

Here’s an example:

<html>
    <head>
        <style type="text/css">
            .foo {
                /* default styles */
                background-color: blue;
            }
            .no-js .foo {
                /* style when js not available */
                background-color: red;
            }
        </style>
    </head>
    <body class="no-js">
        <div class="foo">
            <p>I'm foo!</p>
            <p>If my background is <strong>blue</strong>, then javascript is active... 
            if <strong>red</strong>, then javascript is not active.</p>
        </div>
        <script type="text/javascript">
            $(function() {
                $('body').removeClass('no-js');
            });
        </script>
    </body>
</html>

Ordering Categories (a hack)

By Beau Smith on May 7, 2009 3:23 PM | 2 Comments

One feature I’d like to add is the ability to order categories via some drag-n-drop method in Movable Type and then have the ability to specify the sort order manually via a sort_by template tag modifier like this:

<mt:Categories sort_by="manual">
    <!-- category code here -->
</mt:Categories>

Or just make this the default behavior!

Until then, here’s a hack to sort by a user-order specified.

  1. Go to the Edit Categories screen.
  2. Using the “open link in new tab” option (right-click or command-click), click each category to open them in new tabs in the order that you want them in.
  3. Just before the text of the label, add an html comment and place a number in the comment. Make each html comment identical to ensure sorting works properly. Because the number is in an HTML comment, it won’t be displayed on your site, but the sorting will be correct!

hack-category-order.jpg

« February 2009 | Main Index | Archives | June 2009 »