Chris Tankersley

Migrating from Octopress to Sculpin

Posted on 2014-02-27

A long time ago, I decided to ditch Wordpress. For what I was doing with my blog, which was mostly just having it sit there and not do much, Wordpress was just to heavy. I mean, sure, I had caching and all that turned on, but I constantly had to make sure it was kept up to date. I had to let it eat CPU cycles on my server while it rebuilt the cache and served pages. It was easy to post articles, but other than that there wasn't a benefit.

I decided that since I didn't do much, my site shouldn't either. Jekyll was the new hot kid on the block and the idea of a static site intrigued. me. It was 1995ish but since I didn't have to build the site it sounded like a good idea. I ended up going with Octopress which was built using Jekyll and some extra plugins to make blogging easier. I even found a script to take my Wordpress export and conver it over. Life was good.

Not great, but good. One thing that bugged me was that since Octopress was Ruby I had to start maintaining a ruby install wherever I wanted to build my site from. In theory this should work from anywhere but I never got it to work on Windows. I'm no stranger to running things from the command line so I just always blogged on my server. There were times where I did not blog because of it though.

PHP, as always, caught up with the trends and now there are a few different static site generators. Part of moving had to be making it easy to move. Wordpress to Octopress was decently easy as I had a script that helped me. Moving from Octopress had to be just as easy. I had come across Sculpin a few times before and decided that it looked easy enough.

A quick exchange with a few people like Chris Hartjes and Beau Simensen let me know that it might not be that easy. My blog wasn't complicated as it was just my blog posts and a few different static pages, so I went ahead with the conversion. And it worked!

Converting the Posts

Both Sculpin and Octopress use Markdown as a markup language so this was actually fairly easy. I copied everything from source/_posts/ in Octopress to source/_posts in Sculpin, and ran the following script:

#!/bin/bash
# This script will need some small modifications if you run this on Linux, as
# the sed command on OSX is not the same as the GNU sed command

BASEPATH=`pwd`

echo "Changing file extensions..."
cd source/_posts
for old in *.markdown;
do
    mv $old `basename $old .markdown`.md;
done
cd $BASEPATH

echo "Switching code block syntax..."
cd source/_posts
for old in *.md;
do
    sed -i '' -e "s/\`\`\`/~~~/g" $old
done
cd $BASEPATH

echo "\n\nHere are some files that will need their syntax fixed:"
echo '------------------------------------------------------'
egrep -nHr "~~~ (\w+)" source/_posts

This renamed the files from *.markdown to *.md, which Sculpin recommended, and then I converted the triple backtick to a triple tilde for preformatted text. I had some files that had a heading as well, so it told me which files had preformatted text with headers. I could have probably figured out a regex to fix it automatically, but meh, I'm lazy and two minutes of text editing was much more favorable than hours figuring out a regex pattern.

Implementing Disqus Comments

I couldn't find a way to do this via the config, so I just added the following blocks of code:

// Inside source/_views/default.html
<script type="text/javascript">
var disqus_shortname = 'mydisqusshortname';
var disqus_script = 'count.js';

(function () {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
// Inside source/_views/post.html
<script type="text/javascript">
var disqus_shortname = 'mydisqusshortname';
var disqus_script = 'embed.js';

(function () {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>

To get the comment count, Disqus looks for a URL that ends in #disqus_thread, so I just made a URL that points to the block post with that appended.

On the post page, I added the following to get the comment box to appear:

<section>
    <h1>Comments</h1>
    <div id="disqus_thread" aria-live="polite">
        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
</section>

Disqus picked up the URLs once I was on the live site and all the comments flowed back into place.

Converting the Static Pages

This one was fairly easy since it was mostly just copy/pasting. In Octopress, static pages were designated by a folder inside source/, with an index.markdown file inside. It turned this into a pretty URL path. In Sculpin, this is done by having a file named what you want the path to be (for example, about.md for the About page). I copied them over with new names and Sculpin built the static pages.

I then added the paths to the default.html layout so that it would appear in the navigation. Boom, done.

I did have some of my slides in a talks/ folder. I couldn't get Sculpin to directly see this, so I just manually moved it into place on the production server. Again, there might be a better way for this but it took all of 30 seconds to SFTP up to the box.

Layout

I haven't done anything with this yet, but I will be making a custom theme for Sculpin. My site is ugly but then again, I haven't tried to fix it at all and bare Bootstrap is ugly by itself. I'll fix that up over the next few weeks. Everything is in Twig so I'm familiar with how the template layer works.

Overall, Very Impressed

I tweeted Beau to let him know that everything went pretty smoothly, and I'll be talking to him at LonestarPHP as there are a few things I miss from Octopress. Since Sculpin is an open source project I plan on trying to make blogging with it a bit easier, but right now it's not really any worse than Octopress!


Comments