Snapshot photo

For the record, here is a screenshot of how the website looks like now;

thouters.be website screenshot in 2025

The codebase

I set up Pelican some years ago since I use and prefer reStructuredText over markdown, and like the fact that Pelican is written in Python and customisable. Each post has its own file in the repository, and a makefile triggers an upload to my web server using rsync.

The theme

I used the Blue Penguin theme by Tyler Carr as basis for the website style, but heavily modified it over the years. The Blue Penguin Dark theme exists nowadays, I don't exactly if it is that one that I used, or if I darkened it myself.

Flexible Box layout cards from Ghost's Casper theme

I've (jealously) been eyeballing some homepages that use Ghost, and they all use a flexible box layout (ccs display: flex;) combined with some slick visual design.

Martijn Braam created a jinja HTML template to render his website with such a design and shared in the spook repository's static_casper folder. I could also find the HTML style file (CSS) in the repository.

I integrated the CSS file into my own website by adding all elements under an id=#casper identifier, and tweaked the CSS a little more to integrate more nicely in my existing CSS configuration.

Infinite scrolling

When websites have a lot of data to display they typically paginate/limit the data that is presented when the webpage loads. Remember the Gooooooooogle at the bottom of your search results, with every o representing one of the result pages you could click? Nowadays you typically get a 'load more' at the bottom of a webpage, or a webpage that you can seem to scroll indefinitely on (e.g. an algorithm firehose like xitter or Tiktok).

On my front-page, you used to have to click a next page / previous page to navigate the large list of posts, but by adding a small piece of ready made javascript, the content of the next pages gets loaded into the front-page when scrolling downwards.

<script src="https://www.thouters.be/theme/js/infinite-scroll.pkgd.min.js"></script>
<script>
    let elem = document.querySelector('.post-feed');
let infScroll = new InfiniteScroll( elem, {
  // options
  path: '.next_page',
  append: '.post',
  history: false,
});
</script>
<script>
  document.getElementById('js-only-message').style.display = 'block';
</script>

Visually attractive summaries

The ghost theme's article card features a title, a summary and a picture.

These can be extracted from your posts by some plugins.

The featured_image plugin can extract the first image from an article and exposes it in the template.

PLUGINS += ['featured_image']

The summary itself can be retrieved by the featured_image plugin

PLUGINS += ['summary']

By default the summary plugin extracts the first paragraph, but by using the markers like PELICAN_BEGIN_SUMMARY in your content you can pick a snipet of the intro section instead.

I typically begin my posts with metadata, an image and summary markers:

:author: Thomas Langewouters
:description: website stuff
:date: 2025-04-10 17:45
:tags: homepage, etching, diycircuitboard, kicad
:slug: ThoutersDotBeAnno2025
:image: https://www.thouters.be/img/ThoutersDotBeAnno2025/pelican-logo.svg


.. figure:: {static}img/ArticleName/image.png
   :alt: image
   :align: center

   description of the image that is used as featured image.


.. PELICAN_BEGIN_SUMMARY

some introduction that also serves as summary


.. PELICAN_END_SUMMARY

.. contents:: Table of Contents

PLUGINS += ["pelican.plugins.jinja_filters"]

<div class="post-card-excerpt">
    {{ article.summary |unwrap_links }}
</div>

Visitor comments

Carl Schwan had an interesting idea, he uses a static site generator as well, and that means the website can't accept and store data, like for visitor comments.

Handling and storing the comments would even expose you to GDPR requests and require cookie banners. It's better if you can delegate this to a third party service.

So static websites usually use a third party service like github utterances.

Carl's idea was to create a mastodon toot per article (a toot is a social media post, 'tweet') , and have people discuss and reply to that specific toot on the mastodon (fediverse) social network. Other people have made similar implementations as well.

This works fine if your reading audience has a mastodon account, and great if they find their way to your website via the mastodon toot that you are using as the discussion board.

I adapted his javascript code to fit my website style.

It's not so accessible than other options like discus though, visitors need to have a fediverse account, and most people simply don't have an account.

Pagination paths

I don't like subfolders for tags or index pages, so I changed this pelican setting:

 # example pagination pattern
 PAGINATION_PATTERNS = (
     (1, '{url}', '{save_as}'),
-    (2, '{base_name}/page/{number}/', '{base_name}/page/{number}/index.html'),
+    (2, '{base_name}/page-{number}-', '{base_name}/page-{number}-index.html'),

TODO/wish list

• I still want need to check out which plugin for displaying a photo album with thumbnails will work best for me.
• When I have a project with PDF attachements, some simple macro to show a box with pdf icon and filename would be nice to have.