...hi, this is av


ava's blog

using melon's gallery maker (a micro-ssg)

I've been looking for ways to make a nice gallery for my static site to gather images about some of my interests like nailart, sewing, embroidery and digital art. Arranging the images nicely, optimizing them, creating thumbnails and working JS for enlarging on a click together with responsive design can be time consuming or difficult.

Thankfully, Melon made a tool that makes this a lot easier and more automated - give it a source folder, define the output, set the image size and compression and it creates the template files plus image files for you. More can be done by including additional files in the source folder, like a .txt file to give a description, a .css file for a preset style, an .mp3 file for music effects etc. The source images are not modified in any way, so you still keep the originals. The modified images have their META data removed automatically.

The template that is spat out can be remade as often as needed with new settings and designs; files will be replaced and images will only be regenerated if needed, so you don't end up with several different versions all over your output location.

There's an option to directly upload to Neocities and also the beginnings of offering the same option for Nekoweb websites, but it doesn't work yet.

The installation is pretty straightforward for Windows and MacOS users as well as Ubuntu users, but I am on an Arch-based system, so I chose to build it. I am not good at doing anything with tar.gz so this was my safest bet.

The Github page offers instructions for that. Admittedly, I am a bit of a noob in this regard - I have never had to clone a repository and I very very rarely navigate folder structures via the terminal. I wasn't even necessarily sure what was meant with "repo root", but figured it out.

So in case any other noobs ever stumble upon this, I thought I would write about it (and to track my own learning achievements).

The first requirement is to make sure that Node.js 18+ is installed on the system. I just checked online if this is included with the system packages of my distro or if it is needed as dependency for anything I use, and discovered it is indeed installed.

Next step is to clone the repository. The mistake I made here at first is to not navigate via terminal to anything I could easily access or clone to, and I also used the normal GitHub URL. It worked once I made sure I was in the Desktop (cd Desktop, easiest location, really) and used the link you get on GitHub if you click the green Code button and copy it. Ran git clone <url> and it worked.

After that, I discovered the repo root is just to be inside that newly created folder. cd <foldername>.

The next few steps are just commands in the terminal: sudo corepack enable because it had to be run as admin, then yarn install , then yarn run start.

Afterwards I had to run yarn run dist to let my system create the executible, which shows up within the Melon Gallery Maker folder in the subfolder "dist". Before running the AppImage, I also installed extra/libvips from the Arch repo by sudo pacman libvips and choosing the fitting option.

Opening the dist folder and executing the AppImage opens the software.

The result of the gallery maker can be seen here. I am very happy with it and will use it to create other gallery subpages in the future.

#webdev