Adventures in Movable Type

Add an edit links to your Movable Type entries and pages.

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: http://www.ijg.org/files/jpegsrc.v6b.tar.gz

        2. Issue the following commands:

           $ 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!

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.

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>

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!

Here’s a way to set some variables for your whole blog.

Create a new template module called “Blog Config” containing some code which you want set for all blog pages published by MT; for example the page layout variable:

<$mt:Var name="page_layout" value="layout-wtt"$>

Then include it at the top of every index and archive template using the following code:

<$mt:Include module="Blog Config"$>

You can now update the page_layout in one template vs having to update it in all index and archive templates.

Was working on a project for a major television network who needed to place the output of the <mt:Entries> loop into two columns. Because they wanted to have the most recent entries at the top of the columns I suggested the following.

Start by appending each entry into either the left or right column based upon the odd and even template loop meta variables:

<mt:Entries>
    <mt:If name="__odd__">
        <mt:SetVarBlock name="odd_column" append="1">
            <$mt:Include module="Entry Summary"$>
        </mt:SetVarBlock>
    </mt:If>
    <mt:If name="__even__">
        <mt:SetVarBlock name="even_column" append="1">
            <$mt:Include module="Entry Summary"$>
        </mt:SetVarBlock>
    </mt:If>
</mt:Entries>

Then output the two variables into your columns:

<div id="odd-column">
    <$mt:Var name="odd_column"$>
</div>
<div id="even-column">
    <$mt:Var name="even_column"$>
</div>

I love simple elegant solutions.

Other Object Loops in Two Columns

This solution also works for other loops such as categories, comments, pages, assets, trackbacks, tags, users.

Here’s an example to list categories in two columns (plus the last three entries for each category).

Use SetVarTemplate to define mtml structure which is rendered where the template is used later:

<mt:SetVarTemplate name="category_summary">
    <div>
        <h3><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></h3>
        <ul>
        <mt:Entries lastn="3">
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        </mt:Entries>
        </ul>
    </div>
</mt:SetVarTemplate>

Separate the category output into two variables;

<mt:Categories>
    <mt:If name="__odd__">
        <mt:SetVarBlock name="odd_column" append="1">
            <$mt:var name="category_summary"$>
        </mt:SetVarBlock>
    </mt:If>
    <mt:If name="__even__">
        <mt:SetVarBlock name="even_column" append="1">
            <$mt:var name="category_summary"$>
        </mt:SetVarBlock>
    </mt:If>
</mt:Categories>

Output the variables:

<div id="odd-column">
    <$mt:Var name="odd_column"$>
</div>
<div id="even-column">
    <$mt:Var name="even_column"$>
</div>

If you have other examples of this, please blog them and leave a comment or just leave a comment with an example.

I was installing Action Streams on Chris Alden’s r21.org and remembered that Mark Pascal showed me tip about installing Action Streams.

Instead of distributing all the files in the extlib directory in the sub-directories of the extlib directory in your MT install—as described in steps 3 of the Action Steams readme—Mark showed me that the Action Streams extlib directory can be placed in the Action Streams plugin directory.

When you download the Action Streams plugin, here are the files in the directory. Notice the location of the extlib directory:

When you install Action Streams in your MT install, move the extlib directory under the Action Streams plugin directory:

Because Movable Type is not always installed on servers where customers have access to the servers apache config or an .htaccess file, MT’s tag and string search urls look like:

Tag Search and String Search (respectively)

http://chezbeau.com/cgi-bin/mt/mt-search.fcgi?blog_id=1&tag=tomato&limit=20
http://chezbeau.com/cgi-bin/mt/mt-search.fcgi?search=tomato&IncludeBlogs=1&limit=20

These can easily be changed to more “clean” urls

http://chezbeau.com/tag/tomato
http://chezbeau.com/search/tomato

To convert your Movable Type powered site to use clean urls, follow these steps:

1. Edit your .htaccess file and add the following lines

   RewriteEngine on
   RewriteRule ^tag/(.*)$ /cgi-bin/mt/mt-search.fcgi?blog_id=1&tag=$1&limit=20
   RewriteRule ^search/(.*)$ /cgi-bin/mt/mt-search.fcgi?search=$1&IncludeBlogs=1&limit=20
   

   The first line RewriteEngine on turns on the Rewriting Engine. The second and third lines use RewriteRule to map the desired urls to the actual urls.

2. Update tag links in tag clouds and on entry details by replacing <$mt:TagSearchLink encode_js="1"$> with:

   <$mt:BlogURL$>tag/<$mt:TagName normalize="1"$>
   

3. Update search form.

   This requires a few more invasive changes:

   1. add class search-form to the <form> element

   2. Include a link to jquery in your header. Use a local file or remotely hosted file like this one on Google:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
          $('.search-form').submit(function() {
              window.location.href = "/search/" + $('.search-form input:text').val();
              return false;
          });
      });
      </script>
      

Notes:

• Inspiration for this post came from David Roessli’s Blog
• Notes from Jay Allen on <$mt:TagSearchLink$> tag were also helpful.

Brad created a small plugin on the fly as a temporary fix to solve an upgrade issue which I’ve documented here for your pleasure… =)

This plugin will disable/stop/cancel all upgrades to a Movable Type installation.

Because some plugins require upgrade scripts, the DoNotUpgrade plugin must be removed/disabled/etc in order to perform upgrades to MT.

1. Create a file:

   MT_DIR/plugins/DoNotUpgrade/config.yaml
   

2. Add the following code to the file:

   callbacks:
       init_request: sub { MT->app->{upgrade_required} = 0 }
   

This plugin should work in 4.x versions of Movable Type.