Middlenman static site generator

To replace the old Hexo blog, I’ve tried to use Jekyll to make a replacement which is almost completed.

But I have choosen Middleman framework in current site. All are the frameworks for generationg static site pages. Hexo is based on Nodejs. Jekyll and Middleman are based on Ruby.

Why I switched to another framework which I even hadn’t touched before?

Much more controlable and flexible

My site is not just regular blog and template. The pages are almost highly customized by me, including layout and styles. So the page custom template capbility is high priority.

The top reason which I didn’t continue with Jekyll is its default template language Liquid, which is not as powerful as Ruby language. For example, there is no map, filter and reduce functional methods for array-like data struct. Only basic looping methods in Liquid.

And the Liquid syntax is unique and total different to ruby which is intutive. I don’t notice that until I learn and write in the Jekyll.

It’s quite frustrating when couldn’t reach Ruby’s power and flexbilty, especially in a rudy framework.

I need the ability to excute ruby code in page template. In in other words, I need Erb or something similar. By default, Middleman uses erb which is my desired

By the way, it should exist ways to merge the erb into Jekyll. But with other benefit, I had decided to use Middleman.

Haml for the web page template instead of ERB

Although, Ruby can be used to generate the content dynamiclly. But the ERB syntax is painful when mix the HTML <> tag and Ruby code block with different code style.

Then I found Haml. Indent-aware code block(like Python) is more clear without the <> tags.

%header.site-header.wrapper
  = link_to '/', title:'Homepage', class: 'site-logo-title-container' do
  - if data.site.logo.type == 'svg-inline'
    = partial image_path("logo.svg")
  - else
    = image_tag.site-logo(data.site.logo.path)
  
  - if data.site.title
    %span.site-title= data.site.title

The rendered HTML likes below:

<header class="site-header wrapper">
  <a href="/" title="Homepage" class="site-logo-title-container">
  <svg><!-- svg image parts...--></svg>

  <!-- <img src="or-other-formate-image.png"/>--->
</header>

The haml code example above contains a condition to handle the logo image, either inline include the SVG image or load other format image usally.

Enhance the middleman by coding with AI

Middleman seems not to be quite maintained since 2021, but it’s still a good choice for static site generator. Most blog features are included and not need to upgrade frequently with fancy new ones.

And I can also write in ruby for the patch, if I need the features which is not presented as default. Especially, I can use the AI to generate the code for me as the adviser.

Custom pandoc markdown engine for middleman

The blog requires Markdown syntax parser for the artciles. Middleman use kramdown as the default markdown engine, and redcarpet is also supported. But I had used pandoc since 2017 when I started to build the first version of the blog, which isn’t supported by default.

Either I switch the supported engine which has slightly different syntax and I may need to modify some articles, or I merge the pandoc engine into the Middleman, so the old articles keep the same Markdown syntax.

I choose the second one, and I will use the AI to generate the code for me. But the code generated isn’t totally usable at first, the underlaying logic of the Middleman is missing, so I need to maunally modify the code which communicate with the libraray.

I read the related source code of the Middleman. Sometimes I gave library code snippet to AI context, turn down to small problem which AI can solve. Working together is more like pair programming with AI, and I finished the first version runnable pandoc markdown engine which is migrated with Middleman.

Even the generated code wasn’t runnable at the beginning, the code could act as the pseudocode which I had not needed to fully review the library to bootstrap the project. Then I could verify, modify and rewrite completely to finish the job.

Turbo improves the experience

Hotwire’s Turbo is a javascript framework to partial load the page, in order to help the user experience when fully load pages less. I apply it on artciles list only currently, the pagination of the article list is appended or prepended in the same page.

AI continued to generate the control code in JS, which is fine, but it’s overenginering which doesn’t ulitiy with Turbo very well.

I came up a trick which I generated each page num placeholder, then turbo load the article list on specify page num, it fills in the extact position. I had disscused the idea with AI before I implemented, and it confirmed and praised immediately.

It’s interesting that AI can understand the solution quite well even it cannot come up the idea at first.

Conclusion

The article records some programming parts of the new blog based on Middleman, and the examples during working with AI.

Sometimes AI isn’t able to output the code correctly and directly when occurs the complex problems for now.

But you can brainstorm with it and determinate and tune the solution step by step. It’s still a good experience as AI like a creative coworker.