How-To: Blogging With Jekyll and MobileMe

If you are a MobileMe (s aapl) subscriber, you might be aware that you can use iWeb to create a simple web page that’s good for sharing pictures and stories with friends and family. What you might not know is that the same servers that host your iWeb site can host HTML generated by any app, including Sandvox, RapidWeaver, or a powerful blog generating tool named Jekyll.

Jekyll is a command-line Ruby app that takes a directory of HTML and Markdown files and directories and then generates a blog. The main problem with blogging with MobileMe is the lack of PHP and MySQL, which is required for most common blogging platforms like WordPress. Jekyll gets around this by generating the entire site in static HTML each time it runs, so there’s no reliance on an interpreted language.

Getting started blogging with Jekyll and MobileMe takes a bit of tweaking, but the end result is a simple and powerful blogging platform for people who want complete control over their site.

Step One

Install Jekyll. Since Jekyll is a Ruby gem, installing it is as easy as typing the following command in your Terminal window:

sudo gem install jekyll

Step Two

Next, choose a directory to keep your local blog files. I chose to put my directly in Sites, since I don’t use that directory for anything else.

Step Three

Set up a basic “skeleton” of files. Follow the directions detailed over at OStatic to build the skeleton site.

Step Four

At this point, you should be able to type

cd ~/Sites; jekyll --server

into the terminal, browse to http://localhost:4000 using Safari, and see your “hello world” site.

Step Five

This is where the Mac magic kicks in, and why the blend of Unix and Mac makes for the best computing platform. Open Automator and create a new Workflow. Choose “Ask for Text” for the first action, and “Run Shell Script” for the second. In the “Question” field of “Ask for Text” put Title, and check the box that says “Require an answer.” In the “Run Shell Script” action, change the “Pass input” drop down box to “as arguments” and paste in the shell script below:

[sourcecode language=”powershell”]
NAME=`echo $1 | sed s/ /-/g`
POSTNAME=`date "+%Y-%m-%d"-$NAME`
touch $POST_FQN
echo "—" >> $POST_FQN
echo "layout: post" >> $POST_FQN
echo "title: $1" >> $POST_FQN
echo "—" >> $POST_FQN
/usr/bin/mate $POST_FQN

In this case, the script will launch TextMate as my text editor, but you can substitute any text editor available from the command line here. Your workflow should look like this:

Go to File > Save As Plug-in and choose “Script Menu” under the drop down menu labeled “Plug-in for.” Name your new workflow something meaningful, like “New Blog Post,” and save it. You should now have a script menu icon in the menu bar, with your new workflow available.

Step Six

Create another Automator workflow, this time only running a shell script, and paste this script:

[sourcecode language=”powershell”]
cd /Users/$USERNAME/Sites
/usr/bin/jekyll > /dev/null
/usr/bin/jekyll –server > /dev/null 2>
open "http://localhost:4000"

This will run Jekyll and open your site for previewing in Safari. Save this as another plug-in, exactly as before, and name it something like “Preview Site.” Unfortunately, this script will also let Jekyll run in the background indefinitely, so you might want to create a third workflow with these two lines of shell script in it:

[sourcecode language=”powershell”]
PID=`ps -eaf | grep "jekyll –server" | grep -v grep | awk ‘{ print $2 }’`
kill $PID

That will shut down Jekyll.

Step Seven

The last step is syncing the exported site with MobileMe. Apple makes this very easy by mounting the iDisk under a “Volumes” directory, so you can create a fourth action containing a single script:

[sourcecode language=”powershell”]
cd /Users/$USERNAME/Sites/_site/
rsync -avz . /Volumes/$USERNAME/Web/Sites > /dev/null

Make sure you adjust the paths to match where you decided to put the site. I chose the Sites directory, but you might want it somewhere else. To be safe, you might want to run this in the terminal the first time, just to make sure that you have all of the settings correct.

Last Step

That’s it! If you already have your personal domain pointed at MobileMe, then you are golden. If not, you can browse to, replacing “username” with your MobileMe account.

Setting up Jekyll and MobileMe as your blogging platform does take a bit of work, but once it’s setup with the Automator scripts, its super easy to maintain. Jekyll takes care of all of the details, leaving you room to do what you really wanted to do in the first place…write.

Disclosure: Automattic, maker of, is backed by True Ventures, a venture capital firm that is an investor in the parent company of this blog, Giga Omni Media. Om Malik, founder of Giga Omni Media, is also a venture partner at True.