Power of Eloquence

Migrating Octopress to Hexo

| Comments

Generated AI image by Microsoft Bing Image Creator

We’re edging towards halfway of 2022.. And boy. Look how time has gotten passed by.

I must admit I haven’t had the chance to sit down and write up another good tech blog post. A lot is happening in motion since the start of the year 2022 from my recent engagement to my fiancee of 3 and half years; busy with my day job as a contractor for a bank; finally getting my passport renewal done in Canberra (after almost 2 years of nationwide lockdown) as part of my travel plans to Malaysia so I can send my father’s ashes for his final resting place; along with talking plans having my fiancee and me moving together later in the year and preparing my next career technical certifications to take on, etc…

The list could go on.

Nevertheless, still, I’m glad to take the time to write about what I have accomplished recently.

That is…

I’ve decided to migrate my Octopress site to Hexo! 📦🚚

Presently, it may not look like much to you, but If you haven’t noticed any difference between the old and my new blog platform, is that I have updated my favicon on the page in the top left-hand corner of the browser. The site is using Hexo favicon. In my old one, previously, it was Octopress (obviously).

Secondly, all of my code snippet’s syntax highlighting show here has been modified a bit. They just do not show any line numbers of code anymorem whereas Octopress comes with them, by default.

Lastly, my footer note section has been updated with a new description, from Andy Wong - Generated using Octo theme from Octopress to Andy Wong - Generated using Octo theme(modified) for Hexo.

These are the key noticeable differences.

Why am I making the switch?

  1. No longer supported. - I first got my Octopress version 2 installed back in late 2014 and it’s no longer being updated. Later, Octopress 3 was introduced in 2015 but then only lasted up to 2016 thus it was short-lived. Knowing that after writing my blog post content for 7 years, I am no longer getting any more updates and support from the thriving community it once was.
  2. Performance Issues. - When using Octopress 2, it’s taking a lot more than 25 seconds or so to generate all the website pages and content (which is about 35 articles at the time of writing). Even worse, each time I updated a single blog post with a minor typo or additional content lines, it takes the same amount of time when I first execute rake preview to regenerate. With Hexo, I get everything done under 5.2 seconds. That’s incredbily fast!
  3. For the reason #1 and reason #2, blogging is no longer as fun as it used to be. When the community has long stopped caring/supporting because it couldn’t gather enough interest from the online community, I started to cast my doubt on their long-term commitment to the project and pondered the risk of being left behind and not able to use better static site generation tooling outside in the market. Thus, I need affirmative action on how to mitigate this.

Reasons for migrating to Hexo

The new CMS tool, Hexo, written by the Chinese development community, became the good choice for me after careful evaluations of open-source static generation tools out there such as Hugo, Gatsby, Next.js etc. The deciding factor simply boils down to this:

  1. Seamless Content migration - Hexo published a support page on how to migrate from a common platform such as Octopress to the Hexo platform. It’s a very straightforward process as both Hexo and Octopress share the same blogging workflow methodology, thus it is a major time-saver for me with minimal hassles when I’m pressed for time.
  2. Syntax Highlighting - retains all the same features that Octopress has, but with a touch of plugin config changes and everything becomes straight forward.
  3. Disqus Support - for the same reason as #1
  4. Familiarity of blog post generation tool chain. Thus the learning curve is really low thus I never find it painfully difficult to do this myself.
  5. Theme Support - there’s a number of good themes I could use but I decide to work on the base octo theme provided, modified for my own taste and liking.
  6. NodeJS Language Familiarity - I personally and professionally work with NodeJS/JS for years now thus I’m very accustomed to the ecosystem tooling.
  7. Community support - there’s about 36,000+ Github stars on it so I’m guessing its much better thriving community to lean onto vs Octopress counterpart thus they have plenty of support to keep going inspite of other heavyweights competition from Gatsby or Next.js.

How did I accomplish it?

To my surprise, the whole thing did not take very long. At most, it took only 3-4 days to make this all happen.

I have to consider the following list of steps to work it out.

  1. Created a new Hexo git repo locally.
  2. Published my first blog post or page locally (verify that it works) - hexo generate && hexo server.
  3. Configured deployment Heroku plugin for Hexo.
  4. Started looking into migrating Octopress to Hexo (as mentioned earlier).
  5. Installed and modified pre-existing theme I used for my old blog onto the new one.
  6. Published all the Octopress blogging locally, verify all the blog posts content are there.
  7. Once satisfied, test deploying the published content to the Heroku platform.

And voila! 👏

Once I was happy my Heroku landing site is coming all together, I can start take my old Octopress site offline for maintenance on 27/04/2022 for few hours, and updated the DNS for both my Namecheap DNS provider and Heroku Customer Domains.

You’ve landed on my blog post to witness all that new shiny armor of my blog post pages - for all its good glory.

If you’re curious how I manage to pull all of this off, I could explain in the following.

The critical changes I had to do are its basic octo theme I found via Hexo Theme Plugin search.

As my former Octo theme, codenamed BoldAndBlue, does not come available via Hexo Theme Plugin compared to the Octopress counterpart, I decided to take necessary ‘’hacking” steps to re-skin the theme that I want.

Here’s the following list of such changes

  1. Sidebar EJS for Twitter sidebar-twitter.ejs does not exist so I had to build from scratch and port the original functionality from the old site.

  2. Default CSS Theme was ugly to be honest on the surface, so I had to port the entire raw-compiled SASS-to-CSS files from the old site. My Hexo theme does not come with SASS support by default. I don’t really believe there’s any value to maintain SASS files as I rarely need to tailor my web site pages for the past 7 years. So I’d leave that as it is.

  3. Google Fonts Typography was ugly thus Google Web Fonts Nato and Open Sans Serif were brought back here.

  4. Sidebar EJS for Github options were modified sidebar-github.ejs to cater extra Github config options, for eg

    const options = {
   user: '<%=theme.sidebars.github.profile%>',
   count: '<%=theme.sidebars.github.repo_count%>',
   skip_forks: '<%=theme.sidebars.github.skip_forks%>'
};

    which the current Hexo doesn’t come with such configurations.

  5. Individual post date time display information was missing ie new Date(page.date).toLocaleString() along with formatting options.

  6. Config.yaml settings; the following properties had to be altered:

    • site
    • url
    • writing’s new_post_name
    • theme
    • deploy

  7. Theme’s config.yaml settings; the following properties had to be altered.

    • site
    • menu
    • social
    • sidebars
    • disqus
    • google analytics id
    • atom - npm install hexo-generator-feed
    • stylesheets - installed HightlightJS’s Solarized Dark CSS Theme

  8. Tags/categories were missing/ and archives post headings to do not have properly urls.

  9. Favicon changes

  10. Disqus comments hyperlink next to post’s actual published time.

    // - post EJS template
<time datetime="<%=page.date.toJSON()%>" data-updated="true"> ...</time>
// - disqus comments hyperlink
<% if (theme.disqus.enabled) { %>
   | <a href="#disqus_thread"
   data-disqus-identifier="<%=theme.site.url%>">Comments</a>
<% } %>

  11. Home page missing EJS tags, such as page.ejs, etc.

Concluding thoughts

Overall, I’m happy with the experience it comes with. After performing the steps, I can start to concentrate better on writing content without having to deal with the inefficiencies that Octopress has suffered over the years since the community last supported in 2015, thanks to the influx of other competing static site tool generators to choose from. I can only hope the same for Hexo as they still do recent releases in the past two years at the time this blog post is written. So, touch wood, Hexo will be around for X-number of years to come.

Octopress was being good to me over the years and I remembered Ruby static site generators were incredibly popular during 2014/2015 as web frameworks were incredibly high on demand before other popular programming languages like PHP, Javascript, Python, NodeJS etc came along.

I remembered the initial excitement of writing my first tech blog post for the world to read back then.

Thus I want to feel what it feels like to launch my blog pages, for the second time - several years later!

Here’s to my future blogging days ahead, no matter what the future changes may bring.

Till then, Happy Coding! 👨‍💻💻⌨️

PS: I want to give to this blog post link that ultimately helped to make Hexo transition smoothly in the first place! 😉😊 - https://gangmax.me/blog/2019/12/16/From-Octopress-to-Hexo/

Comments