omasta.net

My Personal Website

• Live URL: omasta.net
• Built using Hugo, an open-source static site generator.

Table of Contents

• Features
• Dependencies
• Installation
• Image Gallery
  • Usage
  • Features
• Thanks

Features

• Multi-lingual site
• Automatic light/dark mode switching
• Image gallery with Photoswipe
• A single RSS feed per language (limited to type: posts)
• Custom Hugo theme based on vimux/blank
• Valid HTML, CSS and RSS.
• Optimised for Google's PageSpeed Insights

Dependencies

• Updated automatically, see params.deps in hugo.yaml:
  • PhotoSwipe
  • ai-robots-txt/ai.robots.txt
• robots.txt by baccyflap
  • Copied manually to robots-baccyflap.txt:
    • baccyflap.com/res/robots

Installation

• Install Hugo

• Clone this repository:

  git clone https://github.com/momasta/omasta.net.git

• Enter the project directory:

  cd omasta.net

• Test the site locally:

  killall hugo; hugo server --minify --bind 0.0.0.0 --baseURL="http://$(hostname -f):1313" --port 1313

• Build the site:

  killall hugo; hugo --minify --cleanDestinationDir

Image Gallery

A Hugo shortcode based on this article by Christian Specht.

• Source: themes/blank/layouts/_shortcodes/gallery.html
• Live Demo: omasta.net/memes/
• Live Demo (.size-s): omasta.net/tech-spurt-quotes/

Usage

In a Markdown file

{{< gallery "geoguessr-tips" >}}

{{< gallery "memes" "type-grid" >}}

{{< gallery "tech-spurt" "type-grid size-s" "name" >}}

Arguments

• Path (optional)
  • Where to look for images
  • Supports:
    • Subdirectory of assets/images/
    • File path
    • Glob pattern
  • Default: "/"
• Class (optional)
  • Additional classes for .gallery
  • Space-separated, just like in HTML's class="" attribute.
  • Supports:
    • size-s: smaller thumbnails, no gallery filter input.
  • Default: ""
• Sort By (optional)
  • Supports: "date", "name"
  • Default: "date"

Features

• Uses Photoswipe to show images.
• Captions based on filenames.
• Images sorted by date.
• WebP thumbnails
  • Short hashes for filenames.
  • Stored in a t/ subdirectory, out of the way.
  • 1x and 2x DPR variants for srcset.
  • Adds loading="eager" to the first 12 thumbnails, and loading="lazy" for the rest.
  • GIF support (uses the actual file as a thumbnail).
• Accessibility markup
• ?lightbox= URL param to open an image on page load.
• Gallery Filter
  • Search-as-you-type image filtering.
  • Source: assets/js/gallery-filter.js
  • Fast and debounced.
  • Uses normalised strings to find matches, while giving priority to exact matches and "starts with".
  • Supports a ?q= URL param to prepopulate the search input.

Thanks

Hugo

• A fast open-source static site generator.
• Hugo Homepage and Docs
• gohugoio/hugo on GitHub

WebStorm

• My favourite IDE.
• Free for non-commercial use.
• WebStorm Homepage

PhotoSwipe

• JavaScript image gallery for mobile and desktop, modular, framework independent.
• PhotoSwipe Homepage
• dimsemenov/PhotoSwipe on GitHub

ai.robots.txt

• A list of AI-related crawlers to block.
• My website was made by a human, for humans.
  Not for half-baked hallucinating Cleverbot-like LLM chatbots, such as ChatGPT.
• ai.robots.txt on GitHub

Blank

• Starter Hugo theme.
• Vimux/blank on GitHub

sass-boilerplate

• The base for my stylesheets.
• KittyGiraudel/sass-boilerplate on GitHub

Meteocons

• SVG sun and moon icons I'm using for light/dark mode switching.
• Meteocons Homepage