4 Comments

Summary:

Did you know that the same servers that host your iWeb site can host HTML generated by any app? We’ll take a look at using Jekyll with MobileMe to generate a blog that can be hosted on your MobileMe account.

cloud_thumb

If you are a MobileMe 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:

NAME=`echo $1 | sed s/ /-/g`
USERNAME=`whoami`
POSTNAME=`date "+%Y-%m-%d"-$NAME`
POST_FQN=/Users/$USERNAME/Sites/_posts/$POSTNAME.markdown
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:

USERNAME=`whoami`
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:

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:

USERNAME=`whoami`
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 http://web.me.com/username, 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 WordPress.com, 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.

You’re subscribed! If you like, you can update your settings

You're subscribed! If you like, you can update your settings

  1. Based on my experience with Mobile Me, the title of this article should be Jekyll and Hyde

  2. More of a question/plea for help, and one which betrays my ignorance of all things webhosting and html.

    I’ve followed the basic steps in your article (without the scripting and Automator parts – wanted to get the basics down first). I built the “hello world” site described in the ostatic piece, and am confident the files and structure are correct. All works perfectly when previewing on localhost.

    However, once I’ve copied the contents of _site to Web/Sites on my iDisk, the URLs of the individual posts omit my username. I don’t have a personal domain and so the index.html homepage is accessed via web.me.com/myusername. This works fine, but following the link to particular post yields an error as the url is web.me.com/08-13-2010/hello.html rather than web.me.com/myusername/08-13-2010.html

    Could you advise?

    1. Hi Stephen! Sorry it took me so long to respond, I was away from my Mac for the weekend. Anyway, the problem you are seeing is not you, it’s me :) One additional step is needed to host on MobileMe without using a personalized domain name:

      Check through your template files and change anything with

      <a href="...

      in it to

      <a href="/YOURMOBILEMENAME...

      and it should work like a charm!

      If you’d like, you can take a look at mine: http://web.me.com/jonbuys

  3. William Adam McDuff Wednesday, November 24, 2010

    When I try step one, I get:

    /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby extconf.rb
    mkmf.rb can’t find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/ruby.h

    I don’t dig into the terminal much. Any ideas what I should be doing?

Comments have been disabled for this post