I recently spent a few months building a website using Drupal CMS and Canvas, and I really enjoyed the process. So when that project wound down, I thought maybe I would build another one just for fun. The next day was a rainy Saturday here in Noosa and I decided to start tinkering.

My fuzzy vision

What I knew when I sat down was:

• The website would be my personal site (I didn't have one before, I just owned the domain)
• I would build the website with Drupal CMS and Canvas (obviously!)
• I wanted it to feature rainbows as the central design element
• I wanted to use a vivid purple as the accent colour

Other than that, I really didn't know what I wanted, so I thought Claude Design would be a good place to start. It was not. I hated the direction and was not getting anywhere with revisions. I have had success using it but only with existing design systems and more direction, so without that I moved on.

I did a Google search for "rainbow animation" and came across a community Figma file that seemed promising. That was really all I needed to get going. 

Straight to implementation

I installed Drupal CMS using the Starter recipe, and made a copy of Mercury as a custom theme. Mercury's component library provides a great foundation to build on so you don't have to start from scratch.

I used Cursor with the Figma add-on to create a single-directory component with the rainbow animation, pretty straightforward with the prototype file. I tweaked a few of the colours to make them a bit more vivid and adapted the component to add the heading text and the sparkle animation on hover.

Hmm... now what?

One aspect of the plan that was missing was what on earth to put on this website. Since I didn't already have one, I didn't have any content to migrate or adapt.

Most people's personal sites have a blog of some kind and an 'About' page. I have done a few blog posts for Drupal CMS in the past year, and used recent conference talks to fill out the posts.

The 'About' page was a real struggle. I don't like talking about myself and I really didn't like the idea of a wall of text. I could liven it up with some imagery but that still felt too bland. I got the idea for cards that you had to turn over and ran with that. I love how it turned out! For the most part, I implemented this giving prompts to Cursor and then tweaking the output. (The much harder part was coming up with what to say.)

Highlighting Drupal CMS

This site only exists because I wanted to play with Drupal CMS and Canvas, so why not showcase it? Canvas is best used for marketing-type pages and I had a bunch of components that I created for another site that I was able to reuse here.

The content is mostly adapted from the keynote that I delivered at DrupalSouth Wellington in May.

The hosting problem

With the site mostly done, it was down to the age-old question with Drupal sites: Where to host it? Initially I thought I would host it on Upsun. I have a lot of experience with their platform and I find it super easy to use. It's definitely overkill for this site, but it was familiar.

Unfortunately, I went through the setup before realising that it would cost a lot more than I thought. I expected it to be in the AUD$40-$50/month range, but it was looking more like $100/month and that was just too much for a silly side project.

Going down the shared hosting route was not an option. I have done a lot of testing of shared hosting for Drupal CMS and concluded it's not worth the savings.

I had in the back of my mind that I could try to host it as a static site that I generate locally, since that also means not having to worry about updates. But I had never done it before and was not sure how easy it would be. Now it looked like the best option!

Using Tome to generate a static site

I knew about Tome as a tool for static site generation, and there are excellent docs but I was suspicious at first because they are so short. Could it really be that simple? But it really was (almost) that simple. I didn't need to worry about syncing or storing the content in Git, I just needed the static files.

composer require drupal/tome
drush en tome_static -y
drush tome:static --uri=http://mysite.com

Tome also offers the option to preview the static site, which is a nice way to spot obvious issues.

And I had a few small issues: some theme assets were not getting copied, and the Klaro! consent manager was breaking Tome's oEmbed rewrites so the embedded YouTube videos were not working. I also wanted to preload the fonts to avoid the flickering, especially since I'm using regular text for the logo. 

Because Tome is so robust and well engineered, all of these problems were easy for Claude Code to overcome with a very simple custom module that has an event subscriber for each of the tasks. This isn't how I would handle it on a project, and there may even be solutions for this in contrib. But I didn't need the most robust solution, I just wanted a functioning site.

Free hosting with Netlify

Now that I had the static assets I just had to put them somewhere. I knew that Netlify offers free static hosting so that was my first stop. Here again I got suspicious: There's got to be more to this.

After creating a project on Netlify, this is all I needed to do:

npx netlify-cli login
npx netlify link
npx netlify deploy --dir=html

This logs in, links the current directory to the corresponding Netlify project, and deploys the files from the html directory to it.

After some testing and tweaking, I published the site. From there, to deploy live directly, you can run:

npx netlify deploy --dir=html --prod

Once I was happy with that, all I had to do was update my domains to point them to Netlify's nameservers.

With that, the site was live on Tuesday, after conceiving of it only a few days before.

'Proof we are on the right path'

This website is unremarkable in most ways. But that fact that it exists at all is remarkable! Even a year ago, there is no way I would have attempted to build a personal website a somewhat unconventional design using Drupal. Not only did I attempt it but I had a lot of fun doing it and managed to get it live in days.

I want to give a shoutout to Fons Vandamme, who gave me the inspiration to build this. He shared his personal website with me and I loved it so much; it's really fun and different and it got me thinking about doing something along the same lines. We recently talked about how incredible it is to be able to use Drupal this way, having worked with it for so long under... different circumstances.

We may not be seeing major shifts in large-scale trends, but this is still meaningful. Building with Drupal is fun and fast. As Fons said, "That is the best proof that we are on the right path."