Background

1. Upgraded to Ubuntu 14.04 LTS¹
2. Installed Ruby 2.1.2.²
3. Tried to generate the blog from the same Markdown and HTML source, but failed.³

During the merge of Octopress source code last week, there’re some conflicts between my old working source code and the new one fetched from Octopress’s Github repository. When rake complained, I changed my original code bit by bit—this turned out to be a failed and inefficient approach. Not familiar with Ruby, I gave up the whole idea of updating Octopress’s source code and generating the contents on top of a new version of Ruby. In order to keep posting things to this blog, I kept using old things on this new Ubuntu release.

Solution

Glimpsing the commit messages and their corresponding dates, I decided to try the Octopress update again.

Yesterday’s work

I simply fetched and merged the code from Octopress’s remote Git repository.⁴ I remembered minimizing the changes while resolving the expected conflicts. Here’s a brief outline of what I had done using Ruby 1.9.3.

1. git pull octopress master
2. Resolved conflicts and committed the changes without pushing it, so that I can easily undo the commit without leaving a mark in the commit history.
3. Ran rake update_source to apply the changes in .themes/classic/soruce/* to source/*.

4. Ran rake generate, failed, and learnt that there’re some syntax errors.

   • At the beginning of some files, layout: nil had not yet been changed to layout: null.
   • Clapper’s image popup plugin didn’t work with the updated Octopress code. In order to use the updated Octopress source code, I temporarily removed the curly brackets that surrounded each {% imgpopup /path/to/image nn% title %} tag, using Vim’s :argdo %s/pat/rep/ge | up command.
5. Corrected the above mistakes, and amended the last commit.
6. Ran rake generate again, and succeeded.
7. Found fancyBox to replace the image popup plugin.

8. Followed Erv Walter’s instructions to use fancyBox in my posts.⁵

   1. Downloaded the whole ZIP archive from fancyBox’s official website.
   2. Extracted the archive to source/ and renamed the folder as source/fancybox/, and deleted source/fancybox/demo/.
   3. Just added the references to the necessary CSS and JS files to source/_includes/custom/head.html for simplicity.
   4. Used :vimgrep /pat/rep/ source/_posts/* to obtain a list of files which contained “imgpopup”. The list was in a quickfix window, which could be invoked by :cw. :cn and :cp point to the next and previous match respectively.
   5. In one of my posts, I changed the line containing “imgpopup” to “img fancybox”.
   6. Misunderstood his words⁶, I added his jQuery function at the end of my post. However, as I clicked the image, nothing popped up.
   7. Used a simpler jQuery function found on fancyBox’s website for testing, and put it in source/_includes/custom/head.html. This time, a box popped up upon a click on the images. However, after I closed the popped up window, the clicked image disappeared.
   8. Read and understood these two jQuery functions, incorporated them into source/_includes/custom/head.html, and succeeded.
   9. Changed all instances of “imgpopup” to “img fancybox”.
9. Cleared up the Ruby scripts in plugins/.⁷
10. Used fancyBox for embedded Youtube videos.
11. Added back the default white round border for pictures in Octopress posts except for tiny icons.⁸

Today’s work

Lessons learnt

Do things bit by bit at a time, so that one can adapt to the changes.

---