Goal
To set up a reasonable content structure for my blog.
Before Hugo
In my old Octopress blog, images and posts were placed
under source/images/posts and source/_posts folders respectively.
They were so far apart that I needed to use copy and paste the URL’s
so as to get them right. As the size of the blog grew, I could hardly
retrieve an image without first listing the files in the post image
folder. This significantly reduced the efficiency of blog writing.
In my hometown, people take efficiency seriously.
After Hugo
At first, I followed Jura’s advice and put all post images as the site’s static contents.
However, that didn’t address the above problem.
Thanks to Regis Philibert’s article on Hugo page resources, I’ve now adopted Hugo’s leaf bundle structure for holding the illustrations with each post. An image can be added by its relative path. This greatly simplifies the editing process.
To avoid going deep into Hugo’s image processing functionalities, I used ImageMagick to optimize the pictures for Web.
convert image.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB image_converted.jpg
I’ve used -quality 60 for largest photos in
my post about fan cleaning. Despite the reduced quality, the
display is still great.
The Beautiful Hugo has already done the config for popup images,
so the built-in shortcode figure will automatically create a
gallery for each page.