My Experiences creating this site with Tome, part 1


Tome Logo

Note:  This is a multi-part series.

I recently decided, after a few years of focusing on other things in my life, to put my blog back up.  I have always enjoyed blogging about subjects that interest me, including things I've learned in the technology space.

One of the reasons I took my previous blog down was time.  I was simply too busy to keep up with the maintenance it takes to keep an application updated and secure, especially in this day and age.  So, a deciding factor in putting the blog back online was:  it must be low mainentance.

Enter Tome, a static site generator for Drupal, written a few years ago by Sam Mortenson.

Why Tome?

Tome checked all the boxes but one for me:

  • Static sites lower the risk of hacking
  • Tome utilizes Drupal, so I could use most of my favorite modules
  • It isn't Wordpress (W00t!)
  • It's simple yet effective at what it does (with a few gotchas, more on that later)
  • I can run an outdated version of Drupal for content generation and management with any of the security risks, and update it when I have the time to do so
  • It leverages a simple yet effective Javascript-based search called Lunr (which Sam also turned into a Drupal module)
  • The setup and usage is pretty well documented, although I did deviate from some of the out-of-the-box setup to again lower the maintenance (more on this later)

The only box that wasn't checked was the ability to have a contact form on the site.  That was solvable easily enough using an embedded third-party form engine.  After trying out a few, I settled on un-static forms.  So far I like the result, simple yet effective.

For now, I'm hosting the static site on Github Pages.  Other than setting up the simple theme (again, sticking with the low maintenance mantra) setting the site up on Github Pages was the most labor intensive part of this project, other than actually creating the content.

Contributed modules in use

The key modules I used to set up the CMS portion of the site are:

I left out some that were dependencies for other modules.

Core modules / themes in use

I selected a subset of Core modules to use, as follows:

  • Block
  • Block Content
  • Breakpoint
  • CKEditor 5
  • Configuration Manager
  • Datetime
  • Field / Field UI
  • File and Image
  • Link
  • Custom Menu Links and Menu UI
  • MySQL (more on this later)
  • Options
  • Responsive Image
  • SQLite (more on this later)
  • Taxonomy

I'm using Drupal Core's Claro theme as the site administrative theme.  Why not Gin Admin?  Well, again, keeping with the low maintenance mantra, Claro does all I need.  The custom front-end theme is generated using the drush theme generator, and is based on Stable 9.  I decided to use TailwindCSS for the site theming, borrowed a few key theme elements from TailwindUI, but deviated from Tailwind's utility-first approach (except in a few places), using a base stylesheet and Tailwind's @apply directive for highly reusable styling (again, low maintenance).

Finally, some AI-Generated elements

I'm not a designer, and I'm a worse artist, but I wanted some elements on the site to reflect my personal style, so I used ChatGPT to generate a couple of images for my 403 / 404 pages.  I opted for black-and-white simulated pencil drawings for the images used on these pages, and the resemblance to the muse is remarkably close.  I like them, they remind me of some of the very things in my personal life that bring me joy, and put a smile on my face multiple times a day.

Love those puppers!  They're quirky, like me.